Lattice Grid Buy a licence

demo D56

Ranges and relative dates

Between, before, after, and "last 30 days" that stays relative

op: 'between'

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: ['filters', 'columns'], 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' } },
    ],
    // Opens already filtered: a cost band, and deploys in the last 30 days.
    // The date pair is what actually filters, so compute your own two dates
    // (n days before today, and today) when you build this in your app.
    state: {
      version: 1,
      filters: {
        op: 'and',
        conditions: [
          { col: 'monthlyCost', op: 'between', value: [5000, 20000] },
          { col: 'lastDeploy', op: 'between', value: ['2026-07-27', '2026-08-26'], bounds: '[)', meta: { relative: 'lastNDays', n: 30 } },
        ],
      },
    },
    rows,  // 20,000 service records
  });
</script>

Filtering a column by range, and dates that stay relative

A range filter narrows a column to values between two bounds rather than matching one exact value: a price between two figures, a score above a threshold, a date before or after a chosen day. A developer reaches for it wherever the underlying type is ordered rather than categorical, since a set filter’s checkbox list stops being useful once the distinct values run into the thousands. Lattice Grid configures this through the op: 'between' operator on a column’s filter, alongside before and after for open-ended bounds, and the same operators accept a relative date rather than a fixed one. A filter set to “last 30 days” stores that phrase, not the date it resolved to at the moment it was applied, so reopening the grid a week later still shows the trailing thirty days rather than a window that has silently drifted stale. Evaluating a range filter is a single comparison per row against the stored bounds, so it costs no more at a million rows than an equality filter and needs no secondary index over the column. The filter menu’s date and number inputs are native form controls, so keyboard entry, locale-aware parsing and screen reader labelling come from the browser rather than a custom widget the grid would otherwise have to maintain.

How do I filter a data grid column by date range or “last 30 days”?

Set the column’s filter operator to between with two bounds, or to before / after for one open end. For a rolling window, pass a relative expression such as “last 30 days” instead of fixed dates: Lattice Grid re-resolves it against the current date on every evaluation, so a saved or reloaded filter keeps showing the trailing period rather than the original date range.

Related demos