# Data Table

> Filter, sort, select, and paginate tabular data.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/data-table.json`

## Install

```tsx
import {
  Table,
  TableHeader,
  TableBody,
  TableHead,
  TableRow,
  TableCell,
  DataTableColumnHeader,
  DataTableFacetedFilter,
  DataTableDateFilter,
  DataTableTextFilter,
  DataTableToolbar,
  facetedFilterFn,
  dateRangeFilterFn,
} from "@aspyn-io/kit";
```

### Data table

Filtering, sorting, row selection, column visibility, and pagination — composed from Table plus kit controls and local state.

```tsx
// State: filter, sort, page, selected rows, column visibility.
<div className="flex items-center gap-2">
  <Input placeholder="Filter customers…" value={filter} onChange={…} />
  <DropdownMenu>{/* toggle column visibility */}</DropdownMenu>
</div>

<Table>
  <TableHeader>
    <TableRow>
      <TableHead><Checkbox checked={allSelected} onCheckedChange={toggleAll} /></TableHead>
      <TableHead>Customer</TableHead>
      <TableHead className="text-right">
        <Button variant="ghost" size="sm" onClick={toggleSort}>Amount</Button>
      </TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {rows.map((row) => (
      <TableRow key={row.id} data-state={selected.has(row.id) ? "selected" : undefined}>
        <TableCell><Checkbox checked={selected.has(row.id)} onCheckedChange={…} /></TableCell>
        <TableCell>{row.customer}</TableCell>
        <TableCell className="text-right">{money(row.amount)}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

{/* footer: "{n} of {m} selected" + Previous / Next */}
```

### Per-column filters (TanStack Table)

Each header carries a funnel that opens a type-aware filter — “contains” text, a faceted multi-select with live counts, and a date range. Backed by @tanstack/react-table; the kit components read and write column filter state.

```tsx
const columns: ColumnDef<Invoice>[] = [
  {
    accessorKey: "customer",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Customer"
        filter={<DataTableTextFilter column={column} title="customer" />} />
    ),
  },
  {
    accessorKey: "status",
    filterFn: facetedFilterFn, // scalar cell ∈ selected set
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Status"
        filter={<DataTableFacetedFilter column={column} title="status"
          options={[{ label: "Paid", value: "paid" }, /* … */]} />} />
    ),
  },
  {
    accessorKey: "created",
    filterFn: dateRangeFilterFn, // { from, to } inclusive, by day
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Created"
        filter={<DataTableDateFilter column={column} title="created" />} />
    ),
  },
];

const table = useReactTable({
  data, columns,
  state: { sorting, columnFilters, columnVisibility },
  onSortingChange, onColumnFiltersChange, onColumnVisibilityChange,
  getCoreRowModel: getCoreRowModel(),
  getSortedRowModel: getSortedRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  getFacetedUniqueValues: getFacetedUniqueValues(), // powers the counts
});

<DataTableToolbar table={table}>
  <Input placeholder="Search customers…" value={…} onChange={…} />
</DataTableToolbar>
{/* render header/body with flexRender over table.getRowModel() */}
```

## Notes

- Data Table is a pattern, not a single component: it composes Table with Input (filter), Button (sortable headers + pagination), Checkbox (row selection), DropdownMenu (column visibility), and Badge (status).
- The first example keeps state in React for a self-contained demo. The second wires @tanstack/react-table as the headless engine — DataTableColumnHeader, DataTableFacetedFilter, DataTableDateFilter, and DataTableTextFilter all read and write column filter state directly, so the same components work against server-driven data.
- Set each column's filterFn to match its control: facetedFilterFn for multi-select, dateRangeFilterFn for the date range, and TanStack's default includesString for text. Faceted counts come from getFacetedUniqueValues().
- Mark selected rows with data-state="selected" so TableRow gets the muted highlight automatically.