Data Table

Filter, sort, select, and paginate tabular data.

AspynTanStack-backed column filters, toolbar, and faceted + date filtering.

Installation

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.

Customer	Email	Status
Ada Lovelace	ada@aspyn.io	paid	$1,200.00
Alan Turing	alan@aspyn.io	pending	$640.00
Grace Hopper	grace@aspyn.io	paid	$2,300.00
Katherine Johnson	kj@aspyn.io	failed	$89.00

0 of 7 row(s) selected.

Page 1 of 2

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.


Ada Lovelace	paid	$1,200.00	Jan 12, 2026
Alan Turing	pending	$640.00	Feb 3, 2026
Grace Hopper	paid	$2,300.00	Mar 19, 2026
Katherine Johnson	failed	$89.00	Apr 27, 2026
Edsger Dijkstra	paid	$410.00	May 8, 2026
Barbara Liskov	pending	$1,750.00	Jun 14, 2026
Donald Knuth	paid	$980.00	Jul 30, 2026

7 of 7 row(s).

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.