demo D55
Set filters
Checkbox lists over distinct values, on a dictionary-encoded column
filter: 'set'
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: 540px"></div>
<script>
// Set filters on the low-cardinality columns: a checklist of the values
// present, each with its count.
const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
rowKey: 'id',
toolPanel: { side: 'left', panels: ['filters', 'columns'], actions: ['restore'], exportName: 'lattice-demo' },
columns: [
{ 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' },
],
rows, // 10,000 cloud cost rows
});
</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.