Lattice Grid Buy a licence

demo D115

Density

compact through spacious, with the row height following the token

density: 'comfortable'

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="controls">
  <button data-density="compact">Compact</button>
  <button data-density="standard">Standard</button>
  <button data-density="comfortable">Comfortable</button>
  <button data-density="spacious">Spacious</button>
</div>
<div id="grid" style="height: 540px; margin-top: 8px"></div>

<script>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    selection: 'multiple',
    density: 'standard',   // 'compact' | 'standard' | 'comfortable' | 'spacious', or a number
    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 } },
    ],
    rows,  // 5,000 service records
  });

  // Switch the spacing at runtime, on the one grid.
  for (const b of document.querySelectorAll('#controls button')) {
    b.onclick = () => grid.set('density', b.dataset.density);
  }
</script>

Setting row density with a single token

Density is the control most JavaScript data grid users touch before anything else, because it decides how many rows fit on screen without a scrollbar. Lattice Grid exposes it as one setting, density: 'comfortable', with compact and spacious as the other named steps, rather than as CSS a team has to author and maintain against the grid’s own layout. Row height, cell padding and the size of icon-only controls all read from the same density token, so a change to it is consistent across every column type and renderer instead of a patchwork of overrides that drift out of sync after a redesign. A developer reaches for compact when a screen holds a trading blotter or an admin table that benefits from more rows per scroll, and for spacious when the audience is scanning rather than transacting, or when a touch target needs more room to hit reliably. Because the row height is derived rather than hard-coded, switching density at runtime does not require a rebuild of the grid’s DOM or a manual recalculation of scroll offsets: the grid recomputes row heights and keeps the current scroll position and selection intact. This keeps density compatible with theming and with saved views, so a user’s preferred setting persists the same way a colour theme does.

How do I change row height in Lattice Grid?

Set the density option to 'compact', 'comfortable' or 'spacious' when configuring the grid, or call the equivalent runtime method to switch it after the grid exists. Row height, cell padding and control sizing all follow the token, so there is no need to set an explicit pixel height unless a row’s content requires it.

Related demos