grids
A table for large datasets that draws only the cells on screen. Sorting and filtering rely on a proven library (TanStack Table), and the scrolling and frozen-area math is my own design.
2Directions, horizontal and vertical, where only visible cells are drawn, computed by hand
- 2026.02 ~ Present
- Firstage
- Design and implementation (solo)
Core value
Sorting, filtering, and scrolling never change the selected rows, so bulk actions apply only to the records you picked.
Outcomes
- Scrolling that draws only visible cells both ways, frozen rows and columns, groups and trees, pivots, cell editing, and server-side paging in one table
- Powers CSV exports in the internal operations dashboard
- Selection, column widths and order, and keyboard control share one state, so they never drift apart
- Cell position math is tested apart from the interface
Tech stack
Context
Operations screens with many records need selection and column changes that also cover rows not rendered on screen. If sorting, filtering, or scrolling changes what is selected, a bulk action lands on the wrong records. I needed a grid that keeps logical record and field IDs apart from screen coordinates, and I built it for internal operations screens.
Decisions and implementation
- TanStack Table owns the sorting and filtering data model, and I designed the two-axis virtualization and the coordinate math for frozen regions.
- Row IDs are separate from screen coordinates, so sorting, filtering, and scrolling never change the selection target. Selected IDs survive sorting and filtering, hidden targets included, so the contract requires the host to account for them before a bulk action.
- Selection, column size, column order, and keyboard control share one core state. The core is React-free, so its geometry is tested outside React.
- The command bar and keyboard actions run through the same command registry.
Current state
In the internal Dashboard, a page that exercises the grid with sample data and an operations CSV export use this package. It is still in beta, and screens that handle real operations data in the grid, wiring it into the Dashboard together with kuery, a server-wide selection scope, and multi-cell paste remain open.
