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

import * as ng from '@angular/core';
import { Component, ViewChild, AfterViewInit, OnDestroy } 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: '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 } },
];

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LatticeGridComponent],
  template: '<lattice-grid [config]="grid" style="display:block;height:540px"></lattice-grid>',
})
export class AppComponent implements AfterViewInit, OnDestroy {
  @ViewChild(LatticeGridComponent) gridRef!: LatticeGridComponent;

  grid = {
    rowKey: 'id',
    selection: 'multiple',
    toolPanel: { side: 'left', panels: ['columns', 'filters', 'views'],
      actions: ['undo', 'redo', 'restore', 'maximise', '-', 'export'], exportName: 'lattice-demo' },
    columns,
    rows: [/* 20,000 service records */],
  };

  // The maximise button on the rail is the whole feature. What this shows is what
  // survives the round trip: a scroll position and a selection set on arrival are
  // both still there after you maximise and restore.
  ngAfterViewInit() {
    const grid = this.gridRef.grid;
    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');
  }

  ngOnDestroy() {
    const grid = this.gridRef?.grid;
    if (grid?.maximise?.active?.()) grid.maximise.exit();
  }
}

bootstrapApplication(AppComponent);

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