Lattice Grid Buy a licence

demo D137

Fullscreen Mode for a JavaScript Data Grid in htmx

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

grid.maximise

This grid expands to fill the viewport for a closer read, then restores the original layout with the same scroll and selection intact. It gives a dense dataset the whole screen when needed, without losing the reader's place on the way back.

Building…
Loading a live grid…

This is the htmx version. A server-rendered table is upgraded in place, so the page is readable before any script runs and gains the full grid when the module loads, which suits a progressively enhanced app.

The configuration

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.min.css">

<!-- A real, server-rendered table: readable with JavaScript off. data-field on
     each header names the column that cell becomes, and data-id on each row is
     the key the grid carries it under. -->
<table id="maximise-table" data-lattice-grid>
  <thead>
    <tr>
      <th data-field="service">Service</th>
      <th data-field="team">Team</th>
      <th data-field="owner">Owner</th>
      <th data-field="region">Region</th>
      <th data-field="active">Active</th>
      <th data-field="deprecated">Deprecated</th>
      <th data-field="version">Version</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="1"><td>svc-00001</td><td>Search</td><td>k.yilmaz</td><td>Malmö</td><td>false</td><td>false</td><td>1.2.10</td></tr>
    <tr data-id="2"><td>svc-00002</td><td>Mobile</td><td>m.svensson</td><td>Leeds</td><td>true</td><td>false</td><td>2.3.6</td></tr>
    <tr data-id="3"><td>svc-00003</td><td>Identity</td><td>j.okafor</td><td>Zürich</td><td>true</td><td>false</td><td>1.11.1</td></tr>
    <!-- the rest of the rows, rendered by your server -->
  </tbody>
</table>

<script type="module">
  import { hydrateTable } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/htmx.esm.min.js';

  // The markup carries the rows; a server-rendered table's column types are
  // declared in the config hydrateTable takes. The grid replaces the table
  // where it stood.
  const grid = hydrateTable(document.getElementById('maximise-table'), {
    selection: 'multiple',
    // The maximise action expands the grid to fill the screen from the rail;
    // Escape or the same button brings it back. Scroll position, the active
    // cell and the selection all survive the round trip in both directions.
    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 } },
    ],
  });
</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. To come back, press Escape, even with a cell inside the grid focused, or press the rail button again.

Related demos