demo D59
Cross-filtering, done properly
Why a column is never counted against its own filter
pruneColumn()
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>
const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
rowKey: 'id',
toolPanel: { side: 'left', panels: ['filters', 'columns'], actions: ['restore'], exportName: 'lattice-demo' },
facets: { enabled: true, collapsed: false, height: 46 },
// Service and Created are left out: neither makes a readable histogram here.
columns: [
{ field: 'team', title: 'Team', filter: { type: 'set' } },
{ field: 'tier', title: 'Tier', filter: { type: 'set' } },
{ field: 'state', title: 'State', filter: { type: 'set' } },
{ field: 'region', title: 'Region', filter: { type: 'set' } },
{ field: 'errorRate', title: 'Error rate', type: 'number', format: { style: 'percent', decimals: 2 }, filter: { type: 'number' } },
{ field: 'monthlyCost', title: 'Monthly cost', type: 'number', layout: { width: 160 },
format: { style: 'currency', currency: 'USD' }, total: 'sum', filter: { type: 'number' } },
{ field: 'lastDeploy', title: 'Last deploy', type: 'dateString', filter: { type: 'date' } },
],
// Opens with Tier filtered: a column is counted against every filter
// except its own, so the Tier chart still shows silver and bronze while
// every other chart shows only what survives.
state: { version: 1, filters: { col: 'tier', op: 'in', value: ['gold'] } },
rows, // 20,000 service records
});
</script>Cross-filtering without a column excluding itself
Cross-filtering is the pattern behind a set filter’s checkbox counts: each column’s option list shows how many rows would remain if that value were picked, computed against every other active filter in the grid. The defect a naive implementation falls into is counting a column against its own filter, so narrowing “region” to a single value collapses that same column’s checkbox counts to just the rows already matching it, leaving every other option showing zero. Lattice Grid avoids this with pruneColumn(), which excludes the named column from the filter set before recomputing counts for it, so a user filtering “status” still sees accurate candidate counts for every status value, not just the one currently selected. A developer reaches for this whenever a JavaScript data grid exposes faceted filtering across several related columns and the counts need to stay honest as each filter narrows the rows further. The recomputation runs against the column’s dictionary-encoded values rather than rescanning raw cell text, so refreshing counts across a handful of filtered columns on a grid with hundreds of thousands of rows stays within a frame budget. Each updated count is written into the same labelled checkbox already announced to a screen reader, so the assistive-technology state changes with the numbers rather than needing a separate live region.
Why do my filter counts drop to zero when I select a value?
That happens when a column is counted against its own active filter: selecting one value leaves only rows matching it, so every other option in that same column’s list reads zero. Call pruneColumn() for the column being recomputed so its own filter is excluded before counts are rebuilt, which is what keeps cross-filtering counts accurate across columns.