developer guide
Column Tags in a JavaScript Data Grid
A tag marks what a column is for, and a set of columns can then be shown or hidden together. On a table with a hundred fields that turns column visibility from a long checklist into one choice.
Developer guide › Columns and cell rendering › Column Tags in a JavaScript Data Grid
Column tags
Tag columns, then let a user show only the ones carrying a chosen tag. Sixty columns of monthly figures across five years become twelve by picking a year.
Five years of months, filtered to one
createGrid(element, {
columns: [
{ field: 'account', title: 'Account' }, // no tags
{ field: 'jan24', title: '01/24', tags: ['2024', 'Q1'] },
{ field: 'feb24', title: '02/24', tags: ['2024', 'Q1'] },
// …
{ field: 'total', title: 'Total' }, // no tags
],
rows,
columnTagFilter: true,
});Only tagged columns are ever hidden. That is the rule the whole feature turns on. A financial grid with sixty month columns also has an account name, a total and a variance, and none of those belong to a year: if filtering hid them the view would be useless, and tagging every column merely to keep it visible would be busywork. So "show 2024" does not mean "hide everything else"; it means "hide tagged columns that are not 2024".
The same rule runs the other way: an untagged column you hid yourself stays hidden, because forcing it visible would undo a decision that has nothing to do with tags.
A column can carry more than one tag, which gives you a second axis for free: tag each month
with its year and its quarter, and a user can pick either. The dropdown lists tags in
the order they were declared rather than alphabetically, since they are usually already in a
meaningful sequence and sorting would put Q10 before Q2.
| Member | Does |
|---|---|
| columns.tags() | Every distinct tag, in declaration order. |
| columns.showTagged(tags) | Show only the columns carrying one of these. Nothing, or an empty list, shows all. Returns the ids it hid. |
| columns.activeTags() | What is being shown, empty when all are. |
| columns:tagged | Fired with { tags, hidden }. |