Data Table
A data-driven table component that wraps the existing Table primitive with sorting, row selection, loading skeletons, and pagination. Pass typed columns and data — the component handles the rest.
What's new
Data Table
DataTable takes a data array, column definitions, and a row key. Columns are defined with just id and header — the id doubles as the data accessor. Features include click-to-sort headers with asc/desc/none cycling, checkbox row selection with indeterminate select-all, skeleton loading rows, and a built-in empty state. Toolbar and footer slots accept any ReactNode for search filters, column visibility toggles, or pagination.
1 npx drivn add data-table
DataTable.Pagination
A sub-component designed for backend-driven pagination. Renders a "Page X of Y" label on the left with Previous and Next buttons on the right, built on the existing Pagination component. The user slices data externally and passes the current page, total page count, and a change handler.
Table Bordered Variant
The bordered variant now includes alternating row backgrounds and explicit border-border colors, matching the visual weight of the striped variant for consistency across all table styles.