Orbit

DataTable

Source

A typed, TanStack-powered table for records, with sortable headers and pagination. Pagination and sorting are manual, so you control fetching and ordering.

Overview

DataTable wraps TanStack React Table. You define typed columns, pass the current page of data, and drive sorting and pagination from state. Wrap a column header in DataTableColumnHeader to get a sortable header button.

Because pagination and sorting are manual, DataTable does not slice or reorder rows for you. Read the sorting and pagination state, then fetch or compute the matching page of data. Provide rowCount so the pagination controls know the total.

Example

An orders table with a sortable Customer and Amount header, status chips and pagination. Sorting and pagination are held in local state.

	Email		Status
Acme AI	ops@acme.ai	$49.00	paid
Nimbus Labs	billing@nimbus.dev	$12.00	pending
Quanta	finance@quanta.io	$99.00	paid
Helix	team@helix.sh	$25.00	refunded
Orbit Tools	hi@orbit.tools	$73.00	paid
Vector	pay@vector.ai	$18.00	pending
Drift	accounts@drift.app	$64.00	paid
Pulse	billing@pulse.co	$31.00	refunded

Rows per page

Viewing all 8 records

Columns

Columns are TanStack ColumnDef objects. Use cell to render Orbit primitives such as Text or Status, and DataTableColumnHeader for sortable headers. Set enableSorting to false to opt a column out.

See the rendered table above.

const columns: DataTableColumnDef<Order>[] = [
  {
    accessorKey: 'customer',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Customer" />
    ),
    cell: ({ row }) => <Text>{row.original.customer}</Text>,
  },
  {
    accessorKey: 'email',
    enableSorting: false,
    header: 'Email',
    cell: ({ row }) => <Text color="default">{row.original.email}</Text>,
  },
  {
    accessorKey: 'amount',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Amount" />
    ),
    cell: ({ row }) => <Text variant="mono">{format(row.original.amount)}</Text>,
  },
]

Sorting and pagination

Hold sorting and pagination in state and pass the setters straight to the table. The table reports changes; you apply them to your data.

See the rendered table above.

const [pagination, setPagination] = useState<DataTablePaginationState>({
  pageIndex: 0,
  pageSize: 20,
})
const [sorting, setSorting] = useState<DataTableSortingState>([])

<DataTable
  columns={columns}
  data={page}
  rowCount={orders.length}
  isLoading={false}
  pagination={pagination}
  onPaginationChange={setPagination}
  sorting={sorting}
  onSortingChange={setSorting}
/>