Displaying FlexGrid Filter Values in UTC in JavaScript

Background

When a FlexGrid column contains date-time values, the grid cells can be formatted in UTC with the column cellTemplate property. However, the Excel-style filter editor may still show the original date display values. To show UTC values in the filter list, assign a DataMap to the date column’s ColumnFilter.

Steps to Complete

1. Install and import the required Wijmo packages.
2. Prepare the SGT date-time values as JavaScript Date objects.
3. Create a reusable UTC formatter.
4. Create the FlexGrid and display the 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.styles

import '@mescius/wijmo.styles/wijmo.css';
import { FlexGrid, DataMap } from '@mescius/wijmo.grid';
import { FlexGridFilter } from '@mescius/wijmo.grid.filter';

• These packages provide FlexGrid, the Excel-style filter, the DataMap class, and the required Wijmo styles.

Prepare the SGT 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.

Create the FlexGrid and display the date column in UTC

<div id="theGrid"></div>

const grid = new FlexGrid('#theGrid', {
  autoGenerateColumns: false,
  itemsSource: data,
  columns: [
    { header: 'ID', binding: 'id', width: 70 },
    { header: 'Task', binding: 'task', width: '*' },
    {
      header: 'Start Time (UTC)',
      binding: 'startTime',
      width: 220,
      cellTemplate: ctx => formatUtc(ctx.value)
    }
  ]
});

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

Add FlexGridFilter

const filter = new FlexGridFilter(grid);

• FlexGridFilter adds Excel-style filtering to the grid.

Assign a UTC DataMap to the date column filter

function createUtcDateMap(items, field) {
  const uniqueDates = new Map();

  items.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');
}

const columnFilter = filter.getColumnFilter('startTime', true);
columnFilter.dataMap = createUtcDateMap(data, 'startTime');

• 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 JavaScript 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!