tablecnRight-to-left
The table on Arabic, Hebrew or Persian pages. Columns, pinning, resizing and menus follow the reading direction.
Try it: the first column is on the right. Scroll the table sideways, drag a column's left edge to widen it, drag a header to move it, open a column's ⋯ menu and its Color submenu, or add a Date filter and open its calendar.
Set it up
Three things tell the table and its menus which way the page reads:
The page
Set dir on <html> (or on the element around the table), as for any right-to-left page:
<html lang="ar" dir="rtl">The table's layout follows it: the first column, pinned columns and their shadows, the toolbar and the pagination.
The table
Pass dir to useDataTable, so resizing follows the pointer:
const table = useDataTable({
data,
columns,
getRowId: (order) => order.id,
dir: "rtl",
})Your primitive library
Menus, selects, popovers and the filter's calendars read the direction from their library, not from the page. They open outside the table, at the end of <body>, so they take it from this provider even when only part of the page is right-to-left. Wrap your app with it:
import { Direction } from "radix-ui"
<Direction.Provider dir="rtl">{children}</Direction.Provider>Without it, a column's Color submenu opens on the wrong side, the filter panel reads left-to-right, and the arrow keys move the wrong way in menus.
If your app switches direction with the language, derive all three from the same value.
What follows the direction
| Part | Left-to-right | Right-to-left |
|---|---|---|
| Columns | first column on the left | first column on the right |
| Pinned columns | "start" is the left edge | "start" is the right edge, and the shadow flips |
| Resizing | drag the right edge; → widens | drag the left edge; ← widens |
| Moving a column | ← / → move it the way the arrow points | the same: the arrow is the direction it moves on screen |
| Pagination | ‹ previous, › next | the arrows flip |
| Menus and submenus | open to the right | open to the left (with the provider above) |
| Filter panel and pickers | "Where" on the left, lined up with the Filter button's left edge | "Where" on the right, lined up with its right edge |
| Calendars | weekdays from the left, previous on the left | weekdays from the right, previous on the right |
| Header and cell text | aligned left | aligned right |
Everything is laid out with logical properties (start / end), so your own meta and classes should use them too: ps-2 rather than pl-2, text-start rather than text-left.
Translate
Right-to-left pages usually need their own texts too. The table ships English and Vietnamese; for another language, pass your messages to every component. See Translate the UI.
Good to know
- Numbers and dates keep their own order inside a cell:
$5.00and2026-09-28read left to right, as the browser renders them in any page. - Your shadcn components (the dropdown menu's submenu arrow, the calendar's month arrows) are yours, from shadcn/ui: they flip as far as your copies do. Add
rtl:rotate-180to an arrow icon that points the wrong way.