Lattice Grid Buy a licence

demo D124

Saved views in React

Naming a configuration and switching between them

grid.views

This grid captures its whole arrangement, visible columns, order, sort, filters and grouping, under a name a user can return to. It lets people keep the views they build and switch between them, so a useful layout is not rebuilt each visit.

Building…
Loading a live grid…

This is the React version. The grid mounts through the createLatticeGrid adapter, which takes its configuration as ordinary props and hands back the live grid through a ref. The grid below is the same one every other tab runs.

The configuration

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

<div id="grid"></div>

<script type="module">
  import React from 'https://esm.sh/react@18';
  import { createRoot } from 'https://esm.sh/react-dom@18/client';
  import { createGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.esm.min.js';
  import createLatticeGrid from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/react.esm.min.js';

  const LatticeGrid = createLatticeGrid({ React, createGrid });

  // Views seeded here are builtin: they are listed apart, and the panel will not
  // let a visitor rename or delete them. A view saved on the page is an ordinary
  // one and sits beside them.
  const views = {
    saved: [
      {
        id: 'largest-first',
        name: 'Largest charges first',
        description: 'Sorted by amount, descending',
        state: { sort: [{ col: 'amount', dir: 'desc' }] },
      },
      {
        id: 'by-supplier',
        name: 'Grouped by supplier',
        description: 'One row per supplier, with the total',
        state: { group: ['supplier'], sort: [{ col: 'amount', dir: 'desc' }] },
      },
      {
        id: 'over-five-thousand',
        name: 'Over £5,000',
        description: 'One filter, and the columns it needs',
        state: {
          filters: { col: 'amount', op: 'gt', value: 5000 },
          sort: [{ col: 'amount', dir: 'desc' }],
        },
      },
    ],
  };

  const columns = [
    { field: 'ref', title: 'Invoice', layout: { pin: 'start', width: 140 } },
    { field: 'supplier', title: 'Supplier', layout: { flex: 1, min: 200 }, filter: { type: 'set' } },
    { field: 'region', title: 'Region', filter: { type: 'set' } },
    { field: 'category', title: 'Category', filter: { type: 'set' } },
    { field: 'quantity', title: 'Qty', type: 'number', layout: { width: 110 } },
    { field: 'amount', title: 'Amount', type: 'number', layout: { width: 150 },
      format: { style: 'currency', currency: 'GBP', decimals: 2 }, total: 'sum', filter: { type: 'number' } },
    { field: 'note', title: 'Note', layout: { width: 280 } },
  ];

  const rows = [/* supplier charge records, one per invoice line */];

  function App() {
    return (
      <LatticeGrid
        rowKey="id"
        selection="multiple"
        views={views}
        toolPanel={{ side: 'left', panels: ['views', 'columns', 'filters', 'quick'],
          openPanel: 'views', actions: ['undo', 'redo', 'restore', 'maximise'] }}
        columns={columns}
        rows={rows}
        style={{ height: '540px' }}
      />
    );
  }

  createRoot(document.getElementById('grid')).render(<App />);
</script>

Naming and restoring grid configurations as saved views

A saved view captures the shape a grid is in at a given moment: which columns are visible and in what order, the active sort, the applied filters and any grouping, and lets a developer give that combination a name to return to later. This matters in a JavaScript data grid used for anything beyond a single fixed report, where different users or tasks call for different arrangements of the same dataset: an accounts team filtering to overdue invoices, an ops team sorted by region, a manager grouped by owner. Lattice Grid exposes this through grid.views, which serialises the current configuration to a plain object, accepts a name for it, and switches the grid back to any stored view on request. Because the serialised state is column, sort, filter and group definitions rather than a snapshot of the data, restoring a view carries no dependency on the row count underneath it: switching views on a grid holding a hundred thousand rows applies as fast as on one holding a hundred, since virtual scrolling handles rendering whatever the new view selects. Views can be persisted outside the grid (to local storage, a preferences table, a URL) and rehydrated on load, so a saved arrangement survives a page refresh without re-deriving it from scratch. For the underlying capture and restore, without a named-views panel, grid.state.get() and grid.state.apply() do the same job directly; see the step-by-step how to save and restore a grid’s state guide for a runnable example and the source.

How do I let users save and switch between different grid layouts in JavaScript?

Use grid.views to capture the current column order, visibility, sort, filter and grouping state under a name, then call it again with that name to restore the layout. The captured state is a small serialisable object rather than a copy of the data, so it can be stored in local storage or a backend and reapplied on a later visit without re-fetching or re-configuring the grid by hand.

Related demos