Lattice Grid Buy a licence

demo D243

Timestamps in a display zone in React

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

This grid stores an event as a single instant and shows it in a display zone it resolves for the reader, with that zone named on the page. It keeps an audit or log time unambiguous, one stored value shown consistently, so nobody has to guess which zone a timestamp is in.

Building…
Loading a live grid…

This is the React version. The grid mounts through the createLatticeGrid adapter, which takes its configuration as ordinary props and hands back the live grid through a ref. The grid below is the same one every other tab runs.

The configuration

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.min.css">

<div id="grid"></div>

<script type="module">
  import React from 'https://esm.sh/react@18';
  import { createRoot } from 'https://esm.sh/react-dom@18/client';
  import { createGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.esm.min.js';
  import createLatticeGrid from 'https://cdn.latticegrid.dev/lattice-grid@1.103.2/modules/react.esm.min.js';

  const LatticeGrid = createLatticeGrid({ React, createGrid });

  const columns = [
    { field: 'action', title: 'Event', layout: { pin: 'start', width: 160 } },
    { field: 'host', title: 'Host', layout: { width: 140 } },
    // Inherits the grid's display zone. showOrigin keeps the capture zone
    // beside the time, so a moment recorded in UTC still reads as UTC.
    { field: 'at', id: 'display', title: 'Display zone', type: 'timestamp', layout: { width: 240 },
      typeOptions: { showOrigin: true, originZone: 'UTC' } },
    // The same stored instant, pinned to three named zones: one moment read
    // everywhere at once. The sort is on the instant, never on the text.
    { 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' } },
  ];

  const rows = [/* one stored instant each: action, host, at (epoch milliseconds) */];

  function App() {
    return (
      // The grid's own display zone. A timestamp column with no zone of its
      // own reads in this one, so a single setting moves every time on the page.
      <LatticeGrid rowKey="id" timeZone="Europe/London" columns={columns} rows={rows} style={{ height: '520px' }} />
    );
  }

  createRoot(document.getElementById('grid')).render(<App />);
</script>

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