Lattice Grid Buy a licence

demo D55

Set filters in htmx

Checkbox lists over distinct values, on a dictionary-encoded column

filter: 'set'

This grid presents a column's distinct values as a checkbox list, the pattern spreadsheet users already know. It lets a reader tick the categories they want from a column of statuses or regions, and stays fast because the column is dictionary-encoded.

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="set-filters-table" data-lattice-grid>
  <thead>
    <tr>
      <th data-field="account">Account</th>
      <th data-field="service">Service</th>
      <th data-field="resource">Resource</th>
      <th data-field="region">Region</th>
      <th data-field="change">Change</th>
      <th data-field="cost">Monthly cost</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="1"><td>Legacy (Do Not Decommission)</td><td>Relational Database</td><td>legacy-nat-delete-after-friday</td><td>us-east-1</td><td>-0.0468</td><td>31612.55</td></tr>
    <tr data-id="2"><td>Cost Optimisation Programme</td><td>Elastic Compute</td><td>tmp-jumpbox-03</td><td>us-east-1</td><td>0.1143</td><td>6109.09</td></tr>
    <tr data-id="3"><td>Data &amp; Insights</td><td>Block Storage</td><td>test-api-terraform-imported-by-hand</td><td>us-east-1</td><td>0.1082</td><td>42.69</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';

  // 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('set-filters-table'), {
    toolPanel: { side: 'left', panels: ['filters', 'columns'], actions: ['restore'], exportName: 'lattice-demo' },
    columns: [
      // A set filter offers a checklist of a column's values: tick the ones to
      // keep. It suits the columns with a small, repeating set of values.
      { field: 'account', title: 'Account', filter: { type: 'set' } },
      { field: 'service', title: 'Service', filter: { type: 'set' } },
      { field: 'resource', title: 'Resource', layout: { flex: 1, min: 200, max: 320 } },
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'environment', title: 'Env', filter: { type: 'set' },
        cell: { decoration: 'pill', variant: { map: {
          prod: 'danger', 'prod-2': 'danger', 'definitely-prod': 'danger',
          staging: 'warning', untagged: 'warning', test: 'info',
          dev: 'success', 'not-prod': 'neutral',
        } } } },
      { field: 'change', title: 'Change', type: 'number', layout: { width: 140, min: 140 },
        format: { style: 'percent', decimals: 1 } },
      { field: 'cost', title: 'Monthly cost', type: 'number', layout: { width: 170 },
        format: { style: 'currency', currency: 'USD', decimals: 2 }, total: 'sum' },
    ],
  });
</script>

Filtering a column by its distinct values with checkbox set filters

A set filter presents every distinct value in a column as a checkbox list, the pattern most spreadsheet users already know from filtering a column of statuses, categories or regions. In Lattice Grid it is one of the operators the filter menu offers per column, switched on with filter: 'set', and it reads best against a column with a small, bounded number of distinct values rather than free text or continuous numbers. A developer reaches for it wherever a column is effectively an enumeration: order status, region, department, priority. The column backing a set filter is dictionary-encoded, meaning each distinct string is stored once and rows hold a small integer reference to it, so building the checkbox list is a lookup over the dictionary rather than a scan of every row, and toggling a value re-evaluates the filter against those integer references instead of comparing strings. That keeps the list responsive on a column with a few hundred thousand rows behind it, in a JavaScript data grid where the filter menu has to open and populate within a frame to feel attached to the click that opened it. The checkbox list is keyboard-navigable and each entry is a labelled checkbox, so a screen reader announces the option and its checked state without extra markup from the host application.

How do I filter a column by a list of checked values?

Set filter: 'set' on the column definition. Lattice Grid builds the checkbox list from the column’s distinct values automatically, so no list of options needs to be supplied separately, and the result composes with any other filter already applied to the grid. See the step-by-step how to add a set filter to a column guide for a runnable example and the source on GitHub.

Related demos