B

bon-ui

Table

Primitives from @/components/element/table, plus DataTable modes for filter, sort, pagination, selection, and fixed columns.

Basic

Default DataTable — sorting, filter, and pagination. Columns with size stay that width; Email has no size so it grows to fill leftover space, with minSize={160} as a floor (further shrink scrolls horizontally). Truncate clips long emails within that floor.
Ava Chenava@example.comAdmin
x
active
Ben Ortizben@example.comEditor
x
active
Cara Nguyencara@example.comViewer
x
invited
Diego Parkdiego@example.comEditor
x
paused
Elena Rossielena@example.comAdmin
x
active

Page 1 of 3 · 12 rows

Toolbar filters

Compose DataTableToolbar + FilterField above the table. Pass required on a filter to keep it applied (no ×).
Status
Ava Chenava@example.comAdmin
x
active
Ben Ortizben@example.comEditor
x
active
Elena Rossielena@example.comAdmin
x
active
Farid Khanfarid@example.comViewer
x
active
Ivy Torresivy@example.comAdmin
x
active

Page 1 of 2 · 7 rows

Status filter

variant='line' (default). A single-select underline strip. Each item shows a status and its count. Counts come from the full list, so they stay put while the table shows only the selected status.
Ava Chenava@example.comAdmin
x
active
Ben Ortizben@example.comEditor
x
active
Cara Nguyencara@example.comViewer
x
invited
Diego Parkdiego@example.comEditor
x
paused
Elena Rossielena@example.comAdmin
x
active

Page 1 of 3 · 12 rows

Status filter buttons

variant='button'. Same selection, drawn as outline buttons. The pressed button keeps a primary border and wash.
Ava Chenava@example.comAdmin
x
active
Ben Ortizben@example.comEditor
x
active
Cara Nguyencara@example.comViewer
x
invited
Diego Parkdiego@example.comEditor
x
paused
Elena Rossielena@example.comAdmin
x
active

Page 1 of 3 · 12 rows

Status filter cards

variant='card'. Each option is a card with a title, description, and count.
Ava Chenava@example.comAdmin
x
active
Ben Ortizben@example.comEditor
x
active
Cara Nguyencara@example.comViewer
x
invited
Diego Parkdiego@example.comEditor
x
paused
Elena Rossielena@example.comAdmin
x
active

Page 1 of 3 · 12 rows

Gray background

Pass variant='gray' to render the table on a muted background with a stronger header. Works on both DataTable and the Table primitive.
Ava Chenava@example.comAdmin
x
active
Ben Ortizben@example.comEditor
x
active
Cara Nguyencara@example.comViewer
x
invited
Diego Parkdiego@example.comEditor
x
paused
Elena Rossielena@example.comAdmin
x
active

Page 1 of 3 · 12 rows

Bordered

Pass variant='bordered' for a border on every cell. The grid is for later table-item edit mode.
Ava Chenava@example.comAdmin92active
Ben Ortizben@example.comEditor78active
Cara Nguyencara@example.comViewer34invited
Diego Parkdiego@example.comEditor12paused
Elena Rossielena@example.comAdmin100active

Page 1 of 3 · 12 rows

With selection

Pass selectable for a checkbox column and select-all on the current page. Selection state is uncontrolled by default.
Ava Chenava@example.comAdmin
x
active
Ben Ortizben@example.comEditor
x
active
Cara Nguyencara@example.comViewer
x
invited
Diego Parkdiego@example.comEditor
x
paused
Elena Rossielena@example.comAdmin
x
active

Page 1 of 3 · 12 rows

Controlled selection

Drive selection with rowSelection and onRowSelectionChange.

Selected: 1, 4

Ava Chenava@example.comAdmin
x
active
Ben Ortizben@example.comEditor
x
active
Cara Nguyencara@example.comViewer
x
invited
Diego Parkdiego@example.comEditor
x
paused
Elena Rossielena@example.comAdmin
x
active

2 of 12 rows selected

Fixed columns

Pass columnPinning to stick columns on the left and right while the middle columns scroll. Set enableSorting: false on a column (Actions) to skip the sort control.
Actions
Ava Chenava@example.comHead of OpsPlatformSan Francisco2 min agoAdminactive
Ben Ortizben@example.comStaff EditorContentAustin1 hr agoEditoractive
Cara Nguyencara@example.comSupport leadSuccessSingaporeYesterdayViewerinvited
Diego Parkdiego@example.comProduct editorGrowthBerlin4 days agoEditorpaused
Elena Rossielena@example.comFinance adminFinanceMilanJust nowAdminactive

Page 1 of 2 · 8 rows

NumberValue

Display numbers with a unit before ($ / ¥) or after (%). Use color for positive (green) / negative (red).
$128¥2,001,50010%12%-4%8.5%-

EmailValue

Highlight the local-part; mute @domain for easier scanning in tables and detail rows.
ava@example.comben.ortiz@company.co.uknot-an-email-

Static primitives

Compose markup yourself with Table / TableRow / TableCell when you do not need TanStack behavior.
Sample inventory — static table
ItemSKUQtyPriceRateStatus
Canvas toteSKU-104224$4812%active
Linen napkin setSKU-21088$36-8.5%invited
Oak traySKU-33100¥1,500-paused