Displaying UTC Time in FlexGrid Date Columns in Vue

Background

If your data source contains date-time values in SGT, Singapore Time, but you want to display those values in UTC inside Wijmo FlexGrid, use a wj-flex-grid-cell-template on the required date-time columns. 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 Vue packages.
2. Import and register the Wijmo components.
3. Prepare the SGT date-time values as JavaScript Date objects.
4. Create a reusable UTC formatter.
5. Add a FlexGrid column cell template.

Getting Started

Install the required Wijmo Vue packages

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

• These packages provide the Vue FlexGrid components, the optional filter component, and the required Wijmo styles.

Import and register the Wijmo components

import '@mescius/wijmo.styles/wijmo.css';
import {
  WjFlexGrid,
  WjFlexGridColumn,
  WjFlexGridCellTemplate
} from '@mescius/wijmo.vue2.grid';
import { WjFlexGridFilter } from '@mescius/wijmo.vue2.grid.filter';

export default {
  components: {
    WjFlexGrid,
    WjFlexGridColumn,
    WjFlexGridCellTemplate,
    WjFlexGridFilter
  }
};

• Registering these components enables the wj-flex-grid, wj-flex-grid-column, wj-flex-grid-cell-template, and wj-flex-grid-filter tags.

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.

Add a FlexGrid column cell template

<wj-flex-grid :itemsSource="data" :autoGenerateColumns="false">
  <wj-flex-grid-column header="ID" binding="id" :width="70" />
  <wj-flex-grid-column header="Task" binding="task" width="*" />

  <wj-flex-grid-column header="Start Time (UTC)" binding="startTime" :width="220">
    <wj-flex-grid-cell-template cellType="Cell" v-slot="cell">
      {{ formatUtc(cell.item.startTime) }}
    </wj-flex-grid-cell-template>
  </wj-flex-grid-column>
</wj-flex-grid>

• The column remains bound to startTime, but the cell template controls the displayed content. The cell.item object gives access to the row’s data item.

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