Locales, and it mirrors

<script>
  import { createGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.28.0/lattice-grid.esm.min.js';
  import createLatticeAction from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.28.0/modules/svelte.esm.min.js';

  const lattice = createLatticeAction({ 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 = {
    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: ['المنتج', 'السعر', 'تاريخ التحديث', 'الحصة'] },
  };

  // Switching locale re-keys the block below, so the action rebuilds the grid in
  // the chosen locale and direction.
  let name = 'English';
  $: L = locales[name];
  $: config = {
    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 }, ...]
  };
</script>

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

<div style="display: flex; gap: 8px; margin-bottom: 12px">
  {#each Object.keys(locales) as key}
    <button on:click={() => (name = key)}>{key}</button>
  {/each}
</div>
{#key name}
  <div use:lattice={config} style="height: 460px"></div>
{/key}