skills/syncfusion-flutter-datagrid/references/right-to-left.md

Right-to-Left (RTL) — Flutter DataGrid

Overview

SfDataGrid supports right-to-left rendering. Columns are rendered based on the active text direction.

---

Method 1: Wrap with Directionality Widget

Wrap SfDataGrid in a Directionality widget and set textDirection to TextDirection.rtl:

import 'package:syncfusion_flutter_datagrid/datagrid.dart';

Directionality(
  textDirection: TextDirection.rtl,
  child: SfDataGrid(
    source: _employeeDataSource,
    columnWidthMode: ColumnWidthMode.fill,
    columns: <GridColumn>[
      GridColumn(
        columnName: 'id',
        label: Container(
          padding: EdgeInsets.all(16.0),
          alignment: Alignment.center,
          child: Text('ID'),
        ),
      ),
      GridColumn(
        columnName: 'name',
        label: Container(
          padding: EdgeInsets.all(8.0),
          alignment: Alignment.center,
          child: Text('Name'),
        ),
      ),
      GridColumn(
        columnName: 'designation',
        label: Container(
          padding: EdgeInsets.all(8.0),
          alignment: Alignment.center,
          child: Text('Designation', overflow: TextOverflow.ellipsis),
        ),
      ),
      GridColumn(
        columnName: 'salary',
        label: Container(
          padding: EdgeInsets.all(8.0),
          alignment: Alignment.center,
          child: Text('Salary'),
        ),
      ),
    ],
  ),
)

---

Method 2: Set Locale to an RTL Language

Change the app locale in MaterialApp to an RTL language (Arabic, Persian, Hebrew, Pashto, Urdu, etc.).

Add dependency

dependencies:
  flutter_localizations:
    sdk: flutter

Implementation

import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';

MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: <Locale>[
    Locale('en'),
    Locale('ar'),
  ],
  locale: Locale('ar'),  // Arabic → RTL
  home: SfDataGrid(
    source: _employeeDataSource,
    columnWidthMode: ColumnWidthMode.fill,
    columns: <GridColumn>[
      GridColumn(
        columnName: 'id',
        label: Container(padding: EdgeInsets.all(16.0), alignment: Alignment.center, child: Text('ID')),
      ),
      GridColumn(
        columnName: 'name',
        label: Container(padding: EdgeInsets.all(8.0), alignment: Alignment.center, child: Text('Name')),
      ),
      GridColumn(
        columnName: 'designation',
        label: Container(padding: EdgeInsets.all(8.0), alignment: Alignment.center, child: Text('Designation', overflow: TextOverflow.ellipsis)),
      ),
      GridColumn(
        columnName: 'salary',
        label: Container(padding: EdgeInsets.all(8.0), alignment: Alignment.center, child: Text('Salary')),
      ),
    ],
  ),
)

---

Key Points

• The Directionality widget approach is the simplest and does not require locale packages.
• The locale-based approach automatically applies RTL when the user's device language is set to an RTL language.
• Both methods affect the rendering direction of columns, scroll direction, and widget alignment inside the DataGrid.

---

TOC

• Method 1: Wrap with Directionality Widget
• Method 2: Set Locale to an RTL Language