Lattice Grid Buy a licence

demo D161

Grid state in a URL

Sort, filter and reorder, then share the whole arrangement as a short link

serialiseState() · restoreState()

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: 480px"></div>
<p>Shareable link: <code id="link"></code></p>

<script>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    selection: 'multiple',
    columns: [
      { field: 'ref', title: 'Invoice', layout: { pin: 'start', width: 140 } },
      { field: 'supplier', title: 'Supplier', layout: { flex: 1, min: 180 }, filter: { type: 'set' } },
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'quantity', title: 'Qty', type: 'number', layout: { width: 90 } },
      { field: 'amount', title: 'Amount', type: 'number', total: 'sum', layout: { width: 150 } },
    ],
    rows,  // your data
  });

  // A shared link rebuilds the view: if the page was opened with a ?view=, apply
  // it. restoreState reads the same string serialiseState writes below.
  const view = new URLSearchParams(location.search).get('view');
  if (view) LatticeGrid.restoreState(grid, view);

  // As the visitor sorts, filters or reorders, encode the state into the link.
  // The encoding is a diff against the grid's defaults, so an untouched grid is
  // a few characters and only what changed is carried.
  const link = document.getElementById('link');
  const show = () => {
    link.textContent = location.pathname + '?view=' + LatticeGrid.serialiseState(grid);
  };
  grid.on('state:changed', show);
  show();
</script>

A grid a person has sorted, filtered and reordered is a view they built, and the usual way to let them keep it is a saved view stored somewhere. serialiseState takes the other route: it encodes that whole arrangement, the sort, the filters, the column order and widths, the grouping and the selection, into a compact, URL-safe string. It is diffed against the grid’s own defaults first, so an untouched grid encodes to a few characters and only what the visitor actually changed is carried. restoreState reads the string back and rebuilds the view.

The grid above keeps that string live in the bar over it as you drive the grid, and the whole point is what it lets you do next: paste it into a URL. A colleague who opens that link sees exactly the grid you were looking at, because the page reads the ?view= on load and restores it, and none of it touched a server. The state is small enough to sit in a query string, honest enough to diff against the defaults rather than dump everything, and it is the same primitive the htmx module leans on to survive a swap.

How do you save and share a grid’s sort and filters in a URL?

Call serialiseState(grid) to get a short, URL-safe string of everything grid.state covers, and put it in the query string, for example ?view= followed by that value. On the next visit, read the parameter and pass it to restoreState(grid, value) to rebuild the sort, filters, column order and the rest. Because the encoding is a diff against the grid’s defaults, an unchanged grid is a handful of characters and the link only grows with what the user changed.

Related demos