Table

const columns = useMemo<ColumnDef<User>[]>(() => [
  {
    accessorKey: "name",
    header: "Name",
    cell: (info) => (
      <span className="font-medium">{info.getValue<string>()}</span>
    ),
  },
  {
    accessorKey: "role",
    header: "Role",
    cell: (info) => (
      <span className="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs
        font-medium capitalize dark:bg-slate-800">
        {info.getValue<string>()}
      </span>
    ),
  },
  {
    accessorKey: "status",
    header: "Status",
    cell: (info) => {
      const status = info.getValue<string>();
      return (
        <span className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${
          status === "active"
            ? "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400"
            : "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400"
        }`}>
          {status}
        </span>
      );
    },
  },
], []);

import { Table } from "@/ui/Table";

<Table>
  <Table.Caption>Invoice list</Table.Caption>
  <Table.Header>
    <Table.Row>
      <Table.Head>Invoice</Table.Head>
      <Table.Head>Status</Table.Head>
      <Table.Head>Method</Table.Head>
      <Table.Head className="text-right">Amount</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell className="font-medium">INV001</Table.Cell>
      <Table.Cell>Paid</Table.Cell>
      <Table.Cell>Credit Card</Table.Cell>
      <Table.Cell className="text-right">$250.00</Table.Cell>
    </Table.Row>
  </Table.Body>
  <Table.Footer>
    <Table.Row>
      <Table.Cell colSpan={3}>Total</Table.Cell>
      <Table.Cell className="text-right">$250.00</Table.Cell>
    </Table.Row>
  </Table.Footer>
</Table>

import {
  type HTMLAttributes,
  type ReactNode,
} from "react";
import { cn } from "@/lib/utils";

// ─── Types ────────────────────────────────────────────────────────────────────

export interface TableProps extends HTMLAttributes<HTMLDivElement> {
  children: ReactNode;
}

export interface TableHeaderProps extends HTMLAttributes<HTMLTableSectionElement> {
  children: ReactNode;
}

export interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
  children: ReactNode;
}

export interface TableFooterProps extends HTMLAttributes<HTMLTableSectionElement> {
  children: ReactNode;
}

export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
  children: ReactNode;
}

export interface TableHeadProps {
  children?: ReactNode;
  className?: string;
}

export interface TableCellProps {
  children?: ReactNode;
  className?: string;
}

export interface TableCaptionProps extends HTMLAttributes<HTMLTableCaptionElement> {
  children?: ReactNode;
}

// ─── Table ───────────────────────────────────────────────────────────────────

export function Table({ className, children, ...props }: TableProps) {
  return (
    <div
      className={cn(
        "w-full overflow-x-auto rounded-xl border border-slate-200 dark:border-[#1f2937]",
        className,
      )}
      {...props}
    >
      <table className="w-full caption-top text-left text-sm">
        {children}
      </table>
    </div>
  );
}

Table.Header = function TableHeader({ className, children, ...props }: TableHeaderProps) {
  return (
    <thead
      className={cn(
        "border-b border-slate-200 bg-slate-50 dark:border-[#1f2937] dark:bg-[#161b22]",
        className,
      )}
      {...props}
    >
      {children}
    </thead>
  );
};

Table.Body = function TableBody({ className, children, ...props }: TableBodyProps) {
  return (
    <tbody
      className={cn(
        "divide-y divide-slate-100 dark:divide-[#1f2937]",
        className,
      )}
      {...props}
    >
      {children}
    </tbody>
  );
};

Table.Footer = function TableFooter({ className, children, ...props }: TableFooterProps) {
  return (
    <tfoot
      className={cn(
        "border-t border-slate-200 bg-slate-50 font-medium dark:border-[#1f2937] dark:bg-[#161b22] dark:text-slate-300",
        className,
      )}
      {...props}
    >
      {children}
    </tfoot>
  );
};

Table.Row = function TableRow({ className, children, ...props }: TableRowProps) {
  return (
    <tr
      className={cn(
        "transition-colors border-b border-transparent last:border-b-0",
        "hover:bg-slate-50 dark:hover:bg-slate-800/50",
        className,
      )}
      {...props}
    >
      {children}
    </tr>
  );
};

Table.Head = function TableHead({ className, children, ...props }: TableHeadProps) {
  return (
    <th
      className={cn(
        "px-4 py-3 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400",
        className,
      )}
      {...props}
    >
      {children}
    </th>
  );
};

Table.Cell = function TableCell({ className, children, ...props }: TableCellProps) {
  return (
    <td className={cn("px-4 py-3", className)} {...props}>
      {children}
    </td>
  );
};

Table.Caption = function TableCaption({ className, children, ...props }: TableCaptionProps) {
  return (
    <caption className={cn("px-4 py-3 text-sm text-slate-500 dark:text-slate-400", className)} {...props}>
      {children}
    </caption>
  );
}