Locales, and it mirrors

import * as ng from '@angular/core';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import createLatticeGrid from '@toclocoinc/lattice-grid/modules/angular';

const { LatticeGridComponent } = createLatticeGrid({ ng, createGrid });

// The same grid and the same rows in three locales. Only the chrome and the
// formatting change: numbers, currency and dates read the grid's locale, and
// Arabic sets direction 'rtl', which mirrors the whole grid, pin and all.
const locales: any = {
  English:  { locale: 'en-GB', direction: 'ltr', currency: 'GBP', titles: ['Product', 'Price', 'Updated', 'Share'] },
  'Japanese': { locale: 'ja-JP', direction: 'ltr', currency: 'JPY', titles: ['\u88fd\u54c1', '\u4fa1\u683c', '\u66f4\u65b0\u65e5', '\u30b7\u30a7\u30a2'] },
  'Arabic':  { locale: 'ar-EG', direction: 'rtl', currency: 'EGP', titles: ['\u0627\u0644\u0645\u0646\u062a\u062c', '\u0627\u0644\u0633\u0639\u0631', '\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u062a\u062d\u062f\u064a\u062b', '\u0627\u0644\u062d\u0635\u0629'] },
};

const rows: any[] = [/* e.g. { id: 1, product: 'Desk lamp', price: 42.5, updated: '2026-08-01', share: 0.18 } */];

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, LatticeGridComponent],
  template:
    '<div style="display:flex;gap:8px;margin-bottom:12px">' +
    '  <button *ngFor="let n of localeNames" (click)="setLocale(n)" [attr.aria-pressed]="n === name">{{ n }}</button>' +
    '</div>' +
    '<lattice-grid [config]="grid" style="display:block;height:460px"></lattice-grid>',
})
export class AppComponent {
  localeNames = Object.keys(locales);
  name = 'English';
  grid: any = this.build('English');

  // One locale selects the language. Reassigning the config restyles the grid in
  // place, keeping its data, sort and selection.
  build(name: string) {
    const L = locales[name];
    const columns = [
      { field: 'product', title: L.titles[0], layout: { pin: 'start', width: 180 } },
      { field: 'price', title: L.titles[1], type: 'number', format: { style: 'currency', currency: L.currency }, total: 'sum' },
      { field: 'updated', title: L.titles[2], type: 'date' },
      { field: 'share', title: L.titles[3], type: 'number', format: { style: 'percent' } },
    ];
    return { rowKey: 'id', locale: L.locale, direction: L.direction, columns, rows };
  }

  setLocale(name: string) { this.name = name; this.grid = this.build(name); }
}

bootstrapApplication(AppComponent);