Engram

Data table

component

The generic data table behind compare, organizer, scoreboards, and leaderboards.

Install

npx shadcn@latest add @engram/data-table

Registry item: /r/data-table.json — the machine-readable definition agents install from.

Example

The Slammer
495
The Slammer
495
64
0
0
0
Seventh Seraph VY-7
460
Seventh Seraph VY-7
460
25
57
47
32
Aurora Dawn
460
Aurora Dawn
460
68
0
0
0
Temptation's Hook
454
Temptation's Hook
454
59
0
0
0
Gnawing Hunger
444
Gnawing Hunger
444
21
55
65
63

Props

PropTypeDefaultDescription
columns*DataTableColumn<Row>[]
rows*Row[]
rowKey*(row: Row, index: number) => stringStable row id (also the selection key).
sortSortStateControlled sort; omit to let the table manage it.
defaultSortSortStateInitial sort when uncontrolled.
onSortChange(sort: SortState) => void
selectionSet<string>Controlled multi-selection (set of row keys); omit to manage internally.
onSelectionChange(selection: Set<string>) => void
selectablebooleanfalseShow the leading select-checkbox column.
stickybooleanfalseStick the header to the top on scroll.
heatbooleanfalseTint cells by each column's `heat` accessor (best/worst shading).
onRowClick(row: Row) => void
emptyReactNodeEmpty-state content when there are no rows.
classNamestring

Own the code: shadcn add copies this component's source into your repo to read and edit directly. Extend without forking — edit the source, use asChild to swap the element, or pass the typed annotations prop for curated data.