Display

DataTable

A generic, fully-featured data table — search, range, time, sort, paginate, reorder, resize, hide, import, export.

A single typed component that wires together search, a multi-month date-range modal, an analog or digital time picker, column reorder via drag, edge-drag resize, hide / restore through a Columns menu, text-only pagination with page numbers, per-zone fonts for headers, row-headers and cells, and one-click CSV / JSON export and import. Built on standalone primitives — Table, TableSearch, DateRangePicker, TimePicker, Pagination — that ship alongside it for use independently.

OrderCustomerStatusTotal

INV-4201Aarav Okaforpaid$148.32

INV-4202Mira Lindqvistpending$92.05

INV-4203Theo Reyespaid$310.40

INV-4204Yuna Tanakarefunded$58.00

Everything, on

Search, a two-month range picker, an analog clock with a 60-minute tolerance, sort by clicking a header, drag headers to reorder, drag their right edge to resize, open Columns to hide one, and export the current view as CSV or JSON — all wired through a single component on 60 rows of synthetic order data.

Drag any header to reorderDrag the right edge of a header to resizeClick a header to sort

Order	Customer	Status	Channel	Placed	Time	Total
INV-4200	Lior Costalior.costa@example.com	refunded	API	3/20/2026	04:10 PM	$505.26
INV-4201	Uma Hassanuma.hassan@example.com	paid	API	5/13/2026	09:44 PM	$296.65
INV-4202	Niko Bergniko.berg@example.com	pending	Web	6/4/2026	11:50 AM	$53.65
INV-4203	Hugo Lindqvisthugo.lindqvist@example.com	paid	In-store	5/19/2026	06:31 PM	$30.77
INV-4204	Gita Yamadagita.yamada@example.com	pending	API	5/7/2026	10:02 AM	$53.82
INV-4205	Zara Singhzara.singh@example.com	pending	Web	5/17/2026	07:44 AM	$820.78
INV-4206	Asha Dialloasha.diallo@example.com	failed	Web	5/29/2026	03:40 PM	$663.43
INV-4207	Xen Costaxen.costa@example.com	refunded	Mobile	3/12/2026	03:06 AM	$20.05
INV-4208	Lior Beckerlior.becker@example.com	pending	Web	5/29/2026	05:56 PM	$269.34
INV-4209	Idris Yamadaidris.yamada@example.com	refunded	API	5/25/2026	11:33 PM	$875.31
INV-4210	Bram Bergbram.berg@example.com	failed	API	5/6/2026	05:17 PM	$432.27
INV-4211	Yael Beckeryael.becker@example.com	pending	Mobile	4/27/2026	01:17 PM	$100.83

Installation

DataTable composes six primitives that all ship from one package. Import only what you need.

pnpm add @roy-ui/ui

Import

import {
  DataTable,
  // standalone primitives
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
  TableSearch,
  Pagination,
  DateRangePicker,
  TimePicker,
} from '@roy-ui/ui';

The minimum

Bare bones — four columns, default scroll depth (7 rows), pagination off. Every feature is opt-in.

Just data + columns

No toolbar, no filter, no menu. The Table still scrolls vertically once you exceed visibleRows.

Order	Customer	Status	Total
INV-4200	Aarav Lindqvist	refunded	$390.25
INV-4201	Juno Khoury	paid	$497.48
INV-4202	Asha Park	paid	$838.89
INV-4203	Kofi Petrov	pending	$872.29
INV-4204	Niko Olsen	paid	$42.98
INV-4205	Esme Okafor	refunded	$410.38
INV-4206	Orla Vargas	failed	$131.63
INV-4207	Otto Singh	pending	$880.30
INV-4208	Maya Nazaria	failed	$851.51
INV-4209	Lior Olsen	pending	$10.41

tsx

<DataTable
  data={orders}
  columns={[
    { key: 'id', header: 'Order', accessor: (r) => r.id, isRowHeader: true },
    { key: 'customer', header: 'Customer', accessor: (r) => r.customer },
    { key: 'status', header: 'Status', accessor: (r) => r.status },
    { key: 'total', header: 'Total', accessor: (r) => r.total, type: 'number' },
  ]}
  pagination={false}
/>

Add search

One prop enables a debounced search input that matches across every column's stringified accessor.

Search across all columns

Pass a search.predicate to take over matching — e.g. fuzzy or weighted scoring.

Order	Customer	Status	Total
INV-4200	Aarav Lindqvist	refunded	$390.25
INV-4201	Juno Khoury	paid	$497.48
INV-4202	Asha Park	paid	$838.89
INV-4203	Kofi Petrov	pending	$872.29
INV-4204	Niko Olsen	paid	$42.98
INV-4205	Esme Okafor	refunded	$410.38
INV-4206	Orla Vargas	failed	$131.63
INV-4207	Otto Singh	pending	$880.30
INV-4208	Maya Nazaria	failed	$851.51
INV-4209	Lior Olsen	pending	$10.41

