Right-to-left and Arabic

Right to left, from the locale

A right-to-left data grid needs one setting: the locale. locale: 'ar' lays the grid out right to left, and so does any Arabic, Hebrew or Farsi locale, along with Urdu, Pashto, Sindhi, Uyghur, Yiddish, Dhivehi, Sorani Kurdish, Syriac and N'Ko. When the page has already declared dir="rtl" on the element the grid mounts in, the grid follows the page. To fix the direction regardless of both, pass direction: 'rtl' or 'ltr'.

createGrid(element, { locale: 'ar' });          // right to left, from the locale
createGrid(element, { locale: 'he' });          // Hebrew, the same
createGrid(element, { locale: 'fa' });          // Farsi, the same
createGrid(element, { direction: 'rtl' });      // or say so outright, whatever the locale

The order is deliberate: an explicit direction wins, then the element's own dir, then the locale. A page that has already decided its layout is not overruled by a language tag. See it with real Arabic orders in the right-to-left grid demo.

What follows the writing direction

In a right-to-left grid the first column sits against the right edge and the columns run leftward from there. The horizontal scroll starts at the right, and the header and any pinned rows move with the body as you scroll. Everything a pointer does follows the same direction:

• Pinned columns swap sides: a column pinned at the start pins to the right edge.
• Column resize and reorder, and the fill handle, act in the direction the text runs.
• Range selection, the context menu, annotations and the comment marker follow the direction.
• The facet band and menu placement follow it too.

A formatted number, a currency and a date all read through the locale as they do in any other, so an Egyptian Arabic grid shows Arabic-Indic digits and Egyptian pounds without a formatter of your own.

start and end follow the text; left and right name an edge

Column alignment has two vocabularies and they mean different things in a right-to-left grid. start, center and end are logical: they follow the writing direction, so an end-aligned number column sits at the right edge in English and the left edge in Arabic. left and right are physical: they name an edge and keep it in both directions, in the cell, in its editor and in the header. A column with no alignment takes its type's default, which is logical: numbers end, booleans center, text start.

columns: [
  { field: 'branch',  align: 'start' },   // logical: the right edge in Arabic, the left edge in English
  { field: 'revenue', align: 'end' },     // logical: the left edge in Arabic, the right edge in English
  { field: 'code',    align: 'left' },    // physical: the left edge in both
  { field: 'status',  align: 'right' },   // physical: the right edge in both
]

Alignment	Kind	Left-to-right grid	Right-to-left grid
start	logical	left edge	right edge
end	logical	right edge	left edge
center	logical	centre	centre
left	physical	left edge	left edge
right	physical	right edge	right edge

Use the logical pair when a column should read the way the language reads, which is nearly always. Reach for left or right only when a column must hold an edge whatever the language, such as a code that is always Latin text.

The Arabic catalogue

The locale sets the direction and the number, date and currency formats. The grid's own words, the column menu, the filter operators, the status bar and what a screen reader hears, come from a message catalogue, and an Arabic one ships with the grid. Pass it as messages and every label the grid renders is Arabic, with all six plural forms the language uses, so one row, two rows, a few rows and many rows are each counted in the right form.

import { createGrid, AR } from '@toclocoinc/lattice-grid';

createGrid(element, {
  locale: 'ar-EG',   // right to left, Arabic-Indic digits, Egyptian pounds
  messages: AR,      // the grid's own labels, menus and counts in Arabic
});

Hebrew and Farsi set the direction from the locale in the same way. No Hebrew or Farsi catalogue ships with the grid, so the grid's own labels stay in English until you pass a catalogue of your own; translating the grid shows how to write one and check it is complete.

What is not right-to-left

The grid is the surface that lays out right to left. The other views lay out left to right and take no direction setting:

View	Right-to-left
The grid	Yes, from the locale, the element's dir or direction
The board (kanban)	No, left to right only
The Gantt view	No, left to right only
Charts	No, left to right only
The tabs strip	No, left to right only; a grid inside a tab is right to left
The dashboard layout	No, left to right only; a grid inside a window is right to left
The KPI panel	No, left to right only

Those six views do not read direction, do not set dir on what they draw, and give no warning when placed on a right-to-left page. If a procurement checklist asks whether the board, the Gantt view, the charts, the tabs, the layout or the KPI panel are right-to-left, the answer is no. If it asks whether the grid is, the answer is yes, and the demo is the evidence.

Common questions

Is Lattice Grid an RTL JavaScript data grid?

Yes. Set an Arabic, Hebrew or Farsi locale, or direction: 'rtl', and the grid lays out right to left: columns, pinned columns, scroll, header, selection, menus, annotations and comments.

Does an Arabic data grid need Arabic-Indic digits configured?

No. Formatted numbers, currency and dates follow the locale, so ar-EG shows Arabic-Indic digits and Egyptian pounds as that locale defines them.

Is the kanban board right-to-left?

No. The board lays out left to right, as do the Gantt view, the charts, the tabs strip, the dashboard layout and the KPI panel.

Related reading: translating the grid, the three-locale demo, the alignment demo, and the rest of the developer guide.