RTL support

Pass the direction prop to control text direction. The table sets a dirattribute on its wrapper and flips pagination navigation arrows automatically.

Direction: LTR / RTL / AUTO

Toggle between LTR, RTL, and AUTO. In RTL mode the pagination arrows reverse, column text aligns right-to-left, and the resize handles mirror to each column's left edge. Drag a column boundary to try it.

direction:

Name

Department

Salary

Aria Chen

Engineering

$155,000

Marcus Webb

Product

$132,000

Priya Kapoor

Design

$118,000

Jordan Ellis

Analytics

$143,000

Sam Rivera

Engineering

$128,000

import DataTable, { Direction } from 'react-data-table-component';

<DataTable columns={columns} data={data} direction={Direction.RTL} pagination />;

Direction values

Value	Behaviour
`Direction.LTR` / `"ltr"`	Forces left-to-right regardless of the page's `dir` attribute.
`Direction.RTL` / `"rtl"`	Forces right-to-left. Pagination arrows flip; `dir="rtl"` is set on the wrapper.
`Direction.AUTO` / `"auto"` (default)	Reads `dir` from the `<html>` or `<body>` element at mount time and follows it.

Quick start

import DataTable, { Direction } from 'react-data-table-component';

// Explicit RTL
<DataTable columns={columns} data={data} direction={Direction.RTL} />

// Or pass the string directly
<DataTable columns={columns} data={data} direction="rtl" />

AUTO mode

With Direction.AUTO, the hook checks document.documentElement.dir anddocument.body.dir once on mount. If either is "rtl" the table renders in RTL; otherwise it renders LTR. This is useful when the surrounding app already sets a global direction and you want the table to follow it without explicitly wiring the prop.

// Set direction on your HTML element (e.g. for Arabic/Hebrew)
// <html dir="rtl">

// Then let the table pick it up automatically
<DataTable columns={columns} data={data} direction={Direction.AUTO} />;

What flips in RTL

The wrapper receives dir="rtl", which shifts inline content and flexbox row direction for you.
Pagination first/prev/next/last buttons have their icons reversed via .rdt_paginationButtonRTL.
Column right: true alignment continues to work as expected. Align numbers relative to the reading direction of the cell content, not the page.
With resizable, the resize handle moves to each column's left (end) edge and drag direction mirrors, so dragging away from the column widens it just like in LTR.

Pairing with localization

direction controls layout; localization controls strings. For a fully translated RTL table, use both together. The library keeps them separate on purpose — you may want French strings without changing layout direction, or an Arabic locale on a mixed-direction page where you manage dir yourself.

import DataTable, { Direction } from 'react-data-table-component';
import { ar } from 'react-data-table-component/locales';

<DataTable columns={columns} data={data} direction={Direction.RTL} localization={ar} />;

If your app already sets <html dir="rtl">, use Direction.AUTOso the table follows the page without an explicit prop:

<DataTable columns={columns} data={data} direction={Direction.AUTO} localization={ar} />;

Prop reference

Prop	Type	Default	Description
`direction`	`Direction`	`Direction.AUTO`	Text direction: `"ltr"`, `"rtl"`, or `"auto"`.

import { Direction } from 'react-data-table-component';

// Direction enum values
Direction.LTR; // "ltr"
Direction.RTL; // "rtl"
Direction.AUTO; // "auto"