Lattice Grid Buy a licence

demo D133

The action rail

The grouped control rail down the edge of the grid

tool panel dock · rail actions

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', 'quick'],
      exportName: 'lattice-rail-demo',
      // The whole rail, in the grid's own order. The bare '-' is a divider,
      // a member of the list rather than something the grid inserts, so the
      // exports (whose effect leaves the page) sit apart from the rest.
      actions: [
        'undo', 'redo', 'pause', 'restore', 'maximise', '-',
        'export', 'excel', 'clipboard', 'print',
      ],
    },
    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 } },
      { field: 'instances', title: 'Instances', type: 'number' },
    ],
    rows,  // service records
  });
</script>

Docking grouped controls to the action rail

The action rail is the vertical strip of grouped controls docked to the edge of the grid, holding the tool panel toggles, export triggers and view switches that would otherwise compete for space in the header. Reach for it once a JavaScript data grid accumulates more chrome than a toolbar can hold cleanly: a dozen buttons across the top wrap awkwardly at narrower widths, while a rail collapses that same set into icon groups with room to grow. The dock is controlled through tool panel dock, which sets which edge the rail attaches to, and rail actions, which supplies the ordered groups of controls the rail renders, so an application can add its own action beside the built-in ones without restructuring the header.

Rail groups are rendered lazily, so a rail holding twenty possible actions across several groups only mounts the icons for the group currently open, keeping the rail’s own footprint small regardless of how many actions an application registers against it. Each action in the rail is a real button with a label exposed to assistive technology, not a bare icon, so a screen reader announces what the control does before it is activated, and the whole rail is reachable by keyboard as a single tab stop with roving focus between its groups.

How do I add custom buttons to a data grid’s toolbar?

Register the action with rail actions alongside the grid’s own groups, giving it an icon, a label and a handler; Lattice Grid renders it in the same rail as the built-in actions rather than a separate toolbar. Dock position is set independently through tool panel dock, so the rail (and any custom actions on it) can sit on either edge of the grid.

Related demos