Locales, and it mirrors

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

<script type="module">
  import { defineLatticeGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.28.0/modules/webcomponent.esm.js';
  defineLatticeGrid();
</script>

<div id="buttons" style="display: flex; gap: 8px; margin-bottom: 12px"></div>
<div id="host" style="height: 460px"></div>

<script type="module">
  // The same rows in three locales. locale drives numbers, currency and dates;
  // Arabic sets direction: 'rtl', which mirrors the whole grid, pin and all. Both
  // settings are read when the grid is built, so each choice builds a fresh
  // <lattice-grid> in place of the last.
  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: ['المنتج', 'السعر', 'تاريخ التحديث', 'الحصة'] },
  };

  const host = document.getElementById('host');
  function build(name) {
    const L = locales[name];
    host.replaceChildren();
    const el = document.createElement('lattice-grid');
    el.setAttribute('row-key', 'id');
    el.style.cssText = 'display: block; height: 100%';
    el.config = {
      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' } },
      ],
    };
    el.rows = rows;  // e.g. [{ id: 1, product: 'Desk lamp', price: 42.5, updated: '2026-08-01', share: 0.18 }, ...]
    host.append(el);
  }

  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>