Lattice Grid Buy a licence

demo D50

Single and multi-column

Click, shift-click, and the order index that appears when it means something

sort.set([{ col, dir }])

Building…
Loading a live grid…

The configuration

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

<div id="grid"></div>

<script type="module">
  import React from 'https://esm.sh/react@18';
  import { createRoot } from 'https://esm.sh/react-dom@18/client';
  import { createGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/lattice-grid.esm.min.js';
  import createLatticeGrid from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/modules/react.esm.min.js';

  const LatticeGrid = createLatticeGrid({ React, createGrid });

  // Click a header to sort by it; shift-click a second header to sort by that
  // one within the first. Numbers order as numbers and text collates in the
  // reader's own locale.
  const columns = [
    { field: 'service', title: 'Service', layout: { pin: 'start', width: 140 } },
    { field: 'team', title: 'Team', filter: { type: 'set' } },
    { field: 'tier', title: 'Tier' },
    { field: 'instances', title: 'Instances', type: 'number' },
    { field: 'p95Ms', title: 'p95 ms', type: 'number' },
    { field: 'monthlyCost', title: 'Monthly cost', type: 'number', format: { style: 'currency', currency: 'USD' } },
  ];

  const rows = [/* 20,000 service records */];

  function App() {
    return (
      <LatticeGrid
        rowKey="id"
        columns={columns}
        rows={rows}
        style={{ height: '540px' }}
      />
    );
  }

  createRoot(document.getElementById('grid')).render(<App />);
</script>

Single and multi-column sorting

Sorting is the first interaction most people try on any JavaScript data grid, so it has to read correctly from a single click: ascending, then descending, then unsorted, with an arrow in the header showing which. Lattice Grid drives this through sort.set([{ col, dir }]), taking one entry for a single sort or several for a multi-column sort, ordered by priority. Click a header to sort by that column alone; shift-click a second header to add it as a tiebreaker without disturbing the first. With more than one column active, each sorted header shows a small order index beside its arrow, so a user can see the grid is sorted by region first and revenue second, rather than guessing from result order.

A developer reaches for the explicit sort.set call when restoring a saved view, applying a default sort on load, or driving sort from a toolbar control outside the header. Sort state is a plain array of { col, dir } pairs, so it serialises directly to a URL parameter or a saved-view record and reapplies on the next visit without replaying clicks. Sorting runs against the full row set, not only the rows currently rendered, so a reorder in a grid of a million rows repositions the visible window without re-rendering rows that never left the store.

How do you sort by more than one column in a JavaScript data grid?

Shift-click a second column header after sorting the first; Lattice Grid adds it as a secondary sort key and shows an order index in each active header. Programmatically, call sort.set([{ col: 'region', dir: 'asc' }, { col: 'revenue', dir: 'desc' }]) to set the same multi-column order directly, useful when restoring a saved view or applying a default sort on load.

Related demos