Data Table

Full FeaturedCopy Anchor Link

Search, status and plan filters with counts, a column menu and page sizes. Select rows to export them as CSV or email them. Shift-click a header to sort by more than one column.

SortableCopy Anchor Link

Select a column header to sort by it, and again to reverse the order. On narrow screens, where the headers are hidden, use the sort menu instead.

Inline BarsCopy Anchor Link

Revenue by product, with a bar scaled to the top product and each product's share of the total.

TrendsCopy Anchor Link

Campaign conversions and cost per conversion with their change, plus a 14-day sparkline.

StatusCopy Anchor Link

Services with their status, latency and error rate. Sorted by status, worst first.

PaginationCopy Anchor Link

Recent orders, five to a page.

UsageCopy Anchor Link

useDataTable creates a TanStack Table instance with sorting, filtering, search, pagination, row selection and column visibility. It takes every TanStack Table option. DataTableContent renders it, laying out each cell from its column's meta.

const columnHelper = createDataTableColumnHelper<Order>()

const columns = columnHelper.columns([
  createDataTableSelectColumn<Order>({ getRowLabel: (row) => row.customer }),
  columnHelper.accessor('customer', { header: 'Customer', meta: { primary: true } }),
  columnHelper.accessor('status', { header: 'Status' }),
  columnHelper.accessor('amount', {
    cell: ({ getValue }) => `$${getValue().toFixed(2)}`,
    header: 'Amount',
    meta: { align: 'end' },
  }),
])

function Orders({ orders }: { orders: Order[] }) {
  const table = useDataTable({ columns, data: orders, pageSize: 10 })

  return (
    <Card className='@container/data-table gap-0 pb-0'>
      <div className='flex flex-wrap items-center gap-2 px-6 pb-3'>
        <DataTableSearch table={table} />
        <DataTableFacetFilter column={table.getColumn('status')} />
        <DataTableReset table={table} />
        <DataTableViewOptions className='ml-auto' table={table} />
      </div>
      <DataTableContent caption='Orders' table={table} />
      <DataTablePagination className='border-t px-6 py-3' table={table} />
    </Card>
  )
}

createDataTableSelectColumn adds a checkbox to each row. Its getRowLabel names each checkbox after the row ("Select Northwind"), so a screen reader can tell the rows apart; without it, or for an empty label, the checkbox reads "Select row".

Keep data and columns stable between renders, at module scope or in useMemo. Without pageSize, or pagination in initialState or state, the table shows every row. For server-side data, pass manualSorting, manualFiltering and manualPagination with rowCount, and control the state with state and its on[State]Change callbacks.

Column metaCopy Anchor Link

The layout primitives, DataTable, DataTableRow, DataTableCell and friends, still render static tables without TanStack Table, as in the Inline Bars and Trends examples.