Operator data table
General-purpose operator table. Sortable headers, typed cells, optional row click, and an empty-state row. Used for runs, fleet, secrets, audit, and other ledgers.
Included in the single kansho full pack. Components are not offered as separate installs.
Runs ledger
| Status | Cost | Duration | Branch | ||||
|---|---|---|---|---|---|---|---|
| R-1041 | Audit log compaction | code-agent | Running | 182,000 | $1.92 | 8m 12s | audit/m-2014 |
| R-1040 | Renew webhook signing key | ops-agent | Success | 14,000 | $0.18 | 1m 04s | main |
| R-1039 | Postmortem draft — INC-218 | writer-agent | Success | 92,000 | $1.10 | 4m 33s | writes/inc-218 |
| R-1038 | Rotate sandbox secrets | ops-agent | Failed | 8,400 | $0.11 | 27s | main |
| R-1037 | Refresh embeddings (docs) | embed-agent | Paused | 220,000 | $2.40 | 12m 41s | embed/refresh |
| R-1036 | Summarise weekly intake | writer-agent | Skipped | 0 | $0.00 | — | writes/weekly |
Interactive rows
Use full-row activation for inspect/navigation flows; keep destructive or mutating actions as explicit cell buttons| Run | Title | Status | |
|---|---|---|---|
| R-1041 | Audit log compaction | Running | |
| R-1040 | Renew webhook signing key | Success | |
| R-1039 | Postmortem draft — INC-218 | Success | |
| R-1038 | Rotate sandbox secrets | Failed |
Click a row or focus and press Enter / Space.
Compact, no hover
Settings-style read-only listing| Setting | Value |
|---|---|
| Region | eu-west-1 |
| Model | sonnet-4.6 |
| Concurrency | 8 |
| Budget cap | $500 / day |
Row selection
Leading checkbox column; header toggles all with an indeterminate mid-state. Selection is keyed by row id, so it survives sorting.| Status | Cost | |||
|---|---|---|---|---|
| R-1041 | Audit log compaction | Running | $1.92 | |
| R-1040 | Renew webhook signing key | Success | $0.18 | |
| R-1039 | Postmortem draft — INC-218 | Success | $1.10 | |
| R-1038 | Rotate sandbox secrets | Failed | $0.11 | |
| R-1037 | Refresh embeddings (docs) | Paused | $2.40 | |
| R-1036 | Summarise weekly intake | Skipped | $0.00 |
1 selected: R-1041
Loading
Skeleton rows matching the column count while data resolves| Run | Title | Status | Cost |
|---|---|---|---|
Usage
Guidance- Use onRowClick for opening or navigating to a row's detail.
- Keep side effects in dedicated action cells (Retry, Delete, Approve).
- Pass getRowId so selection and sort survive re-ordering.
- Put a mutating action on the row body alongside onRowClick.
- Rely on colour alone for status — the cell holds a StatusPill.
- When to use
- Any tabular ledger: runs, fleet, secrets, audit trails, settings.
- When not to
- Free-form cards or a single record — reach for a definition list or card instead.
Accessibility
Keyboard & screen readerKeyboard
- Tab
- Move focus across sortable headers and interactive rows.
- EnterSpace
- Activate the focused row (onRowClick) or toggle a sort header.
Announces
- Interactive rows announce getRowLabel, not a bare 'row'.
- Sort direction is exposed on the header via aria-sort.
- The selection checkbox column carries an indeterminate mid-state.
Not supported
- Load-error state — surface errors above or below the table for now.
Props
API reference| Prop | Type | Default | Description |
|---|---|---|---|
| columnsrequired | DataTableColumn<T>[] | — | Column definitions: id, header, cell renderer, plus width / align / sortable / monospace. |
| rowsrequired | T[] | — | Row data. Empty renders the empty state. |
| getRowId | (row, i) => string | — | Stable key for a row; falls back to row.id / row.key / index. |
| density | 'comfortable' | 'compact' | 'comfortable' | Row height preset. |
| hover | boolean | true | Row hover affordance. Turn off for read-only listings. |
| onRowClick | (row) => void | — | Makes rows interactive (focusable, Enter / Space activated). |
| getRowLabel | (row) => string | — | Accessible activation label folded into the interactive row's name. |
| loading | number | boolean | — | Skeleton rows while data resolves; true renders 5. |
| selectable | boolean | false | Opt-in leading checkbox column; selection is keyed by row id. |
| selectedKeys | RowKey[] | — | Controlled selection set. |
| onSelectionChange | (keys) => void | — | Fires when the selection set changes. |
| sortBy | { id, direction } | — | Controlled sort state. |
| onSort | (id) => void | — | Fires when a sortable header is activated. |
| emptyLabel | string | — | Copy for the empty-state row. |
| onEmptyAction | () => void | — | Optional empty-state action, paired with emptyActionLabel. |
| footer | ReactNode | — | Content rendered below the table, inside the outer border. |
| stickyFirstColumn | boolean | false | Pin the first column on horizontal scroll. |
Component documentation
Data Table
components/surfaces/data-table.tsxPurpose
Renders typed column definitions and rows as a sortable, selectable data table.
Appropriate use
Use for structured datasets whose columns, row identity, and interaction model are known in advance.
Example
components/surfaces/data-table.tsx has a representative live example in the "Runs ledger" section on /components/data-table.
States
Supports comfortable or compact density, hover styling, interactive rows, loading placeholders, empty state, controlled sorting, controlled row selection, a footer, and a sticky first column.
API and props
DataTable accepts columns, rows, getRowId, density, hover, onRowClick, getRowLabel, loading, selectable, selectedKeys, onSelectionChange, sortBy, onSort, empty labels and action, caption, footer, stickyFirstColumn, and className.
Dependencies
React, Lucide icons, Checkbox, Skeleton, and the Kansho cn utility.
Accessibility
Uses native table structure and caption, exposes aria-sort, names selection checkboxes, and makes clickable rows keyboard-operable with a caller-supplied row label.
Limitations
Sorting, selection, pagination, data fetching, and row-action side effects remain controlled by the caller; large datasets are not virtualized.
Source
Source: components/surfaces/data-table.tsx.
Full pack
components/surfaces/data-table.tsx is documented at /components/data-table and installs only through the single Kansho full pack; no individual component install is offered.