demo D20
The built-in types
text, number, date, boolean, lookup, object, image, one column each
type: 'number' | 'date' | …
The configuration
import * as ng from '@angular/core';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import createLatticeGrid from '@toclocoinc/lattice-grid/modules/angular';
const { LatticeGridComponent } = createLatticeGrid({ ng, createGrid });
const SITES = [
{ id: 1, label: 'Aberdeen edge', variant: 'neutral', group: 'Edge' },
{ id: 3, label: 'London core', variant: 'success', group: 'Core' },
{ id: 5, label: 'Slough transit', variant: 'info', group: 'Transit' },
{ id: 7, label: 'Retired rack', variant: 'danger', group: 'Core', disabled: true },
];
// One column per built-in type, and nothing else configured. The type is doing
// all of it: the alignment, the filter offered, the editor the cell opens, the
// comparator the header uses and the text you read.
const 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 && a.model || '').localeCompare(String(b && b.model || '')),
} },
{ field: 'config', title: 'Config (json)', type: 'json', layout: { width: 260 } },
{ field: 'apiKey', title: 'Key (secret)', type: 'secret', layout: { width: 150 } },
];
const rows = [/* 5,000 node records, a field per type */];
@Component({
selector: 'app-root',
standalone: true,
imports: [LatticeGridComponent],
template: '<lattice-grid [config]="grid" style="display:block;height:540px"></lattice-grid>',
})
export class AppComponent {
grid = {
rowKey: 'id',
toolPanel: { side: 'left', panels: ['columns', 'filters', 'views', 'quick'],
actions: ['undo', 'redo', 'export', 'restore', 'maximise'], exportName: 'lattice-demo' },
columns: columns,
rows: rows,
};
}
bootstrapApplication(AppComponent);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.