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.28.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.28.0/lattice-grid.esm.min.js';
  import createLatticeGrid from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.28.0/modules/vue.esm.min.js';

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

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