Displaying FlexGrid Filter Values in UTC in Vue

Background

When a FlexGrid column contains date-time values, you can display the grid cells in UTC with a wj-flex-grid-cell-template. 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 date-time values as JavaScript Date objects.
3. Create a reusable UTC formatter.
4. Display the FlexGrid date column in UTC.
5. Add wj-flex-grid-filter.
6. Assign a UTC DataMap to the date column filter.

Getting Started

Install and import the required Wijmo packages

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

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

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

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

<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 displays the value in UTC.

Add wj-flex-grid-filter

<wj-flex-grid :itemsSource="data" :autoGenerateColumns="false">
  <wj-flex-grid-filter :initialized="initializeFilter" />

  <!-- columns here -->
</wj-flex-grid>

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

Assign a UTC DataMap to the date column filter

methods: {
  initializeFilter(filter) {
    const columnFilter = filter.getColumnFilter('startTime', true);
    columnFilter.dataMap = this.createUtcDateMap('startTime');
  },

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

    this.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: this.formatUtc(date)
    }));

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

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