demo D27
JSON and structured values
A nested object in a cell, summarised inline and expandable
type: 'json'
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 columns = [
{ field: 'hostname', title: 'Hostname', layout: { width: 260, pin: 'start' } },
{
field: 'config', title: 'Config', type: 'json', layout: { flex: 1, min: 260 },
// Short objects print in full; anything longer collapses to a count,
// because a cell that wraps six lines of JSON is not a cell. The full
// document is on the tooltip and in the editor.
cell: {
props: { inlineLimit: 44 },
tooltip: (p) => {
try { return JSON.stringify(p.value, null, 2); } catch { return ''; }
},
},
},
{
field: 'config', id: 'interfaces', title: 'Interfaces', type: 'json', layout: { width: 200 },
value: { deps: ['config'], pure: true, compute: (d) => d.config?.interfaces ?? null },
},
{
id: 'asn', title: 'BGP ASN', type: 'number', layout: { width: 130 },
// Pulling a leaf out of the document gives you a real number column: it
// sorts, it filters as a range, it totals. The object stays whole
// underneath.
value: { deps: ['config'], pure: true, compute: (d) => d.config?.bgp?.asn ?? null },
filter: { type: 'number' },
},
{
id: 'mtu', title: 'Max MTU', type: 'number', layout: { width: 130 },
value: {
deps: ['config'], pure: true,
compute: (d) => {
const list = d.config?.interfaces ?? [];
return list.length ? Math.max(...list.map((i) => i.mtu)) : null;
},
},
},
{
id: 'snmp', title: 'SNMP', layout: { width: 110 },
value: { deps: ['config'], pure: true, compute: (d) => d.config?.snmp?.version ?? null },
filter: { type: 'set' },
},
{ field: 'hardware', title: 'Hardware', type: 'json', layout: { width: 240 } },
];
const rows = [/* nodes, each with a nested config object */];
@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);Rendering nested JSON in a grid cell
Source data is not always flat. An order row might carry a shipping address as a nested object, or a user record might embed a permissions map, and a JavaScript data grid that only accepts scalars forces a flattening step before the data can be displayed at all. Lattice Grid’s type: 'json' column renders that structure directly: the cell shows a compact inline summary of the object, and expands on demand to a formatted, indented view of the full value, so nesting depth is never lost to a stringified blob. A developer reaches for this type wherever an API response is stored as-is rather than normalised into separate columns, which keeps the column definition stable even when the shape of the nested data grows a new key.
Because the summary is generated from the object rather than pre-rendered per row, a json column pays no layout cost until a cell is actually expanded: collapsed rows contribute a single-line label to the row height calculation, so a grid holding thousands of records with deeply nested payloads scrolls at the same frame rate as one holding plain strings. Expansion is keyboard-operable, so the nested view is reachable without a pointer, which matters for any grid built to pass an accessibility audit rather than merely look right under a mouse.
How do you display a JSON object in a data grid cell?
Set the column’s type to 'json'. Lattice Grid shows a condensed one-line summary of the object in the collapsed cell and an indented, formatted view when the cell is expanded, so nested values stay inspectable without a custom renderer or a separate detail panel.