Data Table

A table with sortable columns, row selection, and pagination, built on Table in plain React state.


INV-1042	Paid	Acme Inc.billing@acme.com	$1,200.00
INV-1043	Overdue	Globexap@globex.com	$860.00
INV-1044	Pending	Initechfinance@initech.com	$2,450.00
INV-1045	Paid	Umbrellapay@umbrella.co	$640.50
INV-1046	Draft	Hooliinvoices@hooli.xyz	$3,100.00

0 of 10 selectedPage 1 of 2

When to use

Use when: Rows people need to sort, select, and page through, such as invoices or users.
Avoid when: The data is short and read-only; use Table.

Installation

bunx shelf add data-table

The source lands in src/components/ui/data-table.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import { DataTable } from "@/components/ui/data-table";

<DataTable
  label="Invoices"
  columns={[
    { id: "customer", header: "Customer", cell: (row) => row.customer, sortValue: (row) => row.customer },
    { id: "amount", header: "Amount", cell: (row) => format(row.amount), sortValue: (row) => row.amount, align: "end" },
  ]}
  data={invoices}
  getRowId={(row) => row.id}
  selectable
/>

Built on

Packages: @stylexjs/stylex
Shelf items: Button, Checkbox, Dropdown Menu, foundations, Icons, Table, utils
Figma: In progress. See Designers and Figma.