DataTable is a TanStack table with a compact data anatomy: shared headers that preserve label casing, hairline rows, synced column and row hover, a tinted wash for selected rows, and declarative column alignment, width and pinning.
It adds search with a live count, single or multi-column sorting, selection with bulk actions, expandable rows, row action menus, pinned rows, grouped bands, a totals footer, sticky headers, automatic virtualization, pagination or load-more, CSV export, and loading, refreshing, empty and error states. Sorting, selection, expansion and pinning work controlled or uncontrolled.
Installation
pnpm add github:ahmadassaf/design-system
Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.
import { DataTable } from '@gaudi/design-system/core/DataTable';
Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/data-grid-column-controls.json.
DataTable renders a real table: a visually hidden caption, scoped column headers with aria-sort, named selection checkboxes, and a labelled, keyboard-focusable scroll region that pans with the arrow keys. Expand, row-action and group toggles are named buttons with aria-expanded; clickable rows take focus and activate with Enter or Space. The row menu also opens with a right-click, Shift+F10 or the Menu key and returns focus to where it was. Virtualized tables keep aria-rowcount and aria-rowindex so assistive technology knows the full size, and export, load-more and pinning changes are announced through a status region.
