Lattice Grid Buy a licence

demo D50

Single and multi-column in htmx

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…

This is the htmx version. A server-rendered table is upgraded in place, so the page is readable before any script runs and gains the full grid when the module loads, which suits a progressively enhanced app.

The configuration

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

<!-- A real, server-rendered table: readable with JavaScript off. data-field on
     each header names the column that cell becomes, and data-id on each row is
     the key the grid carries it under. -->
<table id="sorting-table" data-lattice-grid>
  <thead>
    <tr>
      <th data-field="service">Service</th>
      <th data-field="team">Team</th>
      <th data-field="tier">Tier</th>
      <th data-field="instances">Instances</th>
      <th data-field="p95Ms">p95 ms</th>
      <th data-field="monthlyCost">Monthly cost</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="1"><td>svc-00001</td><td>Search</td><td>silver</td><td>49</td><td>140</td><td>37920.55</td></tr>
    <tr data-id="2"><td>svc-00002</td><td>Mobile</td><td>bronze</td><td>162</td><td>427</td><td>30070.04</td></tr>
    <tr data-id="3"><td>svc-00003</td><td>Identity</td><td>silver</td><td>20</td><td>476</td><td>36278.48</td></tr>
    <!-- the rest of the rows, rendered by your server -->
  </tbody>
</table>

<script type="module">
  import { hydrateTable } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/htmx.esm.min.js';

  // Click a header to sort by that column; shift-click a second header to add a
  // tiebreaker, so the list orders by the first and settles ties by the next.
  // The markup carries the rows; a server-rendered table's column types are
  // declared in the config hydrateTable takes. The grid replaces the table
  // where it stood.
  const grid = hydrateTable(document.getElementById('sorting-table'), {
    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' } },
    ],
  });
</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