KQ-030 · LEDGER
Ledger
Ten thousand rows, sixty frames — a hand-rolled virtualized table where sorting FLIPs only the rows you can see and selection cascades down the window.
KQ-030 · LEDGER
10,000 ROWS · VIRTUALIZED
ID
Time
TXN-05543
JUN 11 · 05:17
+2499.99
CLEARED
TXN-04891
JUN 27 · 19:14
+2499.94
CLEARED
TXN-09664
JUN 04 · 20:53
+2499.29
CLEARED
TXN-03223
JUN 15 · 22:14
+2498.49
CLEARED
TXN-04688
JUN 11 · 00:38
+2498.46
CLEARED
TXN-07344
JUN 09 · 13:50
+2497.79
CLEARED
TXN-06692
JUN 26 · 03:47
+2497.74
CLEARED
TXN-00294
JUN 05 · 11:39
+2496.88
FLAGGED
TXN-05024
JUN 14 · 06:47
+2496.29
CLEARED
TXN-06489
JUN 09 · 09:11
+2496.26
CLEARED
TXN-04372
JUN 30 · 20:44
+2496.24
CLEARED
TXN-00834
JUN 27 · 02:03
+2495.69
FLAGGED
TXN-09145
JUN 07 · 22:23
+2495.59
CLEARED
TXN-08493
JUN 24 · 12:20
+2495.54
CLEARED
VISIBLE 1–8 OF 10,000
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/ledger
Props
- columns / rows / rowId
- LedgerColumn<T>[] / readonly T[] / (row) => string
- default —
- Column defs (width px | "1fr", align, sortable, cell, sortFn), the full data set, and stable row identity.
- rowHeight / height / overscan
- number
- default 40 / 320 / 6
- Fixed row height, viewport height, and window padding.
- sort / defaultSort / onSortChange
- LedgerSort | null
- default —
- Controlled or uncontrolled; headers cycle asc → desc → none.
- selectable / selected / onSelectedChange
- boolean / ReadonlySet<string> / (next) => void
- default —
- Checkbox column; select-all targets every row, not just visible.
- onVisibleRangeChange
- ({ from, to }) => void
- default —
- 1-based visible range, emitted from the rAF scroll flush.
| Prop | Type | Default | Description |
|---|---|---|---|
| columns / rows / rowId | LedgerColumn<T>[] / readonly T[] / (row) => string | — | Column defs (width px | "1fr", align, sortable, cell, sortFn), the full data set, and stable row identity. |
| rowHeight / height / overscan | number | 40 / 320 / 6 | Fixed row height, viewport height, and window padding. |
| sort / defaultSort / onSortChange | LedgerSort | null | — | Controlled or uncontrolled; headers cycle asc → desc → none. |
| selectable / selected / onSelectedChange | boolean / ReadonlySet<string> / (next) => void | — | Checkbox column; select-all targets every row, not just visible. |
| onVisibleRangeChange | ({ from, to }) => void | — | 1-based visible range, emitted from the rAF scroll flush. |