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

import * as ng from '@angular/core';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import createLatticeGrid from '@toclocoinc/lattice-grid/modules/angular';

const { LatticeGridComponent } = createLatticeGrid({ ng, 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 */];



@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LatticeGridComponent],
  template: '<lattice-grid [config]="grid" style="display:block;height:540px"></lattice-grid>',
})
export class AppComponent {
  grid = {
    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,
  };
}

bootstrapApplication(AppComponent);

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