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.27.0/lattice-grid.min.css">
<style>
#grid > div { height: 540px; }
</style>
<div id="grid"></div>
<script type="module">
import * as Vue from 'https://esm.sh/vue@3';
import { createGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/lattice-grid.esm.min.js';
import createLatticeGrid from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/modules/vue.esm.min.js';
const LatticeGrid = createLatticeGrid({ vue: Vue, createGrid });
Vue.createApp({
components: { LatticeGrid },
data() {
return {
config: {
rowKey: 'id',
// One column per built-in type, and nothing else configured. Each type
// brings its own alignment, filter, editor, comparator and text.
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: [
{ id: 3, label: 'London core' },
{ id: 4, label: 'Manchester core' },
{ id: 5, label: 'Slough transit' },
{ id: 6, label: 'Zurich transit' },
],
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, // 5,000 node records, one field per type
},
};
},
template: '<lattice-grid v-bind="config" />',
}).mount('#grid');
</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.