DevExtreme React - Right-to-Left (RTL) Support

Right-to-left (RTL) support allows UI components to adapt their layout to right-to-left locales.

Use the rtlEnabled property to enable RTL for an individual UI component:

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        rtlEnabled: true
    });
});
Angular
app.component.html
app.component.ts
<dx-data-grid ...
    [rtlEnabled]="true">
</dx-data-grid>
import { Component } from '@angular/core';
import { DxDataGridModule } from 'devextreme-angular';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    standalone: true,
    imports: [DxDataGridModule]
})
export class AppComponent {
    // ...
}
Vue
App.vue
<template>
    <DxDataGrid ...
        :rtl-enabled="true"
    />
</template>

<script setup lang="ts">
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import DxDataGrid from 'devextreme-vue/data-grid';
</script>
React
App.tsx
import React from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import DataGrid from 'devextreme-react/data-grid';

export default function App() {
    return (
        <DataGrid ...
            rtlEnabled={true}
        />
    );
}

Set the rtlEnabled property globally using the config() function to enable RTL for the entire application:

jQuery
JavaScript
$(function() {
    DevExpress.config({ rtlEnabled: true });
    // ...
});
Angular
app.component.ts
import { Component } from '@angular/core';
import config from 'devextreme/core/config';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    standalone: true
})
export class AppComponent {
    constructor() {
        config({ rtlEnabled: true });
    }
}
Vue
App.vue
<template>
    <!-- ... -->
</template>

<script setup lang="ts">
import config from 'devextreme/core/config';
config({ rtlEnabled: true });
</script>
React
App.tsx
import React from 'react';
import config from 'devextreme/core/config';

config({ rtlEnabled: true });

export default function App() {
    return (
        // ...
    );
}
See Also