Data table
A table on our Table with sortable headers, text and faceted filters, row selection with a floating bulk bar, column visibility, row actions and pagination, without TanStack.
Preview
| Deployment | Actions | |||||
|---|---|---|---|---|---|---|
Cache invoice PDFs at the edgedpl-4f21main | Production | Building | Priya Raman | 2m ago | ||
Fix timezone drift in weekly digestdpl-4f1efix/digest-tz | Preview | Ready | Malik Haddad | 9m ago | ||
Add usage meter to billing pagedpl-4f1afeat/usage-meter | Preview | Failed | Ines Okafor | 18m ago | ||
Bump image optimizer to 4.2dpl-4f17main | Production | Ready | Tomás Ferreira | 34m ago | ||
Queue retries for webhook fan-outdpl-4f12feat/webhook-retry | Preview | Queued | Noor Lindqvist | 37m ago | ||
Tighten CSP for embed widgetdpl-4f0dmain | Production | Ready | Priya Raman | 1h ago |
2 of 14 selected
2 selected
| Deployment | ||
|---|---|---|
No scheduled deploymentsSchedule a release from any ready preview. | ||
0 results
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | T[] | — | Rows to show. |
| columns | DataTableColumn<T>[] | — | { id, header, accessor?, cell?, sortable?, hideable?, defaultHidden?, align?, className? }. accessor feeds sort, search and facets. |
| getRowId | (row: T) => string | — | Stable id for keys and selection. |
| label | string | — | Accessible name of the table. |
| searchColumns | string[] | — | Column ids the search box matches. Omitted: no search box. |
| searchPlaceholder | string | "Search…" | Placeholder for the search box. |
| facet | { columnId, title, options } | — | Faceted filter popover with live counts for one column. |
| selectable | boolean | false | Adds row checkboxes and a select-page header checkbox. |
| defaultSelectedIds | string[] | [] | Rows selected on first render (ids from getRowId). |
| bulkActions | (selected: T[], clear: () => void) => ReactNode | — | Content of the floating bar shown while rows are selected. Use DataTableBulkButton. |
| rowActions | { label, onSelect, shortcut?, variant?, separated? }[] | — | Menu behind a “…” button at the end of each row. |
| getRowLabel | (row: T) => string | getRowId | Names rows in “Select …” and “Actions for …” labels. |
| pageSize | number | 8 | Rows per page; pagination hides with one page. |
| defaultSort | { id: string; desc: boolean } | null | null | Initial sort. |
| emptyState | ReactNode | — | Shown when data is empty (no-results has its own state). |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.