tsx

<DataTable
  data={orders}
  columns={columns}
  search={{ enabled: true, placeholder: 'Search orders' }}
/>

Pagination

Text Prev / Next + numbered pages. No arrow icons — direction is conveyed through layout and motion.

Page size 5

Pass pagination={{ pageSize }} to slice rows. Summary in the corner is on by default.

Order	Customer	Status	Total
INV-4200	Idris Park	paid	$516.12
INV-4201	Lior Costa	pending	$641.70
INV-4202	Lila Petrov	pending	$126.11
INV-4203	Esme Asante	refunded	$596.95
INV-4204	Pia Olsen	pending	$334.85

tsx

<DataTable
  data={orders}
  columns={columns}
  pagination={{ pageSize: 5 }}
/>

Standalone pagination

Pagination is its own primitive — wire it to any list you already have.

tsx

<Pagination page={page} pageCount={12} onPageChange={setPage} />

Range + time filters

A 2-month modal range picker and a clock (analog wristwatch or digital segments) that both bind to a column.

Both filters wired to one column

The time filter matches a range — pick a Start and End on the clock. Start later than End wraps past midnight.

Order	Customer	Status	Total	Placed	Time
INV-4200	Orla Romero	pending	$567.56	5/16/2026	02:05 PM
INV-4201	Vela Chen	refunded	$18.13	3/26/2026	05:39 PM
INV-4202	Vela Petrov	failed	$23.07	3/29/2026	05:15 PM
INV-4203	Hugo Reyes	failed	$81.90	4/23/2026	11:14 PM
INV-4204	Esme Olsen	pending	$830.76	5/11/2026	09:13 AM
INV-4205	Idris Yamada	refunded	$553.74	4/7/2026	03:38 AM
INV-4206	Lior Okafor	paid	$835.87	3/13/2026	08:21 AM
INV-4207	Tomi Petrov	refunded	$725.58	3/7/2026	12:21 AM

tsx

<DataTable
  data={orders}
  columns={columns}
  dateFilter={{ column: 'placedAt', monthsVisible: 2 }}
  timeFilter={{ column: 'placedAt', variant: 'analog' }}
/>

Standalone DateRangePicker

Two-month modal with preset sidebar. Hover preview a range, click twice to commit.

tsx

<DateRangePicker monthsVisible={2} onChange={setRange} />

Standalone TimePicker — both variants

The variant prop sets the initial mode. switchable lets the user flip between analog and digital.

tsx

<TimePicker variant="analog" onChange={setTime} />
<TimePicker variant="digital" hourCycle={12} onChange={setTime} />

Standalone TimeRangePicker

Pick a Start and End on one clock. Switching analog ↔ digital cross-fades and morphs the panel height. A Start later than the End wraps past midnight.

tsx

<TimeRangePicker onChange={setRange} />
<TimeRangePicker hourCycle={12} variant="digital" onChange={setRange} />

Reorder, resize, hide

Headers are draggable. Right edge of each header is a resize handle (double-click resets). The Columns menu hides any column with one click — the hidden chip puts it back.

Try it

Drag a header to reorder. Drag the right edge to resize. Open Columns to hide one — a chip appears showing how many are hidden.

Order	Customer	Status	Total	Channel
INV-4200	Otto Asante	refunded	$659.42	In-store
INV-4201	Kofi Singh	refunded	$895.93	API
INV-4202	Maya Halim	failed	$437.56	Web
INV-4203	Niko Halim	refunded	$505.04	Web
INV-4204	Tomi Vargas	pending	$299.22	Mobile
INV-4205	Juno Nazaria	pending	$314.06	In-store
INV-4206	Kian Berg	failed	$175.76	API
INV-4207	Maya Lima	pending	$25.36	Web
INV-4208	Niko Singh	paid	$759.80	API
INV-4209	Xen Reyes	failed	$333.64	Mobile
INV-4210	Orla Asante	pending	$309.17	Mobile
INV-4211	Gita Mendez	failed	$901.22	Web
INV-4212	Otto Berg	pending	$854.56	Web
INV-4213	Frey Reyes	refunded	$187.07	In-store

tsx

<DataTable
  data={orders}
  columns={columns}
  // all three are on by default; turn off with:
  // reorderable={false}
  // resizable={false}
  // columnMenu={false}
/>

Render every column without horizontal scroll

Pass fitColumns to make every column share the container width. Default widths and resized widths are ignored; cells wrap onto multiple lines instead of clipping. Drop it whenever you'd rather see all columns at once than scroll sideways.

fitColumns — no X scrollbar, ever

The same seven columns the hero table uses, but constrained to the parent container with fitColumns. Try shrinking your browser window — content wraps; horizontal scroll never appears.

