RTL is used for displaying languages that go from Right to Left, eg Hebrew and Arabic. To get ag-Grid to display in RTL format, set the property enableRtl=true.
Below shows a simple example of a grid using RTL. To make it look better we should really be using an RTL language, however none of us in ag-Grid know any RTL languages, so we are sticking with English.
Below shows a more complex example. It's the same example as used on the ag-Grid main demo page. To demonstrate all the edge cases of RTL, the tool panel and pinned areas are shown. This example is using ag-Grid Enterprise - hence the tool panel and context menu's are active.
If you are creating your own theme, knowing how the RTL is implemented will be useful.
The following CSS classes are added to the grid when RTL is on and off:
Themes then also use these styles for adding different values based on whether RTL is used or NOT. For example, the following is used inside the provided themes:
Under normal operation, when columns are pinned to the right, the vertical scroll will appear alongside the right pinned panel. For RTL the scroll will appear on the left pinned panel when left pinning columns.
The grid normally lays the columns out from left to right. When doing RTL the columns go from the right to the left. If the grid was using normal HTML layout, then the columns would all reverse by themselves, however the grid used Column Visualisation, so it needs to know exactly where each column is. Hence there is a lot of math logic inside ag-Grid that is tied with the scrolling. Not only is the scrolling inverted, all the maths logic is inverted also. All of this is taken care of for you inside ag-Grid. Once enableRtl=true is set, the grid will know to use the RTL varient of all the calculations.