BLD8 / ui
Data

Table workflows.

Selection, filters, visible columns and bulk actions, working together.

LIVE PREVIEWTry it. It works.
Table density
Table state
6 results
Workspace projects
Navigation studyReviewMaya
Form patternsReadySam
Motion notesReviewOliver

Install the source

Terminal
npx shadcn@latest add https://ui.bld8.dev/r/advanced-table.json

Registry setup · Open the playground

Usage

React / TypeScript
<DataTable caption="Projects" rows={rows} columns={columns}
  rowKey={row=>row.id} rowLabel={row=>row.name} selectable
  selectedKeys={selected} onSelectedKeysChange={setSelected}
  columnVisibility density="compact" filters={filters}
  renderBulkActions={rows=><Button onClick={()=>archive(rows)}>Archive</Button>} />

In the workspace or ZIP starter, import components from @bld8/ui and include @bld8/ui/styles.css once. Registry installations use your local bld8/ source path. Wrap overlays in UIProvider.

API & behaviour

Extends the existing client-side DataTable API. Selection persists across search/pages; the header selects only the current page and shows mixed state. filters supply scalar values/options. hideable:false keeps a column visible; visibleColumnKeys/onVisibleColumnKeysChange can control visibility. Loading, error/onRetry and compact density are optional. createTableCSV exports explicit exportValue/sortValue scalars with CSV quoting and formula escaping. Use server={query,onQueryChange,totalRows} for externally fetched rows; the table skips client filtering/slicing. renderSelectedActions receives stable keys across pages. resizableColumns enables pointer and keyboard resizing; columns accept width, minWidth and pinned:start/end. Virtualization is not included.

Notes to self

Test this component with real content, keyboard input and both themes. The example is a starting point; labels, error handling and behaviour still need to fit the application.