Data tables
Records table
A controlled virtualized records grid for large, changing datasets.
Starts when it scrolls into view
NORD FROST · DARK · RADIUS 6/10 · BASE 16PX · SHADOW
- Type
RecordsTable- Source
records_table.rs- Story
records-table- Demo height
- 288 px
- Events
- RecordsTableEvent
Code
Cut from the gallery story this page runs. The states above change what the demo is given rather than how it is built, so they share this code.
fn records_story_columns() -> Vec<RecordColumn> {
vec![
// Wide enough for the longest supplier in the fixture: a cell's
// selectable prose cannot ellipsize, so a column narrower than its
// content clips mid-word rather than trailing off.
RecordColumn::new("supplier", "Supplier")
.sortable(true)
.fixed(true)
.width(px(280.)),
RecordColumn::new("region", "Region")
.sortable(true)
.width(px(120.)),
// The one that takes the room. Every other column here is exactly as
// wide as its content needs, and the products - a list of chips whose
// length nobody can predict - take whatever the table has left over.
RecordColumn::new("products", "Products")
.width(px(190.))
.fill(1.),
RecordColumn::new("unit_cost", "Unit cost")
.sortable(true)
.alignment(RecordColumnAlignment::Right)
.width(px(110.)),
RecordColumn::new("status", "Status")
.sortable(true)
.width(px(140.)),
]
}
let mut table = RecordsTable::new(id, label, window, cx);
table.set_columns(records_story_columns(), window, cx);
// A header, a body, and a bottom that says what is in it. Without the
// third, a frame taller than its rows reads as rows that were cut off -
// and a table is the one surface where that guess is worth ruling out.
table.set_footer(records_story_summary(records.content()), cx);
table.set_records(records, window, cx);
table
Events and ownership
- Who owns the state
- RecordsTable renders state supplied by the application; it does not own durable work.
- What it emits
- Interactive intent is reported through the typed RecordsTableEvent contract and stable application IDs.
- What it means
- A controlled virtualized records grid for large, changing datasets.
- Overflow and motion
- Wide content retains context in a bounded surface; reduced motion preserves a useful state.
Event types
- RecordsTableEvent
What the demo does and does not show
The demo above is the same Rust as the native component, compiled to WebAssembly and drawn on a WebGPU canvas — not a mock-up, a recording, or a re-implementation. What it paints is what the component paints: layout, colour from the live theme, and motion.
The live browser specimen requires WebGPU; the native component remains the authoritative runtime.
A canvas cannot stand in for the platform, so treat everything that goes through the operating system as unproven here: keyboard handling and shortcuts, screen reader semantics, text input and IME, the clipboard, file drops, and the frame rate you would get on your own GPU. Judge those in a native build. If your browser has no WebGPU, the frame says so rather than showing an empty box.