Ledger Table

React

Full-bleed rows with the title inside the grid, a numbered rail and sortable headers.

Eval runs, Oct
#
00	Eval runs, Oct
01	R-2037	atlas-l	tool-use	0.957	1,120	pass
02	R-2041	atlas-l	support-qa	0.912	840	pass
03	R-2040	atlas-m	support-qa	0.884	410	pass
04	R-2039	atlas-s	support-qa	0.801	160	drift
05	R-2038	local/32b	support-qa	0.742	1,290	fail

Install

$ npx shadcn@latest add https://spotcheckui.com/r/ledger-table.json

No motion engine needed.

Usage

import { LedgerTable, type LedgerColumn } from "@/components/spotcheck/ledger-table"

const columns: LedgerColumn<Run>[] = [
  { key: "id", label: "Run", emphasis: true },
  { key: "score", label: "Score", numeric: true },
]

<LedgerTable title="Eval runs" rows={runs} columns={columns} rowKey="id" defaultSort={{ key: "score", dir: "desc" }} />

Sorting needs a client component, so a custom render has to come from one too. Define columns in a "use client" file.

Props

title * RequiredstringDefault —Printed inside the table, and names it for screen readers.
rows * RequiredRow[]Default —
columns * RequiredLedgerColumn<Row>[]Default —
rowKey * RequiredstringDefault —The field that uniquely identifies a row.
defaultSortLedgerSort<Row>Default —
classNamestringDefault —

Keyboard

Tab	Move between column headers
Enter	Sort by the focused column
← →	Scroll a wide table once it has focus

Reduced motion

Rows invert on hover at once, with no fade.