Component gallery

Table

The lean presentational core: typed columns, no client logic, drawing exactly the rows it is handed. Sorting, filtering, and paging live in DataTable.

The look contract

Tiny-caps sticky header, hairline rows, hover tint, right-aligned numbers in tabular figures
PartLinePriceStockStatus
Ceramic brake pad setBraking$48.20312
In stock
Cabin air filterFiltration$14.7558
Low
Iridium spark plugIgnition$9.401,044
In stock
Full-synthetic 5W-30Fluids$27.990
Out
All-season wiper bladeExterior$18.50140
In stock
AGM battery, group 48Electrical$189.0026
In review

Bleed

The table meets the card edges while this title keeps its padding. One prop, and it reads the inset from the card so compact cards line up too
PartLinePriceStockStatus
Ceramic brake pad setBraking$48.20312
In stock
Cabin air filterFiltration$14.7558
Low
Iridium spark plugIgnition$9.401,044
In stock
Full-synthetic 5W-30Fluids$27.990
Out
All-season wiper bladeExterior$18.50140
In stock
AGM battery, group 48Electrical$189.0026
In review

Bleed in a compact card

Same prop, narrower inset, no caller arithmetic
PartLinePriceStockStatus
Ceramic brake pad setBraking$48.20312
In stock
Cabin air filterFiltration$14.7558
Low
Iridium spark plugIgnition$9.401,044
In stock

Density

Comfortable (the mock's rhythm) vs compact for dense ledgers
#PartLinePriceStockStatus
1Ceramic brake pad setBraking$48.20312
In stock
2Cabin air filterFiltration$14.7558
Low
3Iridium spark plugIgnition$9.401,044
In stock
4Full-synthetic 5W-30Fluids$27.990
Out
5All-season wiper bladeExterior$18.50140
In stock
6AGM battery, group 48Electrical$189.0026
In review

Custom cells

Any column renders any node: a mono SKU, a col.link cell naming its destination on hover, a status pill, a fill bar
SKUPartFillPrice
BRK-447186%$48.20
FLT-229022%$14.75
SPK-881297%$9.40
OIL-11300%$27.99
WPR-600362%$18.50
BAT-774530%$189.00

Sizing by shape

No widths written. Ids keep their characters, numbers and dates hug their content, text truncates with the full value on hover, and spare width goes to the columns that can use it
SKUNoteLinePriceStatus
BRK-4471
Front axle, low-dust compound. Fits 2018–2024 trims.
$48.20
In stock
FLT-2290
Activated-carbon media. Reorder point hit yesterday.
$14.75
Low
SPK-8812
Pre-gapped 0.044in. Sold in packs of four.
$9.40
In stock
OIL-1130
Backordered from supplier: ETA 6 business days.
$27.99
Out
WPR-6003
22in beam blade, adapter kit included.
$18.50
In stock
BAT-7745
Two returns flagged this week: QA reviewing lot 7745-B.
$189.00
In review

Budgets and the +N cue

size sets a floor or cap when a shape's default is wrong for one column. Columns with a priority above 1 drop first when the table is narrower than its floors, and the last header says how many are hidden
PartSKUNotePrice
Ceramic brake pad set
BRK-4471
Front axle, low-dust compound. Fits 2018–2024 trims.
$48.20
Cabin air filter
FLT-2290
Activated-carbon media. Reorder point hit yesterday.
$14.75
Iridium spark plug
SPK-8812
Pre-gapped 0.044in. Sold in packs of four.
$9.40
Full-synthetic 5W-30
OIL-1130
Backordered from supplier: ETA 6 business days.
$27.99
All-season wiper blade
WPR-6003
22in beam blade, adapter kit included.
$18.50
AGM battery, group 48
BAT-7745
Two returns flagged this week: QA reviewing lot 7745-B.
$189.00

Reorderable

A grip leads each row. Drag it, or focus it and press Alt with the up or down arrow
PartLinePriceStockStatus
Ceramic brake pad setBraking$48.20312
In stock
Cabin air filterFiltration$14.7558
Low
Iridium spark plugIgnition$9.401,044
In stock
Full-synthetic 5W-30Fluids$27.990
Out
All-season wiper bladeExterior$18.50140
In stock
AGM battery, group 48Electrical$189.0026
In review

Sticky header + scroll

Cap the height and the header pins; a min-width scrolls narrow viewports horizontally
PartLinePriceStockStatus
Ceramic brake pad setBraking$48.20312
In stock
Cabin air filterFiltration$14.7558
Low
Iridium spark plugIgnition$9.401,044
In stock
Full-synthetic 5W-30Fluids$27.990
Out
All-season wiper bladeExterior$18.50140
In stock
AGM battery, group 48Electrical$189.0026
In review
Ceramic brake pad setBraking$48.20312
In stock
Cabin air filterFiltration$14.7558
Low
Iridium spark plugIgnition$9.401,044
In stock
Full-synthetic 5W-30Fluids$27.990
Out
All-season wiper bladeExterior$18.50140
In stock
AGM battery, group 48Electrical$189.0026
In review

Skeleton

The kit's `skeleton` standard, sized to the columns
PartLinePriceStockStatus

Empty

Falsy rows → EmptyState; pass your own for a custom message
PartLinePriceStockStatus

No parts match

Try a broader filter.

TableSkeleton preset

The page-level loading shape, rendered bare because it brings its own Card: a toolbar strip and skeleton rows sized to the same columns array the loaded table renders

PartLinePriceStockStatus

Inline row expansion

The mock's review pattern: click a row for an accent-washed detail panel below it
PartLinePriceStockStatus
Ceramic brake pad setBraking$48.20312
In stock
Cabin air filterFiltration$14.7558
Low
Iridium spark plugIgnition$9.401,044
In stock
Full-synthetic 5W-30Fluids$27.990
Out
All-season wiper bladeExterior$18.50140
In stock
AGM battery, group 48Electrical$189.0026
In review
In review

Two returns flagged this week: QA reviewing lot 7745-B.

Footer + Pager + keyboard

Drop a <Pager> in the footer slot; keyboard enables Ctrl+Shift+←/→: hover prev/next to see the shortcut named
PartLinePriceStockStatus
Ceramic brake pad setBraking$48.20312
In stock
Cabin air filterFiltration$14.7558
Low
Iridium spark plugIgnition$9.401,044
In stock
Showing 1–3 of 6

Pager standalone

Also a top-level export. This one also opts into keyboard, but only the first pager on the page (the footer above) owns the shortcut
Offset mode · 9 pages
…
Cursor mode · prev/next only

Cell helpers

Opt-in formatters for common cell shapes: date, external link, code
  • renderDate: Aug 1, 2026
  • renderLink: BRK-2214
  • renderCode: exact_match

ToolbarSkeleton

The loading stand-in mirroring FacetBar's layout

Styling slots

Every className the component exposes, and what it reaches
Table
className
the <table> element itself
_className
the outer wrapper
scrollClassName
the scrolling container around the table
headClassName
the <thead>
headRowClassName
the header row
headCellClassName
each header cell
bodyClassName
the <tbody>
rowClassName
each data row
cellClassName
each data cell
footerClassName
the footer slot, often a Pager
emptyClassName
the empty-state wrapper
detailRowClassName
an expanded row's detail panel
Pager
className
the prev/next button cluster
_className
the outer row
buttonClassName
each page/prev/next button
summaryClassName
the range summary text
@versable-git/ui · all states, both themes