Displaying UTC Time in FlexGrid Date Columns in React

Background

When a data source contains date-time values like in SGT, or Singapore Time, you may need to display those values in UTC inside Wijmo FlexGrid. In React, this can be done by keeping the column bound to the original date value and using a FlexGridCellTemplate to render the cell text in UTC.

Steps to Complete

1. Install and import the required Wijmo packages.
2. Prepare the SGT date-time data as JavaScript Date objects.
3. Create a reusable UTC formatter.
4. Convert the source values to Date objects
5. Add a FlexGrid with date-time columns.

Getting Started

Install and import the required Wijmo packages

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

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

• These packages provide the React FlexGrid components, cell template support, optional filtering, and Wijmo styles.

Prepare the SGT date-time data 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'
  }
];

• The +08:00 offset tells JavaScript that the source value is in SGT. This is important because JavaScript can then convert the same instant correctly to UTC.

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 every date passed to it is displayed as UTC time.

Convert the source values to Date objects

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

• This keeps the grid bound to actual date values instead of plain strings, which is better for sorting, filtering, and editing behavior.

Add a FlexGrid with date-time columns

<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 FlexGridColumn remains bound to startTime, but the FlexGridCellTemplate controls what users see in the cell. Here, the template renders the value in UTC.

With this React setup, FlexGrid can continue binding to the original date-time values while displaying each date column in UTC. The FlexGridCellTemplate handles the display conversion, so users see UTC-formatted dates in the grid without requiring changes to the underlying data source.