Lattice Grid Buy a licence

demo D157

Translating the grid: JavaScript Data Grid Demo

Every string the grid renders, from a message catalogue

locale: 'fr-FR'

This grid draws every string it shows or announces from a message catalogue, so the whole interface can be presented in another language. It puts menu labels and screen-reader text under one catalogue, so localising the grid is a translation, not a code change.

Building…
Loading a live grid…

The configuration

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

<div id="grid" style="height: 540px"></div>

<script src="https://cdn.latticegrid.dev/lattice-grid@1.103.2/locales/fr-FR.min.js"></script>
<script>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    // Every menu, filter operator and status string comes from a catalogue,
    // so the whole interface can be translated. The French catalogue is the
    // fr-FR file loaded above; it registers itself, and the locale picks it.
    locale: 'fr-FR',
    toolPanel: {
      side: 'left',
      panels: ['columns', 'filters', 'views', 'quick'],
      actions: ['undo', 'redo', 'export', 'restore', 'maximise'],
      exportName: 'lattice-demo',
    },
    columns: [
      { field: 'circuit', title: 'Circuit', layout: { width: 190 } },
      { field: 'region', title: 'Region' },
      { field: 'status', title: 'Status', filter: { type: 'set' } },
      { field: 'bandwidth', title: 'Bandwidth', type: 'number', filter: { type: 'number' } },
      { field: 'charge', title: 'Monthly charge', type: 'number', format: { style: 'currency', currency: 'GBP' }, filter: { type: 'number' } },
    ],
    rows,  // 2,000 circuit records
  });
</script>

Translating the grid through a message catalogue

Every string the grid renders or announces, from menu labels to the text a screen reader hears, comes from a message catalogue rather than being hard-coded, so the whole interface can be presented in another language. A developer reaches for this when a product ships in more than one language, or in a single language that is not English: filter menus, column menus, selection announcements, empty-state text and pagination labels all need to match the rest of the application. Lattice Grid takes a locale, for example fr-FR, and draws every piece of interface text from that language’s catalogue; this demo runs the French catalogue end to end. As a JavaScript data grid, the catalogue is looked up once and cached, so translated strings cost no more to render than the defaults and switching catalogue does not force a data re-render. Crucially the catalogue covers the accessibility strings as well as the visible ones, so ARIA labels and live-region announcements are translated too, and a screen reader user in French hears French rather than a French interface narrated in English.

How do I translate a data grid into another language?

Set locale: 'fr-FR' on Lattice Grid, once the French catalogue is loaded. Every string the grid renders or announces is drawn from that catalogue, including menu labels, empty-state text, and the ARIA labels and live-region announcements read to screen reader users, so both the visible interface and the spoken one appear in the chosen language.

The core ships English only, and every other language is its own file that registers itself when it loads. In a bundler, add import '@toclocoinc/lattice-grid/locales/fr-FR' before the grid is created; on a page with script tags, load the locales/fr-FR.min.js file after the core script. @toclocoinc/lattice-grid/locales/all registers every language. A grid whose locale has not been loaded renders in English and logs one warning that names the import to add. A messages object still overrides individual strings.

Related demos