demo D219

Locales, and it mirrors in Web Component

The same grid in English, Japanese and Arabic, which sets the grid right to left

locale · direction: 'rtl'

This shows the same grid in English, Japanese and Arabic, with Arabic laying the whole grid out right to left. It proves the grid adapts to a locale end to end, mirroring its layout for right-to-left languages rather than just swapping words.

Building…

Loading a live grid…

This is the web component version. A lattice-grid custom element renders the grid with no build step, its configuration set as a property, so it works on a page that has no bundler at all.

The configuration

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.108.0/lattice-grid.min.css">

<script type="module">
  import { defineLatticeGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.108.0/modules/webcomponent.esm.min.js';
  defineLatticeGrid();
</script>

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

<!-- The web component bundle carries its own copy of the grid, and 1.92.0 has no way to register a locale file with it, so its text stays English whatever the locale. -->
<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>