demo D05
Column defaults and presets
Declaring shared column behaviour once, used by six columns
columnDefaults · columnPresets
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',
// Turned on for every column once, rather than repeated on each.
columnDefaults: { filter: true, sort: true },
// Named bundles of column settings. A column says `preset: 'money'` instead
// of repeating the type, the format and the total.
columnPresets: {
money: {
type: 'number',
format: { style: 'currency', currency: 'USD' },
total: 'sum',
layout: { width: 150 },
},
latency: { type: 'number', layout: { width: 100 }, format: { suffix: ' ms' } },
},
columns: [
{ field: 'service', title: 'Service', layout: { pin: 'start', width: 140 } },
{ field: 'team', title: 'Team' },
{ field: 'monthlyCost', title: 'Monthly cost', preset: 'money' },
{ field: 'budget', title: 'Budget', preset: 'money' },
{ field: 'p50Ms', title: 'p50', preset: 'latency' },
{ field: 'p95Ms', title: 'p95', preset: 'latency' },
{ field: 'p99Ms', title: 'p99', preset: 'latency' },
],
rows, // your data
});
</script>Shared column behaviour with defaults and presets
columnDefaults sets the properties every column inherits before its own definition overrides them: alignment, a comparator, a formatter, whether the column is sortable at all. A developer reaches for it once a grid grows past three or four columns and the same type: 'number' or align: 'right' starts repeating across every one of them, because a JavaScript data grid with thirty numeric columns should not need thirty repeated option blocks to behave consistently. columnPresets goes a step further, naming a bundle of options once and applying that name to any column that wants it, so a 'currency' preset can set the formatter, alignment and width in one place and six columns can each declare preset: 'currency' and nothing else. Change the preset and all six move together; that single point of change is the practical argument for defaults over per-column repetition, not just less typing. Defaults and presets both resolve before a column’s own explicit settings, so a column can take everything from a preset and override just one field, such as width, without redeclaring the rest. Resolution happens once when the grid initialises rather than per cell, so the saving is in configuration size and consistency, not render cost.
How do I avoid repeating the same column options in a data grid?
Set the shared options once in columnDefaults, or name a bundle of them with columnPresets and reference that name from each column. Columns still declare their own field and anything that differs, but formatter, alignment, sortability and similar options only need writing once. Lattice Grid merges defaults, the named preset, and the column’s own settings in that order before the grid renders.