demo D243
Timestamps in a display zone in ESM
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.
This is the ES module version. The grid is imported straight from a CDN as a module, the same configuration as the vanilla tab without a global script tag, so it drops into any bundler or a bare module script.
The configuration
<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.min.css">
<div id="grid" style="height: 520px"></div>
<script type="module">
import { createGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.esm.min.js';
const grid = createGrid(document.getElementById('grid'), {
rowKey: 'id',
// The grid's 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.
timeZone: 'Europe/London',
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' } },
],
rows, // one stored instant each: action, host, at (epoch milliseconds)
});
</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.