the grid · v1.103.2
The JavaScript Data Grid Engine
A million rows, and it does not flinch. Lattice Grid holds data in columns rather than rows, and virtualises both axes, so the work it does is proportional to what is on screen, not to what is loaded. A million rows scroll at the frame rate; a hundred columns cost only the dozen in view. Everything below runs in the browser, on the same one build, no framework required.
grouping, totals and pivot
From rows to the few numbers someone asked for.
Group by one column or several and the grid folds the rows into each group, showing the total you asked for and opening to the real rows underneath. The reductions run over the data, not the page, so a total is the total whether or not its rows are on screen. Or pivot, and the distinct values of a field become columns of their own. See how to add a grand total row to a data grid for a runnable example that sums one column and averages another beneath a filter box.
tree data and master-detail
Hierarchies, and the detail underneath a row.
A row can open into a nested grid of its own, line items under an order, trades under a book, and a column can carry a tree the grid expands lazily as branches are opened. The detail is a full instance of the grid, so the same types, editors and validators apply three levels down as they do at the top.
a type per column
A type is not a label.
A column's type is its storage, its comparator, its parser, its formatter and its editor, all
declared in one line. A number sorts and right-aligns numerically;
a date compares by calendar rather than by string; a
duration, a bytes or an
ipv4 stores one value and renders it the way a person reads it.
Nothing here is inferred row by row. And there are 88 of them registered,
from currency and percentages to IP addresses, molarity and a dozen unit families, before you
write one of your own.
Every type → The built-in types → A unit family of your own → A type of your own →
sources and live data
In-memory, paged, remote or streaming.
The same grid reads from an array in the page, a server that pages and filters on its own, or a stream that mints rows as they arrive. Updates are coalesced onto a frame, so a feed of thousands of changes a second is one repaint per frame rather than one per message, and the rate below is what your browser actually applied, measured as it runs.
One million rows → Sort at scale → Two hundred columns → Pivot → Grouping → Master & detail → Tree data → Twenty thousand cell updates → Streaming source →
accessibility
Keyboard and screen-reader users get a first-class grid.
Every operation is reachable without a pointer, and a screen reader hears where a user stands in the whole dataset rather than in the handful of rows on screen. We have been steadily closing conformance gaps against WCAG 2.2 level AA, and this is where several of them land. Menu and filter controls now report whether their popup is open or closed, so a non-visual user always knows the state of what they just pressed, and the filter dialog announces itself as a dialog, so focus and reading order behave the way that pattern should. The grid's own buttons, its tool panel and the names read aloud all draw from the same message catalogue as the rest of your interface, so a grid you translate speaks your language to a screen reader too, and a cell renderer of your own can pull its labels from that catalogue through a typed hook instead of writing English in by hand. The checks that run alongside a live grid now include an accessibility pass, so a missing name or a role that has drifted shows up while you build. This is ongoing work rather than a finished conformance claim.
Keyboard throughout → Screen readers → High contrast → Reduced motion →
Complete, and framework-free
Sorting, filtering, grouping, editing and export are already in the box, so you ship the screen instead of building the grid. Mount it on a div in React, Vue, Svelte or plain HTML, with no build step and the TypeScript types alongside, and it behaves the same everywhere.
Not a viewer. A workspace.
Reading data is the easy half. Editing is where a demo becomes a product: type, fill, paste from Excel and undo the lot, with every write checked before it lands and rolled back if the server says no.
Rows in, answers out
Point charts at the grid and they draw straight from its live rows. Open the statistics layer and it tells you what the numbers say, and how far they have moved since you last looked.