demo D20
The built-in types
text, number, date, boolean, lookup, object, image, one column each
type: 'number' | 'date' | …
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>
// One column per built-in type, and nothing else configured. The types are
// doing all of it: the alignment, the filter offered, the editor the cell
// opens, the comparator the header uses and the text you see.
const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
rowKey: 'id',
toolPanel: {
side: 'left',
panels: ['columns', 'filters', 'views', 'quick'],
actions: ['undo', 'redo', 'export', 'restore', 'maximise'],
exportName: 'lattice-demo',
},
columns: [
{ field: 'hostname', title: 'Hostname (text)', type: 'text', layout: { width: 300, pin: 'start' } },
{ field: 'ports', title: 'Ports (number)', type: 'number', layout: { width: 130 } },
{ field: 'commissioned', title: 'Commissioned (dateString)', type: 'dateString', layout: { width: 190 } },
{ field: 'managed', title: 'Managed (boolean)', type: 'boolean', layout: { width: 140 } },
{
field: 'site', title: 'Site (lookup)', type: 'lookup', layout: { width: 180 },
lookup: { options: SITES, unknownLabel: 'decommissioned' },
},
{
field: 'hardware', title: 'Hardware (object)', type: 'object', layout: { width: 200 },
// `object` has no opinion about how your object reads, so left alone
// it prints [object Object]. One format function is the whole fix.
value: {
format: (p) => (p.value ? `${p.value.vendor} ${p.value.model}` : ''),
compare: (a, b) => String(a?.model ?? '').localeCompare(String(b?.model ?? '')),
},
},
{ field: 'config', title: 'Config (json)', type: 'json', layout: { width: 260 } },
{ field: 'apiKey', title: 'Key (secret)', type: 'secret', layout: { width: 150 } },
],
rows, // an array of node objects
});
</script>Declaring a column’s built-in type
A JavaScript data grid has to decide how a column sorts, filters and renders long before it draws a single cell, and the type option is where that decision lives. Lattice Grid ships seven built-in types, set per column with type: 'text' | 'number' | 'date' | 'boolean' | 'lookup' | 'object' | 'image', and each one brings its own comparator, its own default alignment and its own cell renderer, so a number column sorts and right-aligns numerically without a custom comparator, a date column parses and compares by calendar order rather than string order, and a boolean column renders a checkbox instead of the literal word “true”. A developer reaches for an explicit type the moment a column’s shape is known ahead of time, which is most columns in most production grids, because declaring it once removes any ambiguity that a generic renderer would otherwise have to guess at row by row.
lookup and object cover the two cases plain text cannot: lookup maps a stored code to a display label from a supplied list, useful for status fields or foreign keys, while object hands the cell a structured value and a renderer function for anything that does not reduce to a single scalar. image renders a URL as a thumbnail rather than as text. Type resolution happens once at column setup, not per cell, so a grid with hundreds of thousands of rows carries no runtime cost for having declared its types explicitly rather than left them to be inferred.
What column types does a JavaScript data grid support out of the box?
Lattice Grid’s built-in types are text, number, date, boolean, lookup, object and image, set per column with type: 'text' | 'number' | 'date' | …. Each type supplies its own default comparator, alignment and cell renderer, covering plain values, coded lookups, structured objects and thumbnails without custom configuration.