How to freeze columns in a JavaScript data grid

Set layout: { pin: 'start' } on a column to fix it to the left edge, or layout: { pin: 'end' } to fix it to the right edge. Lattice Grid renders that column in its own scrolling region alongside the rest, so it stays in view no matter how far a reader scrolls a wide table sideways.

Below is a live grid with the account column pinned to the start and the cost column pinned to the end. Scroll the middle of the grid sideways and both stay put.

The code

A dozen rows and twelve month columns are wider than the screen, so the region column stays readable while the months scroll underneath it and the total stays readable on the right.

const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
  rowKey: 'region',
  columns: [
    { field: 'region', title: 'Region', layout: { pin: 'start', width: 190 } },
    // ... the columns that scroll ...
    { field: 'total', title: 'Total', layout: { pin: 'end', width: 150 } },
  ],
  rows,
});

Try the standalone page or read the full source on GitHub, loaded by script tag with no build step.

Two things to know

• Pinning is set per column, not once for the whole grid: a leading identifier takes 'start' and a trailing column, such as row actions or a total, takes 'end'.
• Only the unpinned centre columns are virtualised out of the DOM as they scroll off screen, so adding pinned columns does not change how many rows the grid holds before scrolling slows down.

See the full pinned columns demo for a larger dataset with both edges pinned, or the columns and cell rendering guide for everything else a column definition can do.