Lattice Grid Buy a licence

demo D307

Right to left, in Arabic

Arabic orders laid out right to left from the locale alone, with start and end alignment beside left and right

locale: 'ar-EG' · align: 'start' · 'left'

This grid holds real Arabic orders and lays itself out right to left because its locale is Arabic, with nothing else set. It shows what a right-to-left data grid changes: the columns start at the right edge, the scroll runs the other way, the header moves with it, and alignment follows the text where you asked it to and holds an edge where you named one.

Building…
Loading a live grid…

The configuration

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

<div id="grid" style="height: 480px"></div>

<script>
  // No direction is set. The grid reads right to left because the locale is
  // Arabic; give it 'en-GB' and the same columns lay out left to right.
  // start/end follow the text; left/right name an edge and keep it either way.
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    locale: 'ar-EG',
    messages: LatticeGrid.AR,   // the grid's own labels, menus and counts in Arabic
    selection: { mode: 'multiple', ranges: true },
    statusBar: { panels: ['rowCount', 'selectedCount'] },
    columns: [
      { field: 'branch',  title: 'الفرع',       layout: { pin: 'start', width: 150 } },
      { field: 'code',    title: 'رمز الطلب',   align: 'left',  layout: { width: 140 } },  // physical: the left edge
      { field: 'product', title: 'المنتج',      layout: { width: 160 } },
      { field: 'qty',     title: 'الكمية',      type: 'number', format: { decimals: 0 }, total: 'sum' },  // end: the left edge in Arabic
      { field: 'price',   title: 'سعر الوحدة',  type: 'number', format: { style: 'currency', currency: 'EGP' } },
      { field: 'revenue', title: 'الإيراد',     type: 'number', format: { style: 'currency', currency: 'EGP' }, total: 'sum' },
      { field: 'ordered', title: 'تاريخ الطلب', type: 'date' },
      { field: 'status',  title: 'الحالة',      align: 'right', filter: { type: 'set' } },  // physical: the right edge
      { field: 'manager', title: 'المسؤول' },
      { field: 'notes',   title: 'ملاحظات',     layout: { width: 240 } },
    ],
    rows,  // e.g. [{ id: 1, branch: 'القاهرة', code: 'CAI-1041', product: 'حاسوب محمول', qty: 12, price: 28500, revenue: 342000, ordered: '2026-08-03', status: 'مكتمل', manager: 'أحمد مصطفى', notes: 'تم التسليم في الموعد' }, …]
  });
</script>

A right-to-left data grid from the locale alone

Set locale: 'ar-EG' and Lattice Grid reads right to left. The first column sits against the right edge, the pinned column pins there, the horizontal scroll starts at the right and runs left, and the header travels with the columns as you scroll. Switch to en-GB and the same rows lay out left to right. Nothing in this configuration names a direction: the grid works it out from the locale, the way it does for Arabic, Hebrew, Farsi and the other right-to-left languages. When a page has already declared dir="rtl" on the element the grid mounts in, the grid follows that instead, and direction: 'rtl' sets it outright for a grid whose locale says otherwise.

The Arabic mode also passes the grid’s own Arabic message catalogue, so the row count in the status bar, the column menus and the filter labels read in Arabic, including the plural forms Arabic needs for one, two, a few and many rows.

Logical alignment follows the text; physical alignment names an edge

Two of the columns are aligned on purpose. The order code column has align: 'left' and the status column has align: 'right', and those are physical: they stay on the same edge in both directions. Every other column uses a logical alignment, start for text and end for numbers, and those mirror: the branch name sits at the right edge in Arabic and the left edge in English, and the revenue figures do the opposite. Use start and end when a column should read the way the language reads, and left or right only when a column must hold an edge whatever the language.

How do you make a JavaScript data grid right-to-left?

Give Lattice Grid a right-to-left locale, such as locale: 'ar', 'he' or 'fa', and it lays out right to left with no further configuration. To set it regardless of locale, pass direction: 'rtl'. The columns, the pinned columns, the horizontal scroll, the header, column resize and reorder, the fill handle, range selection, the context menu, annotations and comments all follow the writing direction.

Is the whole product right-to-left, or the grid?

The grid. The board (kanban), the Gantt view, the charts, the tabs strip, the dashboard layout and the KPI panel lay out left to right. A grid inside a tab is right to left; the strip of tabs above it is not. The right-to-left documentation lists what mirrors and what does not.

Related demos