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

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 });

const 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.
const 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 } },
    ],
  },
};

const rows = [/* 20,000 service records */];



@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',
    toolPanel: { side: 'left', panels: ['filters', 'columns'], actions: ['restore'], exportName: 'lattice-demo' },
    state: state,
    columns: columns,
    rows: rows,
  };
}

bootstrapApplication(AppComponent);

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