Live: https://toclocoinc.github.io/lattice-grid-scroll-trial/
A single page for trying the scrolling feel of Lattice Grid on a wide, tall table: 1,000 rows by 300 columns by default, shaped like a finance tracker with a few text columns pinned on the left, month-style number columns with totals, a grand-total row and a select-all checkbox in the header.
Scroll sideways and vertically with a mouse, trackpad or keyboard. The panel in the top-right corner measures frame gaps while you scroll (median, 95th percentile, maximum, and the counts over 16 ms and 50 ms) and reports which part of the browser is placing the column header and the pinned rows during a sideways scroll. Copy puts the current numbers on the clipboard as JSON.
The page can load two builds of the grid, switched from the settings bar or with the build parameter:
build |
What loads |
|---|---|
1.63.3 (default) |
the current release, from the jsDelivr CDN |
1.63.1 |
the release before the sideways-scroll changes, from the jsDelivr CDN |
The current release places the column header and the pinned rows from the browser's compositor during a sideways scroll, where the browser supports scroll-driven animations (current Chrome, Edge and Safari), and reconciles the totals row's cells as the visible columns change rather than rebuilding it. The panel's header placed by line shows which path is active in your browser. The comparison to make is a fast sideways fling on each build: watch whether the headings and the totals row stay on their columns.
The settings bar reloads the page with a different shape. The same settings are URL parameters:
| Parameter | Default | Meaning |
|---|---|---|
build |
1.63.3 |
which build of the grid to load, see above |
rows |
1000 | number of rows |
cols |
300 | number of columns in total |
checkbox |
1 | 0 turns the header select-all checkbox off |
totals |
1 | 0 removes the grand-total row and the column totals |
scrollbars |
native |
custom uses the grid-drawn scrollbars |
pinned |
2 | number of text columns pinned on the left |
For example: ?build=1.63.1&rows=2000&cols=450&checkbox=0.
Plain JavaScript, no build step. The grid is loaded from the jsDelivr CDN, pinned to one release per build.
npm start # a static server; open the URL it prints
npm run verify # headless check: the grid paints, counts match, a screenshot is saved
The data is generated in the page from a fixed seed, so every load is identical.
Built with Lattice Grid, a JavaScript data grid with a Data Router: one live feed keeps grids, charts, boards, Gantt and KPI tiles in step. Documentation · Demos · Licence