Skip to content
ZenGrid

Date Filter

Community

Introduction

Section titled “Introduction”

The date filter is the popup a date column opens when you click its header funnel. You opt a column in by setting filterType: 'date' — that swaps the operator list to date comparisons and renders a native date picker (<input type="date">) in the popup.

const grid = new Zengrid(el, {
  rowCount: rows.length,
  columns: [
    {
      field: 'joined', header: 'Joined',
      filterable: true, filterType: 'date',
      renderer: new zg.DateRenderer({ format: 'DD MMM YYYY' }),
    },
  ],
});

Date filtering is core — no license, no plugin. Everything below configures the same built-in popup.

Store dates as timestamps, display them with a renderer

Section titled “Store dates as timestamps, display them with a renderer”

The filter compares the cell’s raw value on a numeric timeline, so store each date as a timestamp (or a Date) rather than a display string. Pair the column with core’s DateRenderer (re-exported on zg) so the cell still reads as a human date:

const day = (y, m, d) => new Date(y, m - 1, d).getTime(); // local midnight
const rows = [
  ['Aria Vaskov', 'Analyst', day(2024, 3, 12)],
  // …
];


// column:
{ field: 'joined', header: 'Joined', filterable: true, filterType: 'date',
  renderer: new zg.DateRenderer({ format: 'DD MMM YYYY' }) }

DateRenderer accepts a format (DD, MM, MMM, MMMM, YYYY, …), useRelativeLabels for “Today”/“Yesterday”, and an emptyText for null cells.

The operators

Section titled “The operators”

A date filter offers six operators. equals / after / before take one date; between takes two (an inclusive range); blank / notBlank take none.

Operator Popup label Value Matches when the cell…
equals (default) Equals date is that exact date
greaterThan After date falls after the value
lessThan Before date falls before the value
between Between [from, to] falls inside the inclusive range
blank Is blank — is empty / null
notBlank Is not blank — has a date

Try it live

Section titled “Try it live”

Each tab configures the same grid a different way. Click a date header’s funnel to pick dates with the native picker, use the buttons to drive the filter API, or edit the code and re-run.

Open the Joined funnel: pick "After" and a 2024 date, then "Between" two dates (two pickers appear). Data is stored as timestamps; DateRenderer draws each cell as "DD MMM YYYY".

Driving the date filter from code

Section titled “Driving the date filter from code”

Everything the popup does has an imperative twin on grid.filter.* (with grid shorthands) — grid.filter.set(col, op, value) for a single condition (pass a [from, to] array of timestamps for between), grid.filter.setColumn(col, conditions, logic) to stack several with AND / OR. The buttons in the Ranges & the API tab call grid.filter.set with timestamps. See the Filtering Overview for the full API.

Next

Section titled “Next”