Lattice Grid Buy a licence

demo D63

Filters in saved views

Round-tripping a filter model, including relative dates

state.get() / state.apply()

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: ['views', 'filters', 'columns'], openPanel: 'views', actions: ['restore'], exportName: 'lattice-demo' },
    columns: [
      { field: 'service', title: 'Service', layout: { pin: 'start', width: 140 }, filter: true },
      { field: 'team', title: 'Team', filter: { type: 'set' } },
      { field: 'tier', title: 'Tier', filter: { type: 'set' } },
      { field: 'state', title: 'State', filter: { type: 'set' } },
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'errorRate', title: 'Error rate', type: 'number', format: { style: 'percent', decimals: 2 }, filter: { type: 'number' } },
      { field: 'monthlyCost', title: 'Monthly cost', type: 'number', layout: { width: 160 },
        format: { style: 'currency', currency: 'USD' }, total: 'sum', filter: { type: 'number' } },
      { field: 'lastDeploy', title: 'Last deploy', type: 'dateString', filter: { type: 'date' } },
      { field: 'created', title: 'Created', type: 'dateString', filter: { type: 'date' } },
    ],
    // Three saved views, each carrying nothing but a filter tree. The last one
    // stays relative: the absolute date pair is what filters, and the token
    // beside it makes the menu read "last 7 days" rather than two frozen dates.
    // Compute your own pair (7 days before today, and today) in your app.
    views: {
      saved: [
        {
          id: 'expensive', name: 'Over $20k',
          state: { version: 1, filters: { col: 'monthlyCost', op: 'gt', value: 20000 } },
        },
        {
          id: 'unhealthy', name: 'Failing or degraded',
          state: { version: 1, filters: { col: 'state', op: 'in', value: ['failing', 'degraded'] } },
        },
        {
          id: 'recent', name: 'Deployed this week',
          state: { version: 1, filters: { col: 'lastDeploy', op: 'between', value: ['2026-08-19', '2026-08-26'], bounds: '[)', meta: { relative: 'last7Days', n: 7 } } },
        },
      ],
    },
    rows,  // 20,000 service records
  });
</script>

Saving and restoring a filter model, including relative dates

A filter model is the set of active filter conditions across every column: which operators are in use, which values or ranges are set, and how the conditions combine. Round-tripping it is what lets an application offer saved views, where a user picks “Open orders this quarter” from a menu and the grid re-applies the same conditions it had when the view was captured. Lattice Grid exposes this through state.get() and state.apply(), a pair of methods that serialise the current filter model to a plain object and restore it later, in the same session or a fresh one built from persisted JSON. A developer reaches for this wherever filters need to survive a page reload, a saved-view picker, or a shared link that opens pre-filtered. The harder case is a relative date filter such as “last 7 days”: storing the resolved date range would make the saved view stale the next day, so state.get() preserves the relative expression itself, and state.apply() re-resolves it against the current date on restore. This matters for a JavaScript data grid used across time zones, since a relative range resolves against the viewer’s local date, not the date the view was saved. Restoring a filter model does not re-fetch rows, so applying a saved view is a filter pass over data already in memory, not a new query.

How do I save a filter and restore it later, including relative date ranges?

Call state.get() to serialise the current filter model, including any relative date expressions, and store the result. Call state.apply() with that object to restore it, on the same grid instance or a new one. Relative expressions such as “last 7 days” are kept as expressions and re-resolved against the current date at apply time, not frozen to the date they were saved.

Related demos