Localization in React Data Grid

The Syncfusion® React Data Grid component includes a built-in Localization library to customize displayed text for different languages and cultural preferences. The static text on various elements can be adapted to languages such as "Arabic", "German", "French", and more by setting the locale property in a custom React Provider with a translation object.

Configuration steps

Choose the desired locale for the application, as provided in the Syncfusion React localization resources.
Install the @syncfusion/react-cldr-data package, which provides CLDR (Unicode Common Locale Data Repository) data for culture-specific formatting.
npm i @syncfusion/react-cldr-data
Import the L10n class and loadCldr function from the @syncfusion/react-base package.
Import the required localization files for the chosen language and the necessary CLDR data files:
import { L10n, loadCldr } from "@syncfusion/react-base"; import Localization from '../locale.json'; import * as enAllData from '@syncfusion/react-cldr-data/main/en/all.json'; import * as deAllData from '@syncfusion/react-cldr-data/main/de/all.json';
Call the loadCldr function with the imported data to enable formatting and parsing for the selected culture:
loadCldr(enAllData, deAllData);
Use the L10n.load method to load your translation object.
Configure the locale property in the Provider to set the selected language.

Localized text configuration for Data Grid

The following locale keywords and their corresponding text can be customized for different grid features:

Data rendering

Locale keywords	Text	Example
`noRecordsMessage`	No records to display

Columns

Locale keywords	Text	Example
`booleanTrueLabel`	true
`booleanFalseLabel`	false

Editing

Locale keywords	Text	Example
`addButtonLabel`	Add
`editButtonLabel`	Edit
`cancelButtonLabel`	Cancel
`updateButtonLabel`	Update
`deleteButtonLabel`	Delete
`confirmDeleteMessage`	Are you sure you want to delete the record?

Locale keywords	Text	Example
`currentPageLabel`	0 of 1 pages
`totalItemsLabel`	(0 items)
`firstPageTooltip`	Go to first page
`lastPageTooltip`	Go to last page
`nextPageTooltip`	Go to next page
`previousPageTooltip`	Go to previous page
`nextPageGroupTooltip`	Go to next page group
`previousPageGroupTooltip`	Go to previous page group
`pagerStatusMessage`	Pager external message
`pagerOfLabel`	of

Customizing locale text

To customize locale text by defining a translation object with the required key value pairs. Load the translation object using the L10n.load method and configure the locale property in the custom React Provider to apply the customized text.

import { L10n } from '@syncfusion/react-base';
// Load translation object for custom locale.
L10n.load({
'en-custom': {
  grid: {
    emptyRecord: 'Nothing found!',
    add: 'Create New',
    edit: 'Modify',
    delete: 'Remove',
    update: 'Save Changes',
    cancel: 'Discard'
  }
}
});
<Provider locale={'en-custom'} >
<Grid dataSource={orderData} />
</Provider>

import { L10n } from '@syncfusion/react-base';
// Load translation object for custom locale.
L10n.load({
'en-custom': {
  grid: {
    emptyRecord: 'Nothing found!',
    add: 'Create New',
    edit: 'Modify',
    delete: 'Remove',
    update: 'Save Changes',
    cancel: 'Discard'
  }
}
});
<Provider locale={'en-custom'} >
<Grid dataSource={orderData} />
</Provider>

Loading translations for culture

The Data Grid component includes a built-in Localization library that enables loading of translation objects for various languages. By utilizing the load method from the L10n class, the grid's text content can be customized to appear in the desired language.

This example demonstrates how to localize the grid using the L10n.load and loadCldr functions from the @syncfusion/react-base package. These functions enable dynamic culture switching and support for multiple languages and regional formats, allowing customized text content in the grid component.

Set different locale text for two Data Grids in same page

The Data Grid component allows configuring different locale settings for multiple grids displayed on the same page. The L10n.load function from the @syncfusion/react-base library enables customization of text content to display in different languages. The following example demonstrates how to configure different locales for two grids on the same page.

Internationalization

The Data Grid Internationalization library enables localized display of numbers, dates, and times based on the selected language and region. The format property enables customization of these values through format strings, reflects the desired cultural formatting.

The following sample demonstrates usage for "en-US (English)", "de (German - Germany)", "fr-CH (French - Azerbaijan)", "ar (Arabic)", and "zh (Chinese - China)" based on selected locale. The grid dynamically adjusts its number, date, and time formatting to align with the selected culture.