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.27.0/lattice-grid.min.css">
<style>
  #grid > div { height: 540px; }
</style>
<div id="grid"></div>

<script type="module">
  import * as Vue from 'https://esm.sh/vue@3';
  import { createGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/lattice-grid.esm.min.js';
  import createLatticeGrid from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/modules/vue.esm.min.js';

  const LatticeGrid = createLatticeGrid({ vue: Vue, createGrid });

  Vue.createApp({
    components: { LatticeGrid },
    data() {
      return {
        config: {
          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
        },
      };
    },
    template: '<lattice-grid v-bind="config" />',
  }).mount('#grid');
</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