Lattice Grid Buy a licence

demo D03

Thirty columns, thirty types

The realistic wide grid: text, numbers, dates, booleans, all at once

columns: [{ type: … }]

Building…
Loading a live grid…

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>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    selection: 'multiple',
    toolPanel: {
      side: 'left',
      panels: ['columns', 'filters', 'views', 'quick'],
      actions: ['undo', 'redo', 'export', 'restore', 'maximise'],
      exportName: 'services',
    },
    columns: [
      { field: 'service', title: 'Service', layout: { pin: 'start', width: 140 } },
      { field: 'team', title: 'Team', filter: { type: 'set' } },
      { field: 'owner', title: 'Owner', filter: { type: 'set' } },
      { field: 'tier', title: 'Tier',
        cell: { decoration: 'pill', variant: { map: { gold: 'warning', silver: 'neutral', bronze: 'info' } } } },
      { field: 'state', title: 'State',
        cell: { decoration: 'dot', variant: { map: { healthy: 'success', degraded: 'warning', failing: 'danger', unknown: 'neutral' } } } },
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'active', title: 'Active', type: 'boolean' },
      { field: 'deprecated', title: 'Deprecated', type: 'boolean' },
      { field: 'version', title: 'Version', layout: { width: 100 } },
      { field: 'instances', title: 'Instances', type: 'number' },
      { field: 'cpuCores', title: 'vCPU', type: 'number' },
      { field: 'memoryGb', title: 'Memory GB', type: 'number' },
      { field: 'diskBytes', title: 'Disk', type: 'number', format: { notation: 'compact' } },
      { field: 'requests', title: 'Requests', type: 'number', format: { notation: 'compact' } },
      { field: 'errors', title: 'Errors', type: 'number' },
      { field: 'errorRate', title: 'Error rate', type: 'number', format: { style: 'percent', decimals: 2 } },
      { field: 'p50Ms', title: 'p50 ms', type: 'number' },
      { field: 'p95Ms', title: 'p95 ms', type: 'number' },
      { field: 'p99Ms', title: 'p99 ms', type: 'number' },
      { field: 'uptime', title: 'Uptime', type: 'number', format: { style: 'percent', decimals: 3 } },
      { field: 'monthlyCost', title: 'Monthly cost', type: 'number', format: { style: 'currency', currency: 'USD' }, total: 'sum' },
      { field: 'budget', title: 'Budget', type: 'number', format: { style: 'currency', currency: 'USD' }, total: 'sum' },
      { field: 'headcount', title: 'Headcount', type: 'number', total: 'sum' },
      { field: 'openIncidents', title: 'Incidents', type: 'number', total: 'sum' },
      { field: 'lastDeploy', title: 'Last deploy', type: 'dateString' },
      { field: 'created', title: 'Created', type: 'dateString' },
      { field: 'slaTarget', title: 'SLA', type: 'number', format: { style: 'percent', decimals: 2 } },
      { field: 'onCall', title: 'On call' },
      { field: 'repository', title: 'Repository', layout: { width: 260 } },
      { field: 'notes', title: 'Notes' },
    ],
    rows,  // 20,000 service records
  });
</script>

Configuring thirty columns of mixed types in one JavaScript data grid

Most production grids are not ten narrow text columns; they are a wide record with text, numbers, dates, booleans and the odd nested object side by side, each needing its own comparator, formatter and editor. This demo declares thirty such columns through the columns array, where each entry is an object with a type (columns: [{ type: … }]), so a date column sorts as a date and a boolean renders as a checkbox without extra wiring. Reach for this pattern whenever a dataset arrives already typed, rather than as a flat table of strings, and the grid needs to carry that typing through sorting, filtering and export rather than re-deriving it at render time.

Only the columns inside the visible horizontal band are mounted as DOM cells; the rest exist as data, not markup, so scrolling sideways across thirty columns does not mean thirty columns of live layout work at every frame. Keyboard navigation moves cell to cell across the full set with a single tab stop into the grid, and each header carries the row and column indices a screen reader needs to announce position correctly. A grid at thirty columns behaves the same as one at three, because the type information is declared once, per column, rather than inferred or hand-formatted per cell.

How do you configure column types in a JavaScript data grid?

Each entry in the columns array takes a type, such as 'text', 'number', 'date' or 'boolean', and the grid picks the matching comparator, formatter and default editor for that type. Shared behaviour across several columns is set once in columnDefaults rather than repeated on every entry, which keeps a thirty-column configuration readable and easy to audit for consistency.

Related demos