Docket
Full-featured client-side data table block on a real <table>: debounced search with highlighted matches, per-column filter checklists, column visibility and density, tri-state sorting where rows FLIP to their new positions, shift-click range selection with a spring-up bulk action bar (rolling count, confirm-to-delete), expandable detail rows, sticky header and first column, rolling pagination, an empty state, and roving arrow-key focus with aria-sort and live announcements.
motionpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/docketManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | DocketColumn<R>[] | sample deployment columns | Column definitions, in display order. The first column is sticky. |
| rows | R[] | 120 seeded sample deployments | Data rows (client-side; tuned for ~50–500). |
| getRowId | (row: R) => string | row => String(row.id) | Stable row id. |
| selectedIds | string[] | Controlled selection (row ids). Pair with onSelectionChange. | |
| onSelectionChange | (ids: string[], rows: R[]) => void | Fires whenever the selection changes. | |
| bulkActions | DocketBulkAction<R>[] | Export / Archive / Delete | Actions in the bulk bar that springs up once rows are selected. |
| onBulkAction | (actionId: string, ids: string[], rows: R[]) => void | Fires after any bulk action resolves. | |
| renderDetail | ((row: R) => React.ReactNode) | false | a field list (sample data: deploy detail) | Expanded-row detail panel. false disables expanding. |
| pageSize | number | 25 | Initial rows per page. |
| pageSizeOptions | number[] | [10, 25, 50, 100] | Choices in the page-size select. |
| density | "compact" | "comfortable" | "comfortable" | Initial row density. |
| maxHeight | number | 440 | Max height of the scrolling table body (header stays sticky). |
| noun | [string, string] | ["deployment", "deployments"] | Singular / plural noun used in copy ("3 deployments selected"). |
| now | number | Date | the current time, read after mount | Reference time for relative dates. |
| accentColor | string | "#67e8f9" | Signature accent: sort arrows, selection, focus rings, progress, highlights. |
| label | string | "Deployments" | Accessible table caption. |
| ref | React.Ref<DocketHandle> | Imperative handle — replay(), clearSelection(). | |
| className | string |
Honors prefers-reduced-motion with a designed static fallback, and passes className through.