Lattice Grid Buy a licence

demo D50

Single and multi-column: JavaScript Data Grid Demo

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

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

This grid sorts on a single click, cycling ascending, descending and unsorted, and shift-click adds a second column with an order index shown when it matters. It gives the first interaction most people try the behaviour they expect, across one or several columns at once.

Building…
Loading a live grid…

The configuration

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.min.css">
<script src="https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.min.js"></script>

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

<script>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    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' } },
    ],
    rows,  // 20,000 service records
  });
</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