Lattice Grid Buy a licence

demo D116

Keyboard only

The whole grid driven without a mouse, keys shown as pressed

one tab stop · roving focus

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',
    edit: true,
    columns: [
      { field: 'service', title: 'Service', layout: { width: 150 } },
      { field: 'team', title: 'Team', edit: true },
      { field: 'region', title: 'Region', edit: true },
      { field: 'instances', title: 'Instances', type: 'number', edit: true },
      { field: 'monthlyCost', title: 'Monthly cost', type: 'number', format: { style: 'currency', currency: 'USD' }, edit: true },
    ],
    rows,  // 5,000 service records
  });
</script>

Operating the whole grid from the keyboard, with one tab stop

Keyboard-only operation means every action available with a mouse, opening a filter menu, resizing a column, editing a cell, selecting a range, has a keyboard equivalent, and the whole grid takes a single tab stop from the surrounding page. A developer reaches for this when the application must pass a keyboard-only accessibility audit, or when a user prefers not to leave the keyboard for high-volume data entry. Lattice Grid implements roving focus, listed against this demo as one tab stop · roving focus: tab moves focus into the grid once, and arrow keys then move a single logical focus point between cells, rows and headers, rather than tabbing through every cell in turn as a naive implementation would. This matters at scale, because a JavaScript data grid with thousands of cells and one tab stop per cell would make keyboard navigation impractical before a screen reader or a compliance checklist came into it. The same roving focus index decides which cell receives Enter, Space, F2 and the arrow keys, so an editor opens, a checkbox toggles, or a selection extends from exactly the cell a sighted keyboard user would expect, with the pressed key shown on screen for this demo so the mapping is visible rather than asserted. None of this depends on a mouse event firing.

How do you make a JavaScript data grid fully keyboard accessible?

Give the grid a single tab stop and move an internal focus position with arrow keys rather than binding tab to every cell, a pattern known as roving focus. Lattice Grid does this by default: tabbing in and out of the grid crosses the surrounding page in one step each way, and arrow keys, Enter, Space and F2 drive navigation, selection and editing from that same focus position without a pointer.

Related demos