Lattice Grid Buy a licence

demo D124

Saved views

Naming a configuration and switching between them

grid.views

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',
    // 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.
    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' }],
          },
        },
      ],
    },
    toolPanel: {
      side: 'left',
      panels: ['views', 'columns', 'filters', 'quick'],
      openPanel: 'views',
      actions: ['undo', 'redo', 'restore', 'maximise'],
    },
    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 } },
    ],
    rows,  // supplier charge records, one per invoice line
  });
</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.

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