Lattice Grid Buy a licence

demo D305

How much furniture to show in ESM

Heading controls, scrollbars and cell alignment, switched on screen

headerControls

Three switches over one grid: whether the heading controls appear on hover, stay put or disappear entirely; whether the scrollbars stay on screen; and whether cell content sits at the top, middle or bottom of its row.

Building…
Loading a live grid…

This is the ES module version. The grid is imported straight from a CDN as a module, the same configuration as the vanilla tab without a global script tag, so it drops into any bundler or a bare module script.

The configuration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.70.0/lattice-grid.min.css">

<div id="controls" style="display: flex; gap: 8px; margin-bottom: 10px"></div>
<div id="grid" style="height: 540px"></div>

<script type="module">
  import { createGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.70.0/lattice-grid.esm.min.js';

  // headerControls, as a default for every column. 'hover' reveals the sort
  // arrow, filter funnel and menu button on hover or keyboard focus; 'always'
  // keeps them visible; 'hidden' draws none of them but still shows a
  // read-only sort badge on a column that is actually sorted; 'none' goes
  // further and shows the title only, whatever the grid's state - not even
  // hidden's badge. Built for a NOC wall display, where a heading must never
  // change its own look however the dashboard driving it sorts or filters.
  const modes = ['hover', 'always', 'hidden', 'none'];
  let mode = 'hover';
  let grid;

  function build() {
    grid?.destroy?.();
    grid = createGrid(document.getElementById('grid'), {
      rowKey: 'id',
      headerControls: mode,
      columns: [
        { field: 'circuit', title: 'Circuit', layout: { pin: 'start', width: 190 }, filter: true },
        { field: 'region', title: 'Region' },
        { field: 'status', title: 'Status', filter: { type: 'set' } },
        { field: 'bandwidth', title: 'Bandwidth', type: 'number', filter: { type: 'number' } },
      ],
      rows,  // circuit records
    });
    // Sorted and filtered from the start, so hidden's read-only sort badge on
    // Bandwidth (present) versus none's bare title (absent) is the thing on
    // screen to compare, not something you have to go and cause first.
    grid.sort.set([{ col: 'bandwidth', dir: 'desc' }]);
    grid.filters.set({ col: 'status', op: 'eq', value: 'live' });
  }

  const bar = document.getElementById('controls');
  for (const m of modes) {
    const b = document.createElement('button');
    b.type = 'button';
    b.textContent = m;
    b.setAttribute('aria-pressed', String(m === mode));
    b.onclick = () => {
      mode = m;
      for (const btn of bar.children) btn.setAttribute('aria-pressed', String(btn.textContent === m));
      build();
    };
    bar.appendChild(b);
  }

  build();
</script>

Deciding how much furniture a data grid shows

A grid embedded in a product rarely wants the same amount of chrome as a grid on its own page. A dense read-only report wants clean headings; a table people sort and filter all day wants the controls in plain sight rather than hidden until hover; a dashboard panel on a machine with overlay scrollbars wants the scrollbars pinned so the amount of data below the fold is never a surprise. Lattice Grid puts each of those on a single configuration key, settable as a grid-wide default and overridable on an individual column.

Heading controls, the sort arrow, filter funnel and menu button, can be revealed on hover and keyboard focus, kept visible at all times, or drawn not at all. Hidden also takes them out of the tab order, which is the right behaviour for a heading that is genuinely just a label; sorting and filtering remain reachable from the tool panel and the keyboard, so hiding the furniture never removes the function. Scrollbars can follow the platform’s own behaviour or be kept on screen, on both axes or on one. Cell content can be aligned to the top, middle or foot of its row, which is what a tall row of wrapped text usually needs, and it applies uniformly including to rows that size themselves to their content unless a column opts out.

Each of these is unset or platform-default out of the box, so an existing grid renders exactly as it did until you ask for something different.

How do you keep a data grid’s sort and filter buttons always visible?

Set headerControls to always. The sort arrow, filter funnel and menu button stay on screen instead of appearing on hover. Set it to hidden for a heading that should be a plain label, or leave it on hover for the default behaviour. A column’s own setting overrides the grid’s.

How do you stop a data grid’s scrollbars from fading out?

Set scrollbars to always, which keeps both axes visible whether or not the pointer is over the grid. Pass an object naming each axis to pin only one of them, for example keeping the vertical bar while leaving the horizontal one to the platform.

Related demos