Locales, and it mirrors

<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="buttons" style="display: flex; gap: 8px; margin-bottom: 12px"></div>
<div id="grid" style="height: 460px"></div>

<script>
  // 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 = {
    English:  { locale: 'en-GB', direction: 'ltr', currency: 'GBP', titles: ['Product', 'Price', 'Updated', 'Share'] },
    日本語:    { locale: 'ja-JP', direction: 'ltr', currency: 'JPY', titles: ['製品', '価格', '更新日', 'シェア'] },
    العربية:  { locale: 'ar-EG', direction: 'rtl', currency: 'EGP', titles: ['المنتج', 'السعر', 'تاريخ التحديث', 'الحصة'] },
  };

  let grid;
  function build(name) {
    const L = locales[name];
    grid?.destroy();
    grid = LatticeGrid.createGrid(document.getElementById('grid'), {
      rowKey: 'id',
      locale: L.locale,
      direction: L.direction,
      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' } },
      ],
      rows,  // e.g. [{ id: 1, product: 'Desk lamp', price: 42.5, updated: '2026-08-01', share: 0.18 }, …]
    });
  }

  for (const name of Object.keys(locales)) {
    const b = document.createElement('button');
    b.textContent = name;
    b.onclick = () => build(name);
    document.getElementById('buttons').append(b);
  }
  build('English');
</script>