Lattice Grid Buy a licence

demo D12

Show, hide and the tool panel

The visibility list, and what generated columns keep out of it

columns.show / hide

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',
    toolPanel: { side: 'left', panels: ['columns', 'filters'], actions: ['restore'], exportName: 'lattice-demo' },
    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' },
      { field: 'cpuCores', title: 'vCPU', type: 'number' },
      { field: 'memoryGb', title: 'Memory GB', type: 'number' },
      { field: 'diskBytes', title: 'Disk', type: 'number', format: { notation: 'compact' } },
      { field: 'requests', title: 'Requests', type: 'number', format: { notation: 'compact' } },
      { field: 'errors', title: 'Errors', type: 'number' },
      { field: 'errorRate', title: 'Error rate', type: 'number', format: { style: 'percent', decimals: 2 } },
      { field: 'p50Ms', title: 'p50 ms', type: 'number' },
      { field: 'p95Ms', title: 'p95 ms', type: 'number' },
      { field: 'p99Ms', title: 'p99 ms', type: 'number' },
      { field: 'uptime', title: 'Uptime', type: 'number', format: { style: 'percent', decimals: 3 } },
      { field: 'monthlyCost', title: 'Monthly cost', type: 'number', format: { style: 'currency', currency: 'USD' }, total: 'sum' },
      { field: 'budget', title: 'Budget', type: 'number', format: { style: 'currency', currency: 'USD' }, total: 'sum' },
      { field: 'headcount', title: 'Headcount', type: 'number', total: 'sum' },
      { field: 'openIncidents', title: 'Incidents', type: 'number', total: 'sum' },
      { field: 'lastDeploy', title: 'Last deploy', type: 'dateString' },
      { field: 'created', title: 'Created', type: 'dateString' },
      { field: 'slaTarget', title: 'SLA', type: 'number', format: { style: 'percent', decimals: 2 } },
      { field: 'onCall', title: 'On call' },
      { field: 'repository', title: 'Repository', layout: { width: 260 } },
      { field: 'notes', title: 'Notes' },
    ],
    rows,  // 5,000 service records
  });
</script>

Toggling column visibility through the tool panel

Column visibility is the show-and-hide layer that lets a user reduce a wide table to the fields they care about without a bespoke settings screen for it. A JavaScript data grid with forty or fifty columns is rarely read in full; most sessions need only a working subset, and a visibility list beside the grid, driven by columns.show and columns.hide, gives users that control directly rather than routing every preference back through configuration. Reach for this whenever a dataset serves several audiences from one schema: an operations view and a finance view of the same rows, each hiding the columns the other needs.

The tool panel builds its list from the column definitions supplied at initialisation, so a column marked as generated, such as a computed total or a row-selection checkbox, stays out of that list and cannot be hidden by a user who should not be touching it. columns.show and columns.hide accept a column ID or an array of them, so a saved view can restore several columns’ visibility in one call. Hiding a column removes its cells from the DOM rather than setting them to display: none, keeping the reflow cost proportional to the columns changed rather than the row count, so toggling visibility on a grid holding tens of thousands of rows costs the same as on one holding a few hundred.

How do I let users show and hide columns in a data grid?

Build the visibility list from the grid’s column definitions, excluding any marked as generated, and call columns.show or columns.hide with a column ID or array of IDs when a user toggles an entry. Lattice Grid removes hidden columns’ cells from the rendered DOM rather than hiding them with CSS, so the cost of toggling depends on the number of columns changed, not the row count.

Related demos