Data Table Parts

Install

pnpm dlx shadcn@latest add @vegastack/data-table-parts

Usage

import {
  SelectAllHead,
  SelectionCell,
  SortableHead,
  columnCellClass,
  cycleSort,
  useRowSelection,
} from "@/components/ui/data-table-parts";
import {
  Table,
  TableBody,
  TableCell,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const { selected, allSelected, indeterminate, toggleAll, toggleRow } =
  useRowSelection({
    rowIds: rows.map((row) => row.id),
  });

<Table scrollLabel="Releases">
  <TableHeader>
    <TableRow>
      <SelectAllHead
        checked={allSelected}
        indeterminate={indeterminate}
        onToggle={toggleAll}
      />
      <SortableHead
        column={{ key: "name", header: "Release", sortable: true }}
        onSort={sortByName}
      />
    </TableRow>
  </TableHeader>
  <TableBody>
    {rows.map((row, index) => (
      <TableRow key={row.id}>
        <SelectionCell
          checked={selected.has(row.id)}
          onToggle={() => toggleRow(row.id)}
          label={`Select row ${index + 1}`}
        />
        <TableCell>{row.name}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>;

Scope

These are parts, not a table. They render chrome and compute set arithmetic; nothing here owns data, fetching, filtering or paging. Pick the renderer first — DataList for the presentational default, DataGrid when grouping, inline editing, multi-key sort, column management or 10k+ rows earn its engines — and reach for these directly only when you are building a table neither one fits.

The doctrinal split between the two renderers is unchanged: DataList stays presentational, DataGrid keeps its engines. What they share is chrome and set maths, which is what lives here.

Anatomy

Examples

Sorting, selection and the column rules composed onto a plain Table:

Loading and empty

Column rules

columnCellClass resolves three facts at once, so header, body and skeleton cells cannot disagree:

• align — start (default), center, end.
• mono — the mono numeral face (font-mono text-code tabular-nums), so figures line up.
• nowrap — whether the cell stays on one line. Cells wrap by default; align="end" and mono columns opt in automatically, and an explicit nowrap overrides the inference in both directions.

API Reference

Accessibility

• SortableHead emits aria-sort on every sortable column, "none" included — a table that marks only the active column tells a screen-reader user which column is sorted but never which ones they could sort.
• SortHeaderButton is a real Button, so it is reachable, activatable and focus-visible without a single hand-rolled rule.
• SelectAllHead is tri-state: partial selection reports indeterminate rather than a misleading checked or unchecked box.
• Every selection checkbox needs a name that identifies its ROW (Select row 3, Select Acme), not the column.
• SkeletonRows is aria-hidden; announce loading once from the table's own busy/live wiring instead of announcing every placeholder.

Do / Don't