Localization/i18n Guide - Material React Table Docs

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 prop.

Relevant Props

	#	Prop Name	Type	Default Value	More Info Links
	1		MRT_Localization		Localization (i18n) Guide

Built-in Locales

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

cs, de, en, es, fa, fr, it, nl, ja, pl, pt, pt-BR, ro, ru, tr, vi

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.

Demo

Open Stackblitz Open Code Sandbox Open on GitHub

Acciones	Seleccionar	Primer nombre Modo de filtro: Difuso	Apellido Modo de filtro: Difuso	Años Modo de filtro: Difuso
		Kevin		26
		Theodore		28
		Tanner		33

Source Code

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

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 prop.

<MaterialReactTable
  columns={columns}
  data={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
  }}
/>

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!