Order	Customer	Status	Total	Channel	Placed	Time
INV-4200	Niko Mendez	refunded	$727.78	API	4/18/2026	03:05 AM
INV-4201	Hugo Vargas	pending	$193.62	API	3/25/2026	07:14 AM
INV-4202	Asha Hassan	pending	$583.19	Mobile	4/3/2026	04:33 PM
INV-4203	Theo Lindqvist	pending	$608.21	Web	3/18/2026	07:25 AM
INV-4204	Zara Yamada	pending	$108.85	Web	5/26/2026	10:19 PM
INV-4205	Dax Khoury	failed	$776.20	Mobile	5/28/2026	06:14 PM

tsx

<DataTable
  data={orders}
  columns={columns}
  fitColumns
  pagination={{ pageSize: 6 }}
/>

Off (default) — wide widths overflow into a scrollbar

Same columns, same widths, no fitColumns. The X scrollbar appears when the sum of defaultWidth exceeds the container — useful for dense, wide datasets where users would rather scroll than read wrapped cells.

Order	Customer	Status	Total	Channel	Placed	Time
INV-4200	Theo Lindqvist	pending	$208.56	In-store	4/9/2026	07:19 AM
INV-4201	Tomi Okafor	failed	$941.19	Mobile	4/2/2026	05:05 AM
INV-4202	Pia Lindqvist	failed	$207.34	Web	4/25/2026	03:59 PM
INV-4203	Otto Romero	failed	$488.24	In-store	5/21/2026	05:22 PM
INV-4204	Vela Becker	refunded	$211.37	API	4/7/2026	07:42 PM
INV-4205	Vela Nazaria	paid	$866.87	Mobile	3/24/2026	03:19 PM

tsx

<DataTable
  data={orders}
  columns={columns}
  // no fitColumns prop — defaultWidth respected, X scroll allowed
/>

Export & import

One prop adds CSV + JSON export buttons. Another exposes a file picker that hands parsed rows to onImport — the parent controls data, so importing is a state update.

Round trip

Export the current view, edit it, import it back. Try clicking Export → JSON, then Import the file.

Order	Customer	Status	Total	Channel
INV-4200	Kian Halim	paid	$11.44	Mobile
INV-4201	Juno Asante	pending	$163.08	Mobile
INV-4202	Kian Berg	refunded	$628.02	Web
INV-4203	Pia Ito	refunded	$63.31	In-store
INV-4204	Cleo Khoury	paid	$671.83	API
INV-4205	Theo Mendez	failed	$254.10	Web

tsx

<DataTable
  data={orders}
  columns={columns}
  dataIO={{
    export: { enabled: true, filename: 'orders' },
    import: {
      enabled: true,
      onImport: (rows) => setOrders(rows),
    },
  }}
/>

Per-zone typography

Three fonts: column headers, row headers (the row-identifier cells), and data cells. Pass a string for family, or an object for size / weight / tracking / feature settings.

Mono row headers + grotesque headers

The Order column is declared with isRowHeader, so it picks up the rowHeaderFont — an Apple system mono with tabular numerals. Header zone gets a tighter editorial grotesque.

Order	Customer	Status	Total
INV-4200	Esme Costa	failed	$852.39
INV-4201	Frey Romero	paid	$328.08
INV-4202	Otto Lima	pending	$224.44
INV-4203	Yuna Vargas	paid	$564.64
INV-4204	Dax Diallo	pending	$885.92
INV-4205	Bram Asante	refunded	$126.38
INV-4206	Yuna Khoury	pending	$208.76
INV-4207	Mira Okafor	refunded	$719.27

tsx

<DataTable
  headerFont={{ size: 11, weight: 600, letterSpacing: '0.08em' }}
  rowHeaderFont={{
    family: 'ui-monospace, Menlo, Consolas, monospace',
    size: 12.5,
    featureSettings: '"tnum"',
  }}
  cellFont={{ size: 13.5 }}
  ...
/>

The primitives, alone

DataTable is a convenience. Every part stands on its own — wire them into whatever layout you have.

Compose the table by hand

Table + TableHeader + TableBody + TableRow + TableHead / TableCell render the same way DataTable does, just without the toolbar.

Order	Customer	Total
INV-4200	Juno Khoury	$782.98
INV-4201	Suri Olsen	$783.42
INV-4202	Kian Tanaka	$224.35
INV-4203	Juno Berg	$653.42
INV-4204	Cleo Becker	$128.10

tsx

