Right-to-left

The table supports right-to-left languages such as Arabic, Hebrew and Persian. It follows the direction it renders in, so there is no option to set: put dir="rtl" on the table or on any ancestor, usually <html>.

import { DataTable, useDataTable } from "@/components/ui/data-table"
import { dataTableLocalizationAr } from "@/components/ui/data-table/locales/ar"

const table = useDataTable({
  data,
  columns,
  getRowId: (row) => row.id,
  localization: dataTableLocalizationAr,
})

return (
  <div dir="rtl">
    <DataTable table={table} />
  </div>
)

What changes

• Layout. Columns run from right to left, cell text aligns to the start (the right), and the pagination and expand chevrons point the other way.
• Pinned columns. left pins to the start of the table and right to its end. In a right-to-left table, left-pinned columns sit on the right edge.
• Column alignment. A column's meta.align of "left" means the start of the cell and "right" means its end, so a numeric column aligned "right" lines up on the left in a right-to-left table.
• Resizing. The resize handle sits on each column's end (left) edge, and dragging it outwards (to the left) widens the column.
• Keyboard navigation. ArrowLeft moves to the next column and ArrowRight to the previous one, matching what you see.
• Column virtualization. Scrolling works with the browser's right-to-left scroll offsets.

Menus and popovers

Menus, selects and date pickers render in a portal outside the table, so they take their direction from the page. If only part of the page is right-to-left, give the shadcn primitives the direction too, with Radix's DirectionProvider (from radix-ui) or Base UI's DirectionProvider:

import { Direction } from "radix-ui"

function ArabicTable() {
  // …useDataTable as above
  return (
    <Direction.Provider dir="rtl">
      <div dir="rtl">
        <DataTable table={table} />
      </div>
    </Direction.Provider>
  )
}

Setting dir="rtl" on <html> covers both the table and its portals.