MRT logoMaterial React Table

Localization (i18n) Guide

Material React Table has full support for localization (i18n). Some locales are included by default, but if your language is not yet supported, you can still easily add your own custom translations to the localization table option.

Relevant Table Options

1
MRT_Localization
Localization (i18n) Guide

Built-in Locales

The following locales are included and can be imported from 'material-react-table/locales/':

am, ar, az, bg, cs, da, de, en, es, et, fa, fi, fr, hu, he, hy, id, it, ja, ko, nl, no, np, pl, pt, pt-BR, ro, ru, sk, sr-Cyrl-RS, sr-Latn-RS, sv, tr, uk, vi, zh-Hans, zh-Hant

If your language is not yet supported, please consider making a PR to add it to the library! See here on GitHub.

Built-in Locale Examples

Scroll and find your language below to see an example of how to use it.

Kevin26
Theodore28
Tanner33
1-3 de 3

Source Code

1//Import Material React Table and its Types
2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
3
4//Import Material React Table Translations
5import { MRT_Localization_ES } from 'material-react-table/locales/es';
6
7//mock data
8import { data, type Person } from './makeData';
9
10const columns: MRT_ColumnDef<Person>[] = [
11 //column definitions...
26];
27
28const Example = () => {
29 return (
30 <MaterialReactTable
31 columns={columns}
32 data={data}
33 enableColumnFilterModes
34 enableColumnOrdering
35 enableEditing
36 enableColumnPinning
37 enableRowActions
38 enableRowSelection
39 enableSelectAll={false}
40 initialState={{ showColumnFilters: true, showGlobalFilter: true }}
41 localization={MRT_Localization_ES}
42 />
43 );
44};
45
46//App.tsx or similar
47import { createTheme, ThemeProvider, useTheme } from '@mui/material';
48import { esES } from '@mui/material/locale';
49
50const ExampleWithThemeProvider = () => {
51 const theme = useTheme(); //replace with your theme/createTheme
52 return (
53 //Setting Material UI locale as best practice to result in better accessibility
54 <ThemeProvider theme={createTheme(theme, esES)}>
55 <Example />
56 </ThemeProvider>
57 );
58};
59
60export default ExampleWithThemeProvider;
61

Note: In some frameworks like Remix, you may need to use a full import path like
import { MRT_Localization_ES } from 'material-react-table/locales/es/index.js'; or
import { MRT_Localization_ES } from 'material-react-table/locales/es/index.esm.js';
to properly import the locale.

Custom Non-Built-In Translations

If you want to use a language that is not included in the library, you can still easily add your own custom translations to the localization table option.

const table = useMaterialReactTable({
columns,
data,
localization: {
actions: 'Ações',
and: 'e',
cancel: 'Cancelar',
changeFilterMode: 'Alterar o modo de filtro',
changeSearchMode: 'Alterar o modo de pesquisa',
clearFilter: 'Limpar filtros',
clearSearch: 'Limpar pesquisa',
clearSort: 'Limpar classificações',
clickToCopy: 'Clique para copiar',
// ... and many more - see link below for full list of translation keys
},
});
return <MaterialReactTable table={table} />;

For a full list of all available translation keys, see here

If you end up fully translating MRT into another language that is not yet supported, please consider making a PR to add it to the library so that everyone can use it!