Displaying UTC Time in FlexGrid Date Columns in JavaScript

Background

If your data source contains date-time values like in SGT, Singapore Time, but you want to display those values in UTC inside Wijmo FlexGrid, use the column cellTemplate property. This lets FlexGrid stay bound to the original date values while displaying UTC-formatted text in the grid cells.

Steps to Complete

1. Install 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 define columns.
5. Use cellTemplate to display date values in UTC.

Getting Started

Install 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 } from '@mescius/wijmo.grid';
import { FlexGridFilter } from '@mescius/wijmo.grid.filter';

• These packages provide the core Wijmo runtime, FlexGrid, optional filtering, 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 value as SGT. Converting it to a Date object preserves the correct instant in time for UTC formatting.

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 each value is displayed in UTC regardless of the user’s browser time zone.

Create the FlexGrid and define columns

<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 }
  ]
});

• Setting autoGenerateColumns to false lets you define the date-time column manually.

Use cellTemplate to display date values in UTC

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 controls the displayed cell content. The original date value is still available for grid operations such as sorting and filtering.

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