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) => string—Stable row id (also the selection key).
sortSortState—Controlled sort; omit to let the table manage it.
defaultSortSortState—Initial 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——
emptyReactNode—Empty-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.