Data grid
The data grid is SeeKi. Everything else — the wizard, the sidebar, the status bar — exists so the grid can stay the hero. It feels like a spreadsheet on purpose: click a header to sort, type in the search box to narrow, use the column menu to filter, and page through with the keyboard. No SQL language anywhere.
Anatomy
| id ⇅ | vehicle ⇅ | started_at ↓ | duration_min ⇅ | autonomous ⇅ | notes ⇅ |
|---|---|---|---|---|---|
| 4821 | alpha-07 | 2026-04-12 09:14 | 42 | Yes | no incidents |
| 4820 | alpha-03 | 2026-04-12 08:51 | 18 | Yes | NULL |
| 4819 | alpha-12 | 2026-04-12 08:02 | 73 | No | manual override at 08:20 |
| 4818 | alpha-07 | 2026-04-11 17:40 | 55 | Yes | NULL |
| 4817 | alpha-09 | 2026-04-11 16:22 | 33 | Yes | rain |
Translucent chrome floats over the grid; the grid itself stays opaque. The active row has an accent-tinted background with a 2px accent rail on the left.
Sort — click a header
One click: ascending. Second click: descending. Third click: unsorted. The column that is currently sorting gets the accent on its arrow — the full column doesn’t re-tint, so the cells stay readable. Shift-click adds a secondary sort.
Search — narrow everything at once
The toolbar search is global: it scans every visible column in the current table. Results update as you type. The pill next to the search shows how many columns had a match — useful when you search alpha- and want to know if it found the id column, the vehicle column, or both.
Filter — scope one column
Search narrows the whole table; a filter narrows a single column. Open the column’s menu (see Column menu) and type a value. A filter row appears just under the header:
| id | vehicle | started_at ↓ | duration_min | autonomous |
|---|---|---|---|---|
| 4821 | alpha-07 | 2026-04-12 09:14 | 42 | Yes |
| 4818 | alpha-07 | 2026-04-11 17:40 | 55 | Yes |
| 4802 | alpha-07 | 2026-04-10 14:12 | 21 | No |
Filter on vehicle = "alpha-07". Filters compose across columns — each one narrows the visible rows further.
Pagination — 500,000 rows, one page at a time
The backend returns a page of rows per request; the grid never tries to hold the whole table in memory. The status bar shows the current page, total pages, and total row count. Arrow buttons, jump-to-first, jump-to-last, and numeric page chips keep you oriented.
Keyboard navigation
SeeKi is a tool for reading, which means most sessions are almost mouse-free. Every grid action has a keyboard equivalent, and focus is always visible — the focused row gets the accent-tinted background and a 2px accent rail on the left.
Live vs static
The small live pill means the current view is connected to the database — every page fetch is a round-trip. Disconnect and the pill goes grey; SeeKi continues to show the last page it fetched but will not refresh.
Related
- Column menu — per-column sort, filter, and hide.
- Yes/No badges — how booleans render.
- NULL rendering — the hatched cell.
- Frontend map — which Svelte file owns what.