Lattice Grid Buy a licence

demo D137

Maximise

Full-screen a grid and come back to the same scroll and selection

grid.maximise

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'],
      exportName: 'lattice-demo',
      actions: ['undo', 'redo', 'restore', 'maximise', '-', 'export'],
    },
    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,  // wide service rows
  });

  // A scroll position and a selection survive the round trip. Set them, then
  // maximise, and the same rows are still selected in a taller grid; restore,
  // and the scroll is where it was rather than back at the top.
  const keys = [120, 121, 122, 123].map((i) => grid.rows.get(i)?.key).filter(Boolean);
  if (keys.length) grid.selection.set(keys);
  grid.scroll.toRow(118, 'start');

  // maximise is an API as well as a rail button. active() reports the state.
  console.log('maximised:', grid.maximise.active());
  grid.maximise.enter();  // full screen; Escape or the same button comes back
  grid.maximise.exit();
</script>

Maximising a grid to full screen without losing scroll position or selection

Maximise expands a JavaScript data grid to fill the viewport, giving a dense dataset the full screen for a closer read, then restores the original layout on the way back. Reach for this whenever a grid is embedded in a narrow card or a dashboard tile and a user needs more rows and columns visible at once, such as scanning a wide report or comparing values across a long selection, without navigating to a separate page. Lattice Grid exposes this through grid.maximise, a method call rather than a persistent layout mode, so an application can trigger it from a toolbar button, a keyboard shortcut, or the chrome the grid renders for itself.

Scroll position, the active cell, and any selected range carry across the transition in both directions: entering full screen preserves exactly where the viewport was and what was selected, and returning to the embedded layout restores the same state rather than resetting to the top-left cell. This matters because a user maximising a grid mid-comparison expects to keep their place rather than re-find it. The expanded view still virtualises rows and columns the same way the embedded grid does, so maximising a grid holding a million rows costs no more in memory or render time than the equivalent viewport size would anywhere else in the layout.

How do you make a data grid full screen?

Call grid.maximise to expand the grid to fill the viewport. Lattice Grid keeps the current scroll position, active cell, and selection intact through the transition, and restores that same state when the grid returns to its embedded size. No extra bookkeeping is needed in the host application to track where the user was before the switch.

Related demos