Displaying FlexGrid Filter Values in UTC in React

Background

When a FlexGrid column contains date-time values, you may format the grid cells in UTC with a FlexGridCellTemplate. However, the Excel-style filter menu may still show the raw date display values. To show UTC values in the filter editor as well, assign a DataMap to the date column’s ColumnFilter.

Steps to Complete

1. Install and import the required Wijmo packages.
2. Prepare the date-time values as JavaScript Date objects.
3. Create a reusable UTC formatter.
4. Display the FlexGrid date column in UTC.
5. Add FlexGridFilter.
6. Assign a UTC DataMap to the date column filter.

Getting Started

Install and import the required Wijmo packages

npm install @mescius/wijmo @mescius/wijmo.grid @mescius/wijmo.grid.filter @mescius/wijmo.react.grid @mescius/wijmo.react.grid.filter @mescius/wijmo.styles

import React, { useCallback, useMemo } from 'react';
import '@mescius/wijmo.styles/wijmo.css';
import { DataMap } from '@mescius/wijmo.grid';
import { FlexGrid, FlexGridColumn, FlexGridCellTemplate } from '@mescius/wijmo.react.grid';
import { FlexGridFilter } from '@mescius/wijmo.react.grid.filter';

• FlexGridFilter is the React component for Wijmo’s Excel-style filter, and DataMap converts raw values into display values in the filter editor.

Prepare the date-time values as JavaScript Date objects

const rawData = [
  {
    id: 1,
    task: 'Order created',
    startTime: '2026-06-25T09:30:00+08:00'
  },
  {
    id: 2,
    task: 'Order shipped',
    startTime: '2026-06-25T14:00:00+08:00'
  }
];

const data = rawData.map(item => ({
  ...item,
  startTime: new Date(item.startTime)
}));

• The +08:00 offset identifies the source values as SGT. Converting them to Date objects preserves the correct instant in time for filtering and UTC display.

Create a reusable UTC formatter

const utcFormatter = new Intl.DateTimeFormat('en-GB', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  hour12: false,
  timeZone: 'UTC',
  timeZoneName: 'short'
});

function formatUtc(value) {
  if (!value) {
    return '';
  }

  const date = value instanceof Date ? value : new Date(value);
  return Number.isNaN(date.getTime()) ? '' : utcFormatter.format(date);
}

• The formatter uses timeZone: 'UTC', so both grid cells and filter values can share the same UTC display format.

Display the FlexGrid date column in UTC

<FlexGrid itemsSource={data} autoGenerateColumns={false}>
  <FlexGridColumn binding="id" header="ID" width={70} />
  <FlexGridColumn binding="task" header="Task" width="*" />

  <FlexGridColumn binding="startTime" header="Start Time (UTC)" width={220}>
    <FlexGridCellTemplate
      cellType="Cell"
      template={context => formatUtc(context.item.startTime)}
    />
  </FlexGridColumn>
</FlexGrid>

• The column remains bound to startTime, but the cell template displays the value in UTC.

Add FlexGridFilter

<FlexGrid itemsSource={data} autoGenerateColumns={false}>
  <FlexGridFilter initialized={initializeFilter} />

  {/* columns here */}
</FlexGrid>

• The initialized handler gives access to the FlexGridFilter instance after React creates it. Use that handler to configure the date column’s filter display.

Assign a UTC DataMap to the date column filter

const createUtcDateMap = useCallback((field) => {
  const uniqueDates = new Map();

  data.forEach(item => {
    const value = item[field];

    if (value instanceof Date && !Number.isNaN(value.getTime())) {
      uniqueDates.set(value.getTime(), value);
    }
  });

  const mapItems = Array.from(uniqueDates.values()).map(date => ({
    value: date,
    caption: formatUtc(date)
  }));

  return new DataMap(mapItems, 'value', 'caption');
}, [data]);

const initializeFilter = useCallback((filter) => {
  const columnFilter = filter.getColumnFilter('startTime', true);
  columnFilter.dataMap = createUtcDateMap('startTime');
}, [createUtcDateMap]);

• The DataMap uses the original Date as the key and the UTC string as the display value. Assigning it to columnFilter.dataMap makes the filter editor show UTC-formatted values.

With this React setup, FlexGrid displays the date column in UTC and also shows UTC-formatted values in the filter editor. The grid still filters against the original Date values, while the DataMap controls how those values appear to users.

Happy coding!