Lattice Grid Buy a licence

demo D243

Timestamps in a display zone

One instant, stored once and shown in the zone the grid resolves for the reader, with the zone named on the page

type: 'timestamp' · showOrigin

Building…
Loading a live grid…

The configuration

'timestamp-display-zone': () => ({
  rows: (() => {
    const base = Date.UTC(2026, 8, 3, 6, 15);
    const actions = ['sign in', 'deploy', 'rollback', 'scale up', 'alert cleared', 'backup', 'failover', 'scale down'];
    const hosts = ['edge-lon-1', 'edge-fra-2', 'core-nyc-1', 'core-sfo-3', 'edge-tyo-1', 'core-syd-2'];
    return Array.from({ length: 24 }, (_, i) => ({
      id: i + 1,
      action: actions[i % actions.length],
      host: hosts[i % hosts.length],
      at: base + i * 97 * 60 * 1000,
    }));
  })(),
  config: {
    rowKey: 'id',
    timeZone: 'Europe/London',
    toolPanel: TOOL_PANEL,
    columns: [
      { field: 'action', title: 'Event', layout: { pin: 'start', width: 160 } },
      { field: 'host', title: 'Host', layout: { width: 140 } },
      { field: 'at', id: 'display', title: 'Display zone', type: 'timestamp', layout: { width: 240 }, typeOptions: { showOrigin: true, originZone: 'UTC' } },
      { field: 'at', id: 'utc', title: 'UTC', type: 'timestamp', layout: { width: 180 }, typeOptions: { timeZone: 'UTC' } },
      { field: 'at', id: 'nyc', title: 'New York', type: 'timestamp', layout: { width: 190 }, typeOptions: { timeZone: 'America/New_York' } },
      { field: 'at', id: 'tyo', title: 'Tokyo', type: 'timestamp', layout: { width: 180 }, typeOptions: { timeZone: 'Asia/Tokyo' } },
    ],
  },
  foot: ['one stored instant', 'shown in four display zones', 'sorted on the instant, never on the text'],
  onGrid: (grid: any) => {
    const say = readout(grid);
    const lg = (window as any).LatticeGrid ?? (window as any);
    let zone = 'Europe/London';
    try {
      const z = typeof grid.get === 'function' ? grid.get('timeZone') : null;
      if (z) zone = z;
    } catch {  }
    const label = typeof lg.zoneLabel === 'function' ? lg.zoneLabel(zone, Date.now()) : zone;
    say(`display zone ${label}`);
  },
})

Storing one instant and showing it in a display zone

A timestamp column holds a genuine moment: an audit time, an event’s creation, a log line that happened once and means the same thing everywhere. Lattice Grid stores it as an instant and shows it in a display zone it resolves for the reader, so the value in the row and the clock on the page stay separate concerns. The zone is resolved by precedence: the column’s own zone first, then the grid’s display zone, then the viewer’s local zone. This demo puts the same instant in four columns at once, one per named zone, and names the resolved display zone on the page so nobody has to guess which clock they are reading.

Because storage is numeric, sorting, filtering and comparison all run on the instant rather than the rendered text. Two rows captured in different origin zones order by true chronology, and changing the display zone never reorders them. Set the origin option on a column and each cell keeps the capture zone beside the time, so a moment recorded in one place and shown in another reads honestly rather than silently assuming the viewer’s clock. This is the right model for a JavaScript data grid used by a distributed team, an operations dashboard tracking events across regions, or an audit trail where the recorded moment must read out consistently for every viewer.

How do you show a timestamp in a chosen time zone in a data grid?

Give the column type: 'timestamp' and set the display zone with the grid’s zone setting or the column’s own zone, using an IANA name such as Europe/London or Asia/Tokyo. Lattice Grid stores the value as an instant and renders it in the resolved zone, names that zone so the reader knows which clock they are looking at, and keeps sorting and filtering on the instant so changing the display never reorders a row.

Related demos