Lattice Grid Buy a licence

demo D02

One million rows

Load a million rows and scroll them, timed on your machine

rows: 1_000_000

Building…
Loading a live grid…

The configuration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>

<div id="grid" style="height: 540px"></div>

<script>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    selection: 'multiple',
    toolPanel: {
      side: 'left',
      panels: ['columns', 'filters', 'views', 'quick'],
      actions: ['undo', 'redo', 'export', 'restore', 'maximise'],
      exportName: 'cloud-costs',
    },
    columns: [
      { field: 'account', title: 'Account', filter: { type: 'set' } },
      { field: 'service', title: 'Service', filter: { type: 'set' } },
      { field: 'resource', title: 'Resource', layout: { flex: 1, min: 200, max: 320 } },
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'environment', title: 'Env', filter: { type: 'set' },
        cell: { decoration: 'pill', variant: { map: {
          prod: 'danger', staging: 'warning', test: 'info', dev: 'success',
        } } } },
      { field: 'change', title: 'Change', type: 'number',
        layout: { width: 140 }, format: { style: 'percent', decimals: 1 } },
      { field: 'cost', title: 'Monthly cost', type: 'number', total: 'sum',
        layout: { width: 170, pin: 'end' },
        format: { style: 'currency', currency: 'USD', decimals: 2 } },
    ],
    rows,  // one million objects; the grid virtualises them
  });
</script>

Virtual scrolling a JavaScript data grid to a million rows

rows: 1_000_000 sets the size of the array this demo hands to Lattice Grid, and the point of the demo is that setting it does not change how the grid behaves. Virtual scrolling means only the rows inside the visible band, plus a small overscan either side, are mounted as DOM elements; the rest stay as plain records until a scroll brings them into view. A developer reaches for this when a dataset is too large to render as one DOM row per record without stalling the browser, confirming that scroll and paint cost stay proportional to the viewport, not the row count. Because the mounted set stays constant regardless of rows length, sort, filter and keyboard navigation run against the same code path at one thousand rows as at one million; there is no separate large-data mode to opt into. Scrolling is timed on the loading machine rather than promised as a fixed number, since the figure depends on row height, column count and the hardware running it. Keyboard paging and arrow-key movement track the active cell through the virtualised set, so focus does not fall off the grid when the visible rows are replaced underneath it during a fast scroll. The demo exists to be watched, not read: load it, scroll, and see the frame cost stay flat.

How does a JavaScript data grid handle a million rows without freezing?

It renders only the rows currently visible, using virtual scrolling to mount and unmount DOM rows as the viewport moves, rather than creating one element per record up front. The rows array can hold a million entries; the grid’s paint and scroll cost tracks the number of rows on screen, typically a few dozen, not the size of the array behind them.

Related demos