Date Filter

The Date Filter is a powerful feature in RevoGrid that allows you to filter data based on dates using a variety of criteria. It provides an intuitive interface for filtering dates with both standard comparison operators and relative date ranges.

Source code

TypeScript ts

import { defineCustomElements } from '@revolist/revogrid/loader';
import { AdvanceFilterPlugin, ColumnStretchPlugin, RowOddPlugin, RowSelectPlugin, avatarRenderer } from '@revolist/revogrid-pro';
defineCustomElements();

import { currentTheme } from '../composables/useRandomData';
import { makeData } from '../composables/makeData';

const { isDark } = currentTheme();

export function load(parentSelector: string) {
  const grid = document.createElement('revo-grid');

  grid.className = 'grow h-full cell-border';
  grid.style.minHeight = '400px';
  grid.columns = [
    {
      prop: 'avatar',
      cellTemplate: avatarRenderer,
      size: 60,
      filter: false,
    },
    {
      name: '👤 Name',
      prop: 'fullName',
      rowSelect: true,
      filter: false,
    },
    {
      name: '📅 Date',
      prop: 'dateOfBirth',
      filter: ['date'],
      order: 'desc'
    }
  ];

  // Define plugin
  grid.plugins = [AdvanceFilterPlugin, ColumnStretchPlugin, RowOddPlugin, RowSelectPlugin];
  grid.stretch = 'all';
  grid.filter = {};
  grid.theme = isDark() ? 'darkMaterial' : 'material';
  grid.hideAttribution = true;
  grid.readonly = true;
  document.querySelector(parentSelector)?.appendChild(grid);
  grid.source = makeData(100);
}

Vue vue

<template>
  <VGrid
    class="grow h-full cell-border"
    :theme="isDark ? 'darkMaterial' : 'material'"
    :columns="columns"
    :source="rows"
    :plugins="plugins"
    stretch="all"
    :filter="true"
    style="min-height: 400px;"
    hide-attribution
    readonly
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { currentThemeVue } from '../composables/useRandomData';
import { VGrid } from '@revolist/vue3-datagrid';
import { AdvanceFilterPlugin, ColumnStretchPlugin, avatarRenderer, RowOddPlugin, RowSelectPlugin } from '@revolist/revogrid-pro';
import { makeData } from '../composables/makeData';

const { isDark } = currentThemeVue();

const rows = ref(makeData(100));

const columns = ref([
  {
    prop: 'avatar',
    cellTemplate: avatarRenderer,
    size: 60,
    filter: false,
  },
  {
    name: '👤 Name',
    prop: 'fullName',
    rowSelect: true,
    filter: false,
  },
  {
    name: '📅 Date',
    prop: 'dateOfBirth',
    filter: ['date'],
    order: 'desc'
  }
]);

const plugins = ref([AdvanceFilterPlugin, ColumnStretchPlugin, RowOddPlugin, RowSelectPlugin]);

</script> 

React tsx

import React from 'react';
import { RevoGrid, type ColumnRegular } from '@revolist/react-datagrid';
import { AdvanceFilterPlugin, ColumnStretchPlugin, RowOddPlugin, RowSelectPlugin, avatarRenderer } from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';
import { makeData } from '../composables/makeData';

const { isDark } = currentTheme();

export default function FilterDateExample() {
  const columns: ColumnRegular[] = React.useMemo(() => [
    {
      prop: 'avatar',
      cellTemplate: avatarRenderer,
      size: 60,
      filter: false,
    },
    {
      name: '👤 Name',
      prop: 'fullName',
      rowSelect: true,
      filter: false,
    },
    {
      name: '📅 Date',
      prop: 'dateOfBirth',
      filter: ['date'],
      order: 'desc'
    }
  ], []);

  const plugins = React.useMemo(() => [AdvanceFilterPlugin, ColumnStretchPlugin, RowOddPlugin, RowSelectPlugin], []);
  const source = React.useMemo(() => makeData(100), []);
  const additionalData = React.useMemo(() => ({ stretch: 'all' as const }), []);

  return (
    <RevoGrid
      className="grow h-full cell-border"
      theme={isDark() ? 'darkMaterial' : 'material'}
      columns={columns}
      source={source}
      plugins={plugins}
      additionalData={additionalData}
      filter={true}
      style={{ minHeight: '400px' }}
      hideAttribution
      readonly={true}
    />
  );
}

Angular ts

import { Component, OnInit } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import { AdvanceFilterPlugin, ColumnStretchPlugin, RowOddPlugin, RowSelectPlugin, avatarRenderer } from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';
import { makeData } from '../composables/makeData';

@Component({
  selector: 'filter-date-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      [theme]="isDark ? 'darkMaterial' : 'material'"
      [columns]="columns"
      [source]="source"
      [plugins]="plugins"
      [stretch]="stretch"
      [filter]="true"
      style="min-height: 400px;"
      hideAttribution
      [readonly]="true"
    ></revo-grid>
  `
})
export class FilterDateGridComponent implements OnInit {
  columns = [
    {
      prop: 'avatar',
      cellTemplate: avatarRenderer,
      size: 60,
      filter: false,
    },
    {
      name: '👤 Name',
      prop: 'fullName',
      rowSelect: true,
      filter: false,
    },
    {
      name: '📅 Date',
      prop: 'dateOfBirth',
      filter: ['date'],
      order: 'desc',
    }
  ];

  plugins = [AdvanceFilterPlugin, ColumnStretchPlugin, RowOddPlugin, RowSelectPlugin];
  source = makeData(100);
  stretch = 'all';
  isDark = currentTheme().isDark();

  ngOnInit() {}
} 

Features

• Standard date comparison operators (equals, before, after, etc.)
• Relative date ranges (today, this month, last quarter, etc.)
• Date range selection with From/To inputs
• Empty value handling

Filter Types

Standard Operators

• Equals - Matches a specific date
• Before - Matches dates before a specific date
• After - Matches dates after a specific date
• On or Before - Matches dates on or before a specific date
• On or After - Matches dates on or after a specific date
• Between - Matches dates in a range
• Not Equal - Matches dates not equal to a specific date
• Is Empty / Is Not Empty - Matches null/undefined/empty cells

Relative Date Ranges

• Today
• Yesterday
• Last 7 Days
• This Month
• Last Month
• This Quarter
• Next Quarter
• Previous Quarter
• This Year
• Next Year
• Previous Year
• Custom Period (user-defined)

Usage

To enable the date filter for a column:

• Add the plugin to your grid’s plugins array import { AdvanceFilterPlugin } from '@revolist/revogrid-pro';
• Add the plugin to the grid’s plugins array:

plugins: [
  AdvanceFilterPlugin,
],

• Add ‘date’ to the column’s filter array:

import { AdvanceFilterPlugin } from '@revolist/revogrid-pro';
const columns = [
  {
    name: 'Event Date',
    prop: 'date',
    filter: ['date'], // Enable date filter
  }
];

Filter Operators

Operator	Description
equals	Exact date match
before	Dates before specified date
after	Dates after specified date
onOrBefore	Dates on or before specified date
onOrAfter	Dates on or after specified date
between	Dates within specified range
notEqual	Dates not matching specified date
isEmpty	Empty/null date values
isNotEmpty	Non-empty date values
today	Today’s dates
yesterday	Yesterday’s dates
last7Days	Dates within last 7 days
thisMonth	Dates in current month
lastMonth	Dates in previous month
thisQuarter	Dates in current quarter
nextQuarter	Dates in next quarter
previousQuarter	Dates in previous quarter
thisYear	Dates in current year
nextYear	Dates in next year
previousYear	Dates in previous year