<Table visibleRows={5}>
  <TableHeader>
    <TableRow>
      <TableHead>Order</TableHead>
      <TableHead>Customer</TableHead>
      <TableHead align="right">Total</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {rows.map(r => (
      <TableRow key={r.id}>
        <TableCell isRowHeader>{r.id}</TableCell>
        <TableCell>{r.customer}</TableCell>
        <TableCell align="right">{r.total}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

Props

DataTable, plus a quick reference for the standalone primitives.

DataTable

Prop	Type	Default	Description
`data`	`T[]`	`—`	The full dataset. The table is fully controlled — filtering and pagination derive from this.
`columns`	`Column<T>[]`	`—`	Column definitions. Order in the array is the initial display order.
`getRowId`	`(row, i) => string \| number`	`row.id \|\| i`	Stable React key per row.
`visibleRows`	`number`	`7`	How many rows fit before the body starts scrolling.
`rowHeight`	`number`	`44`	Approximate row height used to compute the scroll cap.
`stickyHeader`	`boolean`	`true`	Pins the header during vertical scroll.
`density`	`'compact' \| 'cozy' \| 'comfortable'`	`'cozy'`	Row padding scale.
`loading`	`boolean`	`false`	Dims the body and overlays an inline spinner.
`empty`	`ReactNode`	`"No results"`	Replaces the row area when zero rows are visible.
`search`	`{ enabled, placeholder?, debounceMs?, predicate? }`	`—`	Enables the toolbar search input. Without it the toolbar slot is hidden.
`dateFilter`	`{ column, monthsVisible?, placeholder? }`	`—`	Bind a DateRangePicker to one column (date or time-of-day accessor).
`timeFilter`	`{ column, variant?, hourCycle?, minuteStep?, placeholder? }`	`—`	Bind a TimeRangePicker to one column. Matches rows whose time-of-day falls in the Start–End window.
`pagination`	`{ pageSize?, siblingCount?, showSummary? } \| false`	`{ pageSize: 25 }`	Set to false to disable pagination and render every filtered row.
`reorderable`	`boolean`	`true`	Drag a header to reorder columns. Pinned columns are skipped.
`resizable`	`boolean`	`true`	Drag the right edge of a header to resize. Double-click resets.
`columnMenu`	`boolean`	`true`	Show the Columns popover with per-column toggle + Reset + hidden-count chip.
`fitColumns`	`boolean`	`false`	Force every column to share the container width. Ignores defaultWidth and resized widths, suppresses horizontal scroll, and wraps cell content onto multiple lines.
`dataIO`	`{ export?, import? }`	`—`	Wire Export (CSV / JSON) and Import (file picker) buttons into the toolbar.
`headerFont`	`string \| FontSpec`	`system`	Font for the column-header zone. Pass family, or an object with size / weight / tracking / featureSettings.
`rowHeaderFont`	`string \| FontSpec`	`system`	Font for cells declared with isRowHeader.
`cellFont`	`string \| FontSpec`	`system`	Font for data cells. Per-column font overrides this.
`storageKey`	`string`	`—`	Persist column order, sizes, and hidden state in localStorage under this key.

Column<T>

Prop	Type	Default	Description
`key`	`string`	`—`	Stable identifier. Used in layout state and as React key.
`header`	`string`	`—`	Visible column-header label.
`accessor`	`(row: T) => unknown`	`—`	Pulls the raw value used for search, filter, sort, export.
`type`	`'text' \| 'number' \| 'date' \| 'time'`	`'text'`	Drives default alignment, numeric formatting, and date/time filter binding.
`cell`	`(value, row) => ReactNode`	`—`	Custom renderer. Defaults to the accessor stringified by type.
`align`	`'left' \| 'right' \| 'center'`	`type==='number' ? 'right' : 'left'`	Cell + header alignment.
`isRowHeader`	`boolean`	`false`	Renders cells in this column as <th scope="row"> and applies rowHeaderFont.
`defaultWidth`	`number`	`—`	Initial width in px. Flex when omitted.
`minWidth / maxWidth`	`number`	`80 / 2000`	Resize clamps.
`resizable / reorderable / hideable`	`boolean`	`true`	Per-column toggles for the layout features.
`defaultHidden`	`boolean`	`false`	Start hidden — appears in the Columns menu so it can be enabled.
`pinned`	`'left' \| 'right'`	`—`	Locks the column to one side and excludes it from reorder.
`font`	`FontSpec`	`—`	Overrides cellFont for this column only.
`sortBy`	`(row: T) => string \| number \| Date`	`accessor`	Override the value the sort comparator uses.

Pagination

Prop	Type	Default	Description
`page`	`number`	`—`	1-indexed current page.
`pageCount`	`number`	`—`	Total page count.
`onPageChange`	`(page) => void`	`—`	Page change callback.
`siblingCount`	`number`	`1`	How many pages to show on either side of the current.
`showPrevNext`	`boolean`	`true`	Toggle the Prev / Next text buttons.
`showSummary`	`boolean`	`false`	Render a "Page X of Y" summary on the left.

DateRangePicker

Prop	Type	Default	Description
`value / onChange`	`DateRange / (range) => void`	`—`	Controlled range. defaultValue + uncontrolled also supported.
`monthsVisible`	`number`	`2`	Number of months rendered side by side in the popover.
`weekStartsOn`	`0..6`	`0`	Sunday = 0.
`minDate / maxDate`	`Date`	`—`	Disable days outside the bounds.
`presets`	`DatePreset[]`	`Today / 7d / 30d / This month / Last month`	Sidebar quick-select. Pass [] to remove the sidebar.

TimePicker

Prop	Type	Default	Description
`value / onChange`	`TimeValue / (next) => void`	`—`	Controlled time. TimeValue = { hours, minutes } in 24h.
`variant`	`'analog' \| 'digital'`	`'analog'`	Initial picker style.
`switchable`	`boolean`	`true`	Lets the user switch between analog and digital from the panel.
`hourCycle`	`12 \| 24`	`24`	Digital picker shows an AM/PM pill when 12.
`minuteStep`	`number`	`1`	Minute snap.

Display

DataTable

A generic, fully-featured data table — search, range, time, sort, paginate, reorder, resize, hide, import, export.

OrderCustomerStatusTotal

INV-4201Aarav Okaforpaid$148.32

INV-4202Mira Lindqvistpending$92.05

INV-4203Theo Reyespaid$310.40

INV-4204Yuna Tanakarefunded$58.00

Everything, on

Drag any header to reorderDrag the right edge of a header to resizeClick a header to sort

Order	Customer	Status	Channel	Placed	Time	Total
INV-4200	Lior Costalior.costa@example.com	refunded	API	3/20/2026	04:10 PM	$505.26
INV-4201	Uma Hassanuma.hassan@example.com	paid	API	5/13/2026	09:44 PM	$296.65
INV-4202	Niko Bergniko.berg@example.com	pending	Web	6/4/2026	11:50 AM	$53.65
INV-4203	Hugo Lindqvisthugo.lindqvist@example.com	paid	In-store	5/19/2026	06:31 PM	$30.77
INV-4204	Gita Yamadagita.yamada@example.com	pending	API	5/7/2026	10:02 AM	$53.82
INV-4205	Zara Singhzara.singh@example.com	pending	Web	5/17/2026	07:44 AM	$820.78
INV-4206	Asha Dialloasha.diallo@example.com	failed	Web	5/29/2026	03:40 PM	$663.43
INV-4207	Xen Costaxen.costa@example.com	refunded	Mobile	3/12/2026	03:06 AM	$20.05
INV-4208	Lior Beckerlior.becker@example.com	pending	Web	5/29/2026	05:56 PM	$269.34
INV-4209	Idris Yamadaidris.yamada@example.com	refunded	API	5/25/2026	11:33 PM	$875.31
INV-4210	Bram Bergbram.berg@example.com	failed	API	5/6/2026	05:17 PM	$432.27
INV-4211	Yael Beckeryael.becker@example.com	pending	Mobile	4/27/2026	01:17 PM	$100.83

Installation

DataTable composes six primitives that all ship from one package. Import only what you need.

pnpm add @roy-ui/ui

Import

import {
  DataTable,
  // standalone primitives
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
  TableSearch,
  Pagination,
  DateRangePicker,
  TimePicker,
} from '@roy-ui/ui';

The minimum

Bare bones — four columns, default scroll depth (7 rows), pagination off. Every feature is opt-in.

Just data + columns

No toolbar, no filter, no menu. The Table still scrolls vertically once you exceed visibleRows.

Order	Customer	Status	Total
INV-4200	Aarav Lindqvist	refunded	$390.25
INV-4201	Juno Khoury	paid	$497.48
INV-4202	Asha Park	paid	$838.89
INV-4203	Kofi Petrov	pending	$872.29
INV-4204	Niko Olsen	paid	$42.98
INV-4205	Esme Okafor	refunded	$410.38
INV-4206	Orla Vargas	failed	$131.63
INV-4207	Otto Singh	pending	$880.30
INV-4208	Maya Nazaria	failed	$851.51
INV-4209	Lior Olsen	pending	$10.41

tsx

<DataTable
  data={orders}
  columns={[
    { key: 'id', header: 'Order', accessor: (r) => r.id, isRowHeader: true },
    { key: 'customer', header: 'Customer', accessor: (r) => r.customer },
    { key: 'status', header: 'Status', accessor: (r) => r.status },
    { key: 'total', header: 'Total', accessor: (r) => r.total, type: 'number' },
  ]}
  pagination={false}
/>

Add search

One prop enables a debounced search input that matches across every column's stringified accessor.

Search across all columns

Pass a search.predicate to take over matching — e.g. fuzzy or weighted scoring.

Order	Customer	Status	Total
INV-4200	Aarav Lindqvist	refunded	$390.25
INV-4201	Juno Khoury	paid	$497.48
INV-4202	Asha Park	paid	$838.89
INV-4203	Kofi Petrov	pending	$872.29
INV-4204	Niko Olsen	paid	$42.98
INV-4205	Esme Okafor	refunded	$410.38
INV-4206	Orla Vargas	failed	$131.63
INV-4207	Otto Singh	pending	$880.30
INV-4208	Maya Nazaria	failed	$851.51
INV-4209	Lior Olsen	pending	$10.41

tsx

<DataTable
  data={orders}
  columns={columns}
  search={{ enabled: true, placeholder: 'Search orders' }}
/>

Pagination

Text Prev / Next + numbered pages. No arrow icons — direction is conveyed through layout and motion.

Page size 5

Pass pagination={{ pageSize }} to slice rows. Summary in the corner is on by default.

Order	Customer	Status	Total
INV-4200	Idris Park	paid	$516.12
INV-4201	Lior Costa	pending	$641.70
INV-4202	Lila Petrov	pending	$126.11
INV-4203	Esme Asante	refunded	$596.95
INV-4204	Pia Olsen	pending	$334.85

tsx

<DataTable
  data={orders}
  columns={columns}
  pagination={{ pageSize: 5 }}
/>

Standalone pagination

Pagination is its own primitive — wire it to any list you already have.

tsx

<Pagination page={page} pageCount={12} onPageChange={setPage} />

Range + time filters

A 2-month modal range picker and a clock (analog wristwatch or digital segments) that both bind to a column.

Both filters wired to one column

The time filter matches a range — pick a Start and End on the clock. Start later than End wraps past midnight.

Order	Customer	Status	Total	Placed	Time
INV-4200	Orla Romero	pending	$567.56	5/16/2026	02:05 PM
INV-4201	Vela Chen	refunded	$18.13	3/26/2026	05:39 PM
INV-4202	Vela Petrov	failed	$23.07	3/29/2026	05:15 PM
INV-4203	Hugo Reyes	failed	$81.90	4/23/2026	11:14 PM
INV-4204	Esme Olsen	pending	$830.76	5/11/2026	09:13 AM
INV-4205	Idris Yamada	refunded	$553.74	4/7/2026	03:38 AM
INV-4206	Lior Okafor	paid	$835.87	3/13/2026	08:21 AM
INV-4207	Tomi Petrov	refunded	$725.58	3/7/2026	12:21 AM

tsx

<DataTable
  data={orders}
  columns={columns}
  dateFilter={{ column: 'placedAt', monthsVisible: 2 }}
  timeFilter={{ column: 'placedAt', variant: 'analog' }}
/>

Standalone DateRangePicker

Two-month modal with preset sidebar. Hover preview a range, click twice to commit.

tsx

<DateRangePicker monthsVisible={2} onChange={setRange} />

Standalone TimePicker — both variants

The variant prop sets the initial mode. switchable lets the user flip between analog and digital.

tsx

<TimePicker variant="analog" onChange={setTime} />
<TimePicker variant="digital" hourCycle={12} onChange={setTime} />

Standalone TimeRangePicker

Pick a Start and End on one clock. Switching analog ↔ digital cross-fades and morphs the panel height. A Start later than the End wraps past midnight.

tsx

<TimeRangePicker onChange={setRange} />
<TimeRangePicker hourCycle={12} variant="digital" onChange={setRange} />

Reorder, resize, hide

Headers are draggable. Right edge of each header is a resize handle (double-click resets). The Columns menu hides any column with one click — the hidden chip puts it back.

Try it

Drag a header to reorder. Drag the right edge to resize. Open Columns to hide one — a chip appears showing how many are hidden.

Order	Customer	Status	Total	Channel
INV-4200	Otto Asante	refunded	$659.42	In-store
INV-4201	Kofi Singh	refunded	$895.93	API
INV-4202	Maya Halim	failed	$437.56	Web
INV-4203	Niko Halim	refunded	$505.04	Web
INV-4204	Tomi Vargas	pending	$299.22	Mobile
INV-4205	Juno Nazaria	pending	$314.06	In-store
INV-4206	Kian Berg	failed	$175.76	API
INV-4207	Maya Lima	pending	$25.36	Web
INV-4208	Niko Singh	paid	$759.80	API
INV-4209	Xen Reyes	failed	$333.64	Mobile
INV-4210	Orla Asante	pending	$309.17	Mobile
INV-4211	Gita Mendez	failed	$901.22	Web
INV-4212	Otto Berg	pending	$854.56	Web
INV-4213	Frey Reyes	refunded	$187.07	In-store

tsx

<DataTable
  data={orders}
  columns={columns}
  // all three are on by default; turn off with:
  // reorderable={false}
  // resizable={false}
  // columnMenu={false}
/>

Render every column without horizontal scroll

fitColumns — no X scrollbar, ever

The same seven columns the hero table uses, but constrained to the parent container with fitColumns. Try shrinking your browser window — content wraps; horizontal scroll never appears.

Order	Customer	Status	Total	Channel	Placed	Time
INV-4200	Niko Mendez	refunded	$727.78	API	4/18/2026	03:05 AM
INV-4201	Hugo Vargas	pending	$193.62	API	3/25/2026	07:14 AM
INV-4202	Asha Hassan	pending	$583.19	Mobile	4/3/2026	04:33 PM
INV-4203	Theo Lindqvist	pending	$608.21	Web	3/18/2026	07:25 AM
INV-4204	Zara Yamada	pending	$108.85	Web	5/26/2026	10:19 PM
INV-4205	Dax Khoury	failed	$776.20	Mobile	5/28/2026	06:14 PM

tsx

<DataTable
  data={orders}
  columns={columns}
  fitColumns
  pagination={{ pageSize: 6 }}
/>

Off (default) — wide widths overflow into a scrollbar

Order	Customer	Status	Total	Channel	Placed	Time
INV-4200	Theo Lindqvist	pending	$208.56	In-store	4/9/2026	07:19 AM
INV-4201	Tomi Okafor	failed	$941.19	Mobile	4/2/2026	05:05 AM
INV-4202	Pia Lindqvist	failed	$207.34	Web	4/25/2026	03:59 PM
INV-4203	Otto Romero	failed	$488.24	In-store	5/21/2026	05:22 PM
INV-4204	Vela Becker	refunded	$211.37	API	4/7/2026	07:42 PM
INV-4205	Vela Nazaria	paid	$866.87	Mobile	3/24/2026	03:19 PM

tsx

<DataTable
  data={orders}
  columns={columns}
  // no fitColumns prop — defaultWidth respected, X scroll allowed
/>

Export & import

One prop adds CSV + JSON export buttons. Another exposes a file picker that hands parsed rows to onImport — the parent controls data, so importing is a state update.

Round trip

Export the current view, edit it, import it back. Try clicking Export → JSON, then Import the file.

Order	Customer	Status	Total	Channel
INV-4200	Kian Halim	paid	$11.44	Mobile
INV-4201	Juno Asante	pending	$163.08	Mobile
INV-4202	Kian Berg	refunded	$628.02	Web
INV-4203	Pia Ito	refunded	$63.31	In-store
INV-4204	Cleo Khoury	paid	$671.83	API
INV-4205	Theo Mendez	failed	$254.10	Web

tsx

<DataTable
  data={orders}
  columns={columns}
  dataIO={{
    export: { enabled: true, filename: 'orders' },
    import: {
      enabled: true,
      onImport: (rows) => setOrders(rows),
    },
  }}
/>

Per-zone typography

Three fonts: column headers, row headers (the row-identifier cells), and data cells. Pass a string for family, or an object for size / weight / tracking / feature settings.

Mono row headers + grotesque headers

The Order column is declared with isRowHeader, so it picks up the rowHeaderFont — an Apple system mono with tabular numerals. Header zone gets a tighter editorial grotesque.

Order	Customer	Status	Total
INV-4200	Esme Costa	failed	$852.39
INV-4201	Frey Romero	paid	$328.08
INV-4202	Otto Lima	pending	$224.44
INV-4203	Yuna Vargas	paid	$564.64
INV-4204	Dax Diallo	pending	$885.92
INV-4205	Bram Asante	refunded	$126.38
INV-4206	Yuna Khoury	pending	$208.76
INV-4207	Mira Okafor	refunded	$719.27

tsx

<DataTable
  headerFont={{ size: 11, weight: 600, letterSpacing: '0.08em' }}
  rowHeaderFont={{
    family: 'ui-monospace, Menlo, Consolas, monospace',
    size: 12.5,
    featureSettings: '"tnum"',
  }}
  cellFont={{ size: 13.5 }}
  ...
/>

The primitives, alone

DataTable is a convenience. Every part stands on its own — wire them into whatever layout you have.

Compose the table by hand

Table + TableHeader + TableBody + TableRow + TableHead / TableCell render the same way DataTable does, just without the toolbar.

Order	Customer	Total
INV-4200	Juno Khoury	$782.98
INV-4201	Suri Olsen	$783.42
INV-4202	Kian Tanaka	$224.35
INV-4203	Juno Berg	$653.42
INV-4204	Cleo Becker	$128.10

tsx

<Table visibleRows={5}>
  <TableHeader>
    <TableRow>
      <TableHead>Order</TableHead>
      <TableHead>Customer</TableHead>
      <TableHead align="right">Total</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {rows.map(r => (
      <TableRow key={r.id}>
        <TableCell isRowHeader>{r.id}</TableCell>
        <TableCell>{r.customer}</TableCell>
        <TableCell align="right">{r.total}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

Props

DataTable, plus a quick reference for the standalone primitives.

DataTable

Prop	Type	Default	Description
`data`	`T[]`	`—`	The full dataset. The table is fully controlled — filtering and pagination derive from this.
`columns`	`Column<T>[]`	`—`	Column definitions. Order in the array is the initial display order.
`getRowId`	`(row, i) => string \| number`	`row.id \|\| i`	Stable React key per row.
`visibleRows`	`number`	`7`	How many rows fit before the body starts scrolling.
`rowHeight`	`number`	`44`	Approximate row height used to compute the scroll cap.
`stickyHeader`	`boolean`	`true`	Pins the header during vertical scroll.
`density`	`'compact' \| 'cozy' \| 'comfortable'`	`'cozy'`	Row padding scale.
`loading`	`boolean`	`false`	Dims the body and overlays an inline spinner.
`empty`	`ReactNode`	`"No results"`	Replaces the row area when zero rows are visible.
`search`	`{ enabled, placeholder?, debounceMs?, predicate? }`	`—`	Enables the toolbar search input. Without it the toolbar slot is hidden.
`dateFilter`	`{ column, monthsVisible?, placeholder? }`	`—`	Bind a DateRangePicker to one column (date or time-of-day accessor).
`timeFilter`	`{ column, variant?, hourCycle?, minuteStep?, placeholder? }`	`—`	Bind a TimeRangePicker to one column. Matches rows whose time-of-day falls in the Start–End window.
`pagination`	`{ pageSize?, siblingCount?, showSummary? } \| false`	`{ pageSize: 25 }`	Set to false to disable pagination and render every filtered row.
`reorderable`	`boolean`	`true`	Drag a header to reorder columns. Pinned columns are skipped.
`resizable`	`boolean`	`true`	Drag the right edge of a header to resize. Double-click resets.
`columnMenu`	`boolean`	`true`	Show the Columns popover with per-column toggle + Reset + hidden-count chip.
`fitColumns`	`boolean`	`false`	Force every column to share the container width. Ignores defaultWidth and resized widths, suppresses horizontal scroll, and wraps cell content onto multiple lines.
`dataIO`	`{ export?, import? }`	`—`	Wire Export (CSV / JSON) and Import (file picker) buttons into the toolbar.
`headerFont`	`string \| FontSpec`	`system`	Font for the column-header zone. Pass family, or an object with size / weight / tracking / featureSettings.
`rowHeaderFont`	`string \| FontSpec`	`system`	Font for cells declared with isRowHeader.
`cellFont`	`string \| FontSpec`	`system`	Font for data cells. Per-column font overrides this.
`storageKey`	`string`	`—`	Persist column order, sizes, and hidden state in localStorage under this key.

Column<T>

Prop	Type	Default	Description
`key`	`string`	`—`	Stable identifier. Used in layout state and as React key.
`header`	`string`	`—`	Visible column-header label.
`accessor`	`(row: T) => unknown`	`—`	Pulls the raw value used for search, filter, sort, export.
`type`	`'text' \| 'number' \| 'date' \| 'time'`	`'text'`	Drives default alignment, numeric formatting, and date/time filter binding.
`cell`	`(value, row) => ReactNode`	`—`	Custom renderer. Defaults to the accessor stringified by type.
`align`	`'left' \| 'right' \| 'center'`	`type==='number' ? 'right' : 'left'`	Cell + header alignment.
`isRowHeader`	`boolean`	`false`	Renders cells in this column as <th scope="row"> and applies rowHeaderFont.
`defaultWidth`	`number`	`—`	Initial width in px. Flex when omitted.
`minWidth / maxWidth`	`number`	`80 / 2000`	Resize clamps.
`resizable / reorderable / hideable`	`boolean`	`true`	Per-column toggles for the layout features.
`defaultHidden`	`boolean`	`false`	Start hidden — appears in the Columns menu so it can be enabled.
`pinned`	`'left' \| 'right'`	`—`	Locks the column to one side and excludes it from reorder.
`font`	`FontSpec`	`—`	Overrides cellFont for this column only.
`sortBy`	`(row: T) => string \| number \| Date`	`accessor`	Override the value the sort comparator uses.

Pagination

Prop	Type	Default	Description
`page`	`number`	`—`	1-indexed current page.
`pageCount`	`number`	`—`	Total page count.
`onPageChange`	`(page) => void`	`—`	Page change callback.
`siblingCount`	`number`	`1`	How many pages to show on either side of the current.
`showPrevNext`	`boolean`	`true`	Toggle the Prev / Next text buttons.
`showSummary`	`boolean`	`false`	Render a "Page X of Y" summary on the left.

DateRangePicker

Prop	Type	Default	Description
`value / onChange`	`DateRange / (range) => void`	`—`	Controlled range. defaultValue + uncontrolled also supported.
`monthsVisible`	`number`	`2`	Number of months rendered side by side in the popover.
`weekStartsOn`	`0..6`	`0`	Sunday = 0.
`minDate / maxDate`	`Date`	`—`	Disable days outside the bounds.
`presets`	`DatePreset[]`	`Today / 7d / 30d / This month / Last month`	Sidebar quick-select. Pass [] to remove the sidebar.

TimePicker

Prop	Type	Default	Description
`value / onChange`	`TimeValue / (next) => void`	`—`	Controlled time. TimeValue = { hours, minutes } in 24h.
`variant`	`'analog' \| 'digital'`	`'analog'`	Initial picker style.
`switchable`	`boolean`	`true`	Lets the user switch between analog and digital from the panel.
`hourCycle`	`12 \| 24`	`24`	Digital picker shows an AM/PM pill when 12.
`minuteStep`	`number`	`1`	Minute snap.