Home > ApexGrid Docs > Docs > Right-to-Left (RTL)

Right-to-Left (RTL)

Set dir="rtl" and the grid mirrors completely. There is no option to turn on and nothing to import.

Added in 3.5.0.

<html dir="rtl">
  …
  <apex-grid></apex-grid>
</html>

Direction is read from the computed style, not from the attribute on the grid itself, so an inherited dir works. Putting it on <html>, on a wrapper, or on the grid element are all equivalent, and a page that switches direction at runtime switches the grid with it.

<!-- all three are equivalent -->
<html dir="rtl">          <apex-grid></apex-grid>
<div dir="rtl">           <apex-grid></apex-grid>  </div>
<apex-grid dir="rtl"></apex-grid>

What mirrors

Everything: column order, pinned columns, the auto group column's indent, the toolbar, the paginator, the filter row and every scroll position. The stylesheets were already written in logical properties, so layout mirrors the way the browser mirrors any correctly written CSS.

Four interactions reason in physical pixels or physical key names, and each is handled:

  • Arrow keys. → and ← are screen directions, not column order. In RTL the column to the left is the next one, so the mapping onto previous and next inverts. The rest of keyboard navigation is order-based and behaves identically in both directions.
  • Column resize. The inline-start edge is the one that stays put, so in RTL a column's width comes off its right edge and the column grows as the pointer moves left.
  • Column reorder. Moving toward a later column means moving right in LTR and left in RTL, so the midpoint comparison that decides the drop flips. The resulting position is order-based either way.
  • Range handles. The range selection fill handle and the chart range handle are drawn at the cell's inline-end corner, which mirrors to the physical left. Before 3.5.0 the grabbable band still tested the physical right, so the dot and the place you could actually grab were on opposite sides.

Your own cell templates

The grid mirrors itself; a cell template you write is your own CSS. If you want it to mirror too, write it in logical properties (margin-inline-start, inset-inline-end, text-align: start) rather than physical ones. Anything inside a template that sets left, right, margin-left or text-align: left stays put when the grid flips.

Enterprise

<apex-grid-enterprise> mirrors on the same terms and needs no separate configuration. Pivot headers, the tool panel, the status bar, the context menu and the filter builder all follow the container's direction.