demo D155
Column tags
Tag columns, then show only the ones carrying a chosen tag
columnTagFilter · column.tags
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>
// Sixty monthly columns, one per month across five years, each tagged with
// its year and quarter. Building them in a loop, tags and all, lets the tag
// filter show only the twelve months of a chosen year.
const years = [2024, 2025, 2026, 2027, 2028];
const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
const columns = [{ field: 'account', title: 'Account', layout: { pin: 'start', width: 180 } }];
for (const y of years) {
for (let mi = 0; mi < 12; mi++) {
columns.push({
field: `m${y}_${months[mi]}`,
title: `${months[mi]}/${String(y).slice(2)}`,
type: 'number',
layout: { width: 94 },
format: { style: 'currency', currency: 'USD', notation: 'compact' },
tags: [String(y), `Q${Math.floor(mi / 3) + 1}`],
});
}
}
columns.push({
field: 'total', title: 'Total', type: 'number', layout: { width: 120 },
format: { style: 'currency', currency: 'USD', notation: 'compact' }, total: 'sum',
});
const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
rowKey: 'id',
columnTagFilter: true,
columns,
rows, // one row per account, sixty monthly figures each
});
</script>Filtering columns by tag
Column tags label columns with keywords, then let a user show only the columns carrying a chosen tag. A developer reaches for this when a grid has far more columns than anyone needs at once and those columns fall into natural sets: sixty monthly columns spanning five years, where tagging each with its year turns the choice of a year into a view of twelve columns; or a wide table where columns are tagged by department, metric type, or audience. Lattice Grid takes tags on each column definition and drives the picker with columnTagFilter, which offers the available tags and shows only the columns whose tags match the current choice. As a JavaScript data grid, hiding columns changes which cells are rendered rather than merely styling them away, so narrowing sixty columns to twelve means the grid renders and measures twelve, keeping horizontal scrolling and layout light. The tag picker is a labelled control reachable from the keyboard, and changing the visible set updates the column count reported to assistive technology, so a screen reader user knows how many columns the grid now presents.
How do I let users show only certain columns in a data grid?
Add tags to each column definition, then enable columnTagFilter. The filter offers the available tags and shows only the columns carrying the chosen one, so a wide grid can be narrowed to a relevant set, such as picking a single year out of five years of monthly columns. Hidden columns are not rendered, which keeps a wide grid light.