Lattice Grid Buy a licence

demo D157

Translating the grid

Every string the grid renders, from a message catalogue

messages · FR_FR

Building…
Loading a live grid…

The configuration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>

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

<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. FR_FR ships with the grid.
    messages: LatticeGrid.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 messages catalogue, for example FR_FR, and draws every piece of interface text from it; 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?

Pass a messages catalogue to Lattice Grid, such as FR_FR for French. 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.

Related demos