Table

import { Table } from "@/components/table";

export const meta = { layout: "padded" } as const;

const invoices = [
  { id: "INV-001", client: "Acme Corp", status: "Paid", amount: 1250 },
  { id: "INV-002", client: "Globex", status: "Pending", amount: 480 },
  { id: "INV-003", client: "Initech", status: "Paid", amount: 3200 },
  { id: "INV-004", client: "Umbrella", status: "Overdue", amount: 920 },
  { id: "INV-005", client: "Soylent", status: "Pending", amount: 1675 },
];

const formatAmount = (value: number) =>
  new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
  }).format(value);

export default function TablePreview() {
  const total = invoices.reduce((sum, i) => sum + i.amount, 0);

  return (
    <Table>
      <Table.Caption>Recent invoices</Table.Caption>
      <Table.Header>
        <Table.Row>
          <Table.Head>Invoice</Table.Head>
          <Table.Head>Client</Table.Head>
          <Table.Head>Status</Table.Head>
          <Table.Head align="end">Amount</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {invoices.map((invoice) => (
          <Table.Row key={invoice.id}>
            <Table.Cell className="font-medium">{invoice.id}</Table.Cell>
            <Table.Cell>{invoice.client}</Table.Cell>
            <Table.Cell>{invoice.status}</Table.Cell>
            <Table.Cell align="end">{formatAmount(invoice.amount)}</Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
      <Table.Footer>
        <Table.Row>
          <Table.Cell colSpan={3}>Total</Table.Cell>
          <Table.Cell align="end">{formatAmount(total)}</Table.Cell>
        </Table.Row>
      </Table.Footer>
    </Table>
  );
}

import { Table } from "@/components/table";

export const meta = { layout: "padded" } as const;

const invoices = [
  { id: "INV-001", client: "Acme Corp", status: "Paid", amount: 1250 },
  { id: "INV-002", client: "Globex", status: "Pending", amount: 480 },
  { id: "INV-003", client: "Initech", status: "Paid", amount: 3200 },
  { id: "INV-004", client: "Umbrella", status: "Overdue", amount: 920 },
  { id: "INV-005", client: "Soylent", status: "Pending", amount: 1675 },
];

const formatAmount = (value: number) =>
  new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
  }).format(value);

export default function TablePreview() {
  const total = invoices.reduce((sum, i) => sum + i.amount, 0);

  return (
    <Table>
      <Table.Caption>Recent invoices</Table.Caption>
      <Table.Header>
        <Table.Row>
          <Table.Head>Invoice</Table.Head>
          <Table.Head>Client</Table.Head>
          <Table.Head>Status</Table.Head>
          <Table.Head align="end">Amount</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {invoices.map((invoice) => (
          <Table.Row key={invoice.id}>
            <Table.Cell className="font-medium">{invoice.id}</Table.Cell>
            <Table.Cell>{invoice.client}</Table.Cell>
            <Table.Cell>{invoice.status}</Table.Cell>
            <Table.Cell align="end">{formatAmount(invoice.amount)}</Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
      <Table.Footer>
        <Table.Row>
          <Table.Cell colSpan={3}>Total</Table.Cell>
          <Table.Cell align="end">{formatAmount(total)}</Table.Cell>
        </Table.Row>
      </Table.Footer>
    </Table>
  );
}

import { useMemo, useState } from "react";

import { Table } from "@/components/table";

export const meta = { layout: "padded" } as const;

type SortKey = "name" | "role" | "joined";
type SortDir = "asc" | "desc";

const team = [
  { name: "Ana Costa", role: "Designer", joined: "2024-02-12" },
  { name: "Bruno Silva", role: "Engineer", joined: "2023-08-30" },
  { name: "Carla Mendes", role: "PM", joined: "2025-01-04" },
  { name: "Diogo Pinto", role: "Engineer", joined: "2022-11-19" },
  { name: "Elisa Faria", role: "Designer", joined: "2024-09-22" },
];

export default function TableSortablePreview() {
  const [sortKey, setSortKey] = useState<SortKey>("name");
  const [sortDir, setSortDir] = useState<SortDir>("asc");

  const sorted = useMemo(() => {
    return [...team].sort((a, b) => {
      const cmp = a[sortKey].localeCompare(b[sortKey]);
      return sortDir === "asc" ? cmp : -cmp;
    });
  }, [sortKey, sortDir]);

  const sortFor = (key: SortKey) => (sortKey === key ? sortDir : (false as const));

  const handleSort = (key: SortKey) => () => {
    if (sortKey === key) {
      setSortDir((d) => (d === "asc" ? "desc" : "asc"));
    } else {
      setSortKey(key);
      setSortDir("asc");
    }
  };

  return (
    <Table>
      <Table.Header>
        <Table.Row>
          <Table.SortableHead sort={sortFor("name")} onSort={handleSort("name")}>
            Name
          </Table.SortableHead>
          <Table.SortableHead sort={sortFor("role")} onSort={handleSort("role")}>
            Role
          </Table.SortableHead>
          <Table.SortableHead sort={sortFor("joined")} onSort={handleSort("joined")}>
            Joined
          </Table.SortableHead>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {sorted.map((member) => (
          <Table.Row key={member.name}>
            <Table.Cell className="font-medium">{member.name}</Table.Cell>
            <Table.Cell>{member.role}</Table.Cell>
            <Table.Cell>{member.joined}</Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
    </Table>
  );
}

import { useState } from "react";

import { Checkbox } from "@/components/checkbox";
import { Table } from "@/components/table";

export const meta = { layout: "padded" } as const;

const tasks = [
  { id: "t-1", title: "Review PR #482", priority: "High", assignee: "Ana" },
  {
    id: "t-2",
    title: "Update onboarding copy",
    priority: "Low",
    assignee: "Bruno",
  },
  {
    id: "t-3",
    title: "Fix flaky checkout test",
    priority: "High",
    assignee: "Carla",
  },
  {
    id: "t-4",
    title: "Audit color tokens",
    priority: "Medium",
    assignee: "Diogo",
  },
];

export default function TableWithSelectionPreview() {
  const [selected, setSelected] = useState<Set<string>>(new Set());

  const allSelected = selected.size === tasks.length;
  const someSelected = selected.size > 0 && !allSelected;

  const toggleAll = () => {
    setSelected(allSelected ? new Set() : new Set(tasks.map((t) => t.id)));
  };

  const toggleOne = (id: string) => () => {
    setSelected((prev) => {
      const next = new Set(prev);
      if (next.has(id)) {
        next.delete(id);
      } else {
        next.add(id);
      }
      return next;
    });
  };

  return (
    <Table>
      <Table.Header>
        <Table.Row>
          <Table.Head className="w-10">
            <Checkbox
              checked={allSelected}
              indeterminate={someSelected}
              onChange={toggleAll}
              aria-label="Select all rows"
            />
          </Table.Head>
          <Table.Head>Task</Table.Head>
          <Table.Head>Priority</Table.Head>
          <Table.Head>Assignee</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {tasks.map((task) => {
          const isSelected = selected.has(task.id);
          return (
            <Table.Row key={task.id} data-selected={isSelected || undefined}>
              <Table.Cell>
                <Checkbox
                  checked={isSelected}
                  onChange={toggleOne(task.id)}
                  aria-label={`Select ${task.title}`}
                />
              </Table.Cell>
              <Table.Cell className="font-medium">{task.title}</Table.Cell>
              <Table.Cell>{task.priority}</Table.Cell>
              <Table.Cell>{task.assignee}</Table.Cell>
            </Table.Row>
          );
        })}
      </Table.Body>
    </Table>
  );
}

import { Table } from "@/components/table";

export const meta = { layout: "padded" } as const;

const commits = Array.from({ length: 30 }, (_, i) => ({
  hash: (0x4a2f1c + i * 0x1d3).toString(16).slice(0, 7),
  author: ["Ana Costa", "Bruno Silva", "Carla Mendes", "Diogo Pinto"][i % 4],
  message: [
    "Fix sticky header scroll context",
    "Add Table.Container part",
    "Bump dependencies",
    "Tidy up docs",
  ][i % 4],
}));

export default function TableStickyPreview() {
  return (
    <Table.Container className="max-h-72">
      <Table>
        <Table.Header sticky>
          <Table.Row>
            <Table.Head>Commit</Table.Head>
            <Table.Head>Author</Table.Head>
            <Table.Head>Message</Table.Head>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {commits.map((commit) => (
            <Table.Row key={commit.hash}>
              <Table.Cell className="font-mono">{commit.hash}</Table.Cell>
              <Table.Cell>{commit.author}</Table.Cell>
              <Table.Cell>{commit.message}</Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table>
    </Table.Container>
  );
}

import {
  type ColumnDef,
  flexRender,
  getCoreRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  type SortingState,
  useReactTable,
} from "@tanstack/react-table";
import { useMemo, useState } from "react";

import { Checkbox } from "@/components/checkbox";
import { Pagination, usePagination } from "@/components/pagination";
import { Table } from "@/components/table";

export const meta = { layout: "padded" } as const;

type Order = {
  id: string;
  customer: string;
  status: "Pending" | "Shipped" | "Delivered" | "Refunded";
  total: number;
  createdAt: string;
};

const orders: Order[] = [
  {
    id: "#1024",
    customer: "Acme Corp",
    status: "Shipped",
    total: 2480,
    createdAt: "2026-04-22",
  },
  {
    id: "#1025",
    customer: "Globex",
    status: "Pending",
    total: 415,
    createdAt: "2026-04-22",
  },
  {
    id: "#1026",
    customer: "Initech",
    status: "Delivered",
    total: 8120,
    createdAt: "2026-04-21",
  },
  {
    id: "#1027",
    customer: "Umbrella",
    status: "Refunded",
    total: 320,
    createdAt: "2026-04-20",
  },
  {
    id: "#1028",
    customer: "Soylent",
    status: "Shipped",
    total: 1675,
    createdAt: "2026-04-20",
  },
  {
    id: "#1029",
    customer: "Massive Dynamic",
    status: "Pending",
    total: 590,
    createdAt: "2026-04-19",
  },
  {
    id: "#1030",
    customer: "Tyrell",
    status: "Delivered",
    total: 4250,
    createdAt: "2026-04-18",
  },
  {
    id: "#1031",
    customer: "Wayne Ent.",
    status: "Shipped",
    total: 980,
    createdAt: "2026-04-18",
  },
  {
    id: "#1032",
    customer: "Stark Ind.",
    status: "Pending",
    total: 1340,
    createdAt: "2026-04-17",
  },
  {
    id: "#1033",
    customer: "Wonka",
    status: "Delivered",
    total: 215,
    createdAt: "2026-04-16",
  },
  {
    id: "#1034",
    customer: "Cyberdyne",
    status: "Shipped",
    total: 6700,
    createdAt: "2026-04-15",
  },
  {
    id: "#1035",
    customer: "Hooli",
    status: "Refunded",
    total: 110,
    createdAt: "2026-04-15",
  },
];

const formatAmount = (value: number) =>
  new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
  }).format(value);

export default function TableDataTablePreview() {
  const [sorting, setSorting] = useState<SortingState>([]);
  const [rowSelection, setRowSelection] = useState({});

  const columns = useMemo<ColumnDef<Order>[]>(
    () => [
      {
        id: "select",
        size: 40,
        header: ({ table }) => (
          <Checkbox
            aria-label="Select all rows"
            checked={table.getIsAllPageRowsSelected()}
            indeterminate={table.getIsSomePageRowsSelected()}
            onChange={(e) => table.toggleAllPageRowsSelected(!!e.currentTarget.checked)}
          />
        ),
        cell: ({ row }) => (
          <Checkbox
            aria-label={`Select order ${row.original.id}`}
            checked={row.getIsSelected()}
            onChange={(e) => row.toggleSelected(!!e.currentTarget.checked)}
          />
        ),
        enableSorting: false,
      },
      {
        accessorKey: "id",
        header: "Order",
        cell: (info) => <span className="font-medium">{info.getValue<string>()}</span>,
      },
      { accessorKey: "customer", header: "Customer" },
      { accessorKey: "status", header: "Status" },
      {
        accessorKey: "createdAt",
        header: "Created",
      },
      {
        accessorKey: "total",
        header: "Total",
        cell: (info) => formatAmount(info.getValue<number>()),
        meta: { align: "end" as const },
      },
    ],
    [],
  );

  const table = useReactTable({
    data: orders,
    columns,
    state: { sorting, rowSelection },
    onSortingChange: setSorting,
    onRowSelectionChange: setRowSelection,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    initialState: { pagination: { pageSize: 5 } },
  });

  const pageCount = table.getPageCount();
  const pageIndex = table.getState().pagination.pageIndex;
  const items = usePagination({ page: pageIndex + 1, count: pageCount });

  const selectedCount = table.getSelectedRowModel().rows.length;

  return (
    <div className="flex flex-col gap-4">
      <Table.Container>
        <Table>
          <Table.Header>
            {table.getHeaderGroups().map((headerGroup) => (
              <Table.Row key={headerGroup.id}>
                {headerGroup.headers.map((header) => {
                  const align = (
                    header.column.columnDef.meta as
                      | { align?: "start" | "center" | "end" }
                      | undefined
                  )?.align;
                  const canSort = header.column.getCanSort();
                  const sort = header.column.getIsSorted();

                  if (canSort) {
                    return (
                      <Table.SortableHead
                        key={header.id}
                        align={align}
                        sort={sort === false ? false : sort}
                        onSort={header.column.getToggleSortingHandler() ?? (() => {})}
                        style={header.getSize() !== 150 ? { width: header.getSize() } : undefined}
                      >
                        {flexRender(header.column.columnDef.header, header.getContext())}
                      </Table.SortableHead>
                    );
                  }

                  return (
                    <Table.Head
                      key={header.id}
                      align={align}
                      style={header.getSize() !== 150 ? { width: header.getSize() } : undefined}
                    >
                      {flexRender(header.column.columnDef.header, header.getContext())}
                    </Table.Head>
                  );
                })}
              </Table.Row>
            ))}
          </Table.Header>
          <Table.Body>
            {table.getRowModel().rows.length === 0 ? (
              <Table.Row>
                <Table.Cell
                  colSpan={columns.length}
                  align="center"
                  className="h-24 text-foreground-secondary"
                >
                  No results.
                </Table.Cell>
              </Table.Row>
            ) : (
              table.getRowModel().rows.map((row) => (
                <Table.Row key={row.id} data-selected={row.getIsSelected() || undefined}>
                  {row.getVisibleCells().map((cell) => {
                    const align = (
                      cell.column.columnDef.meta as
                        | { align?: "start" | "center" | "end" }
                        | undefined
                    )?.align;
                    return (
                      <Table.Cell key={cell.id} align={align}>
                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                      </Table.Cell>
                    );
                  })}
                </Table.Row>
              ))
            )}
          </Table.Body>
        </Table>
      </Table.Container>

      <div className="flex items-center justify-between gap-4">
        <p className="text-foreground-secondary text-sm">
          {selectedCount} of {table.getFilteredRowModel().rows.length} selected
        </p>

        <Pagination className="w-auto">
          <Pagination.List>
            <Pagination.Item>
              <Pagination.Previous
                onClick={() => table.previousPage()}
                disabled={!table.getCanPreviousPage()}
              />
            </Pagination.Item>

            {items.map((item) =>
              item.type === "page" ? (
                <Pagination.Item key={item.key}>
                  <Pagination.Link
                    isActive={item.selected}
                    onClick={() => table.setPageIndex(item.value - 1)}
                  >
                    {item.value}
                  </Pagination.Link>
                </Pagination.Item>
              ) : (
                <Pagination.Item key={item.key}>
                  <Pagination.Ellipsis />
                </Pagination.Item>
              ),
            )}

            <Pagination.Item>
              <Pagination.Next
                onClick={() => table.nextPage()}
                disabled={!table.getCanNextPage()}
              />
            </Pagination.Item>
          </Pagination.List>
        </Pagination>
      </div>
    </div>
  );
}