demo D20
The built-in types: JavaScript Data Grid Demo
text, number, dateString, boolean, lookup, object, json, secret and image, one column each
type: 'number' | 'date' | …
This grid puts one column of each built-in type side by side: text, number, date, boolean, lookup, object, json, secret and image. It shows that a type is not just a label, it decides how each column sorts, filters, renders and edits, so you pick the behaviour rather than building it.
The configuration
<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.min.css">
<script src="https://cdn.latticegrid.dev/lattice-grid@1.103.2/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 a broad set of built-in types, set per column with type, 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 dateString 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. json holds a nested document whole and summarises it inline, secret masks a sensitive value in the cell, and 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 ships a broad set of built-in types, set per column with type: 'text' | 'number' | …. This example lays out one column for each of text, number, dateString, boolean, lookup, object, json, secret and image, and each supplies its own default comparator, alignment and cell renderer, covering plain values, coded lookups, structured objects, masked secrets and thumbnails without custom configuration.