Shadcn Data Table

There is no DataTable in components/ui. You wire TanStack Table to the Table primitives: a features object, column defs, then useTable. Use it for payments, users, or any admin list that needs sort, filter, pagination, or row selection.

Usage

import {
  flexRender,
  tableFeatures,
  useTable,
} from "@tanstack/react-table"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

const table = useTable({ features, data, columns })

return (
  <Table>
    <TableHeader>
      {table.getHeaderGroups().map((headerGroup) => (
        <TableRow key={headerGroup.id}>
          {headerGroup.headers.map((header) => (
            <TableHead key={header.id}>
              {flexRender(header.column.columnDef.header, header.getContext())}
            </TableHead>
          ))}
        </TableRow>
      ))}
    </TableHeader>
    <TableBody>
      {table.getRowModel().rows.map((row) => (
        <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
          {row.getVisibleCells().map((cell) => (
            <TableCell key={cell.id}>
              {flexRender(cell.column.columnDef.cell, cell.getContext())}
            </TableCell>
          ))}
        </TableRow>
      ))}
    </TableBody>
  </Table>
)

features is the opt-in list. Sorting does nothing until rowSortingFeature and createSortedRowModel() are on it.

Composition

There is no DataTable export. useTable owns the instance; Table is the markup.

Basic Table

Status, email, amount. No sort, no filter — just useTable over the rows.

Pagination

rowPaginationFeature and createPaginatedRowModel(). Previous / next call table.previousPage() and table.nextPage().

Sorting

Put a Button in the header and call column.toggleSorting. Wire sorting into state.

Filtering

table.getColumn("email")?.setFilterValue on an Input. The column must have an accessorKey.

Visibility

column.toggleVisibility from a Dropdown Menu. Hide a column on first render with columnVisibility.

Row Selection

A Checkbox column. Header uses toggleAllPageRowsSelected. data-state="selected" paints the row.

RTL

Wrap with DirectionProvider and dir="rtl". Amounts use text-end so they stay on the reading end.

API

These are useTable options from TanStack Table. There is no DataTable export.

ColumnDef

flexRender draws header and cell. Empty body is one TableRow with a colSpan cell.

Notes

There is no components/ui/data-table.tsx. Keep columns next to the page that fetches the rows.

With other components

Questions

Related