Data table.
Search, sort and page through a small dataset.
LIVE PREVIEWTry it. It works.
| Updated | |||
|---|---|---|---|
| Interface studies | AMAlex Morgan | In progress | Today |
| Component audit | SLSam Lee | Review | Today |
| Reading list | AMAlex Morgan | Ready | Yesterday |
Install the source
npx shadcn@latest add https://ui.bld8.dev/r/table.jsonUsage
<DataTable caption="Projects" rows={projects} columns={columns} rowKey={row => row.id} searchText={row => row.name} pageSize={5} />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
Generic over row type. Column<T>: key, header, cell(row), optional sortValue(row). Client-side filtering, sorting and pagination are included. Use a server-backed solution for large datasets; 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.