Lattice Grid Buy a licence

demo D157

Translating the grid in Angular

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…

This is the Angular version. A standalone component takes the whole configuration through one config input, surfaces grid events as outputs, and exposes the live grid on a getter for anything the inputs do not cover.

The configuration

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import '@toclocoinc/lattice-grid/locales/fr-FR';
import { LatticeGridComponent, provideLattice } from '@toclocoinc/lattice-grid/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LatticeGridComponent],
  template: '<lattice-grid [config]="grid" style="display:block;height:540px"></lattice-grid>',
})
export class AppComponent {
  // 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 imported above; it registers itself.
  grid = {
    rowKey: 'id',
    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 */],
  };
}

bootstrapApplication(AppComponent, {
  providers: [provideLattice({ createGrid })],
});

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