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

Are you interested in contributing some official translations that can be included in MRT by default?

Please contact us on GitHub or the Discord server to get in touch. We want to include dozens of languages and locales that can simply be imported from 'material-react-table/locales'!

Relevant Props

#
Prop Name
Type
Default Value
More Info Links
1

No Description Provided... Yet...

Built-in Locales

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

en, pt-BR

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.

Custom Non-Built-In Translations

Here's a crude not-so-accurately translated Spanish example:

Demo

Open Code SandboxOpen on GitHub
Acciones
Primer nombre
Apellido
Dirección
Ciudad
Estado
DylanMurray261 Erdman FordEast DaphneKentucky
RaquelKohler769 Dominic GroveColumbusOhio
ErvinReinger566 Brakus InletSouth LindaWest Virginia
BrittanyMcCullough722 Emie StreamLincolnNebraska
BransonFrami32188 Larkin TurnpikeCharlestonSouth Carolina

Rows per page

1-5 of 5

Source Code 

1import React from 'react';
2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
3import { data, Person } from './makeData';
4import { createTheme, ThemeProvider, useTheme } from '@mui/material';
5import { esES } from '@mui/material/locale';
6

7const columns = [
8  {
9    accessorKey: 'firstName',
10    header: 'Primer nombre',
11  },
12  {
13    accessorKey: 'lastName',
14    header: 'Apellido',
15  },
16  {
17    accessorKey: 'address',
18    header: 'Dirección',
19  },
20  {
21    accessorKey: 'city',
22    header: 'Ciudad',
23  },
24  {
25    accessorKey: 'state',
26    header: 'Estado',
27  },
28];
29

30const Example = () => {
31  const theme = useTheme();
32

33  return (
34    <ThemeProvider theme={createTheme(theme, esES)}>
35      <MaterialReactTable
36        columns={columns}
37        data={data}
38        enableColumnOrdering
39        enableEditing
40        enablePinning
41        enableRowActions
42        enableRowSelection
43        localization={{
44          actions: 'Acciones',
45          cancel: 'Cancelar',
46          changeFilterMode: 'Cambia el modo de filtro',
47          clearFilter: 'Filtro claro',
48          clearSearch: 'Borrar búsqueda',
49          clearSort: 'Ordenar claro',
50          columnActions: 'Acciones de columna',
51          edit: 'Editar',
52          expand: 'Expandir',
53          expandAll: 'Expandir todo',
54          filterByColumn: 'Filtrar por {column}',
55          filterMode: 'Modo de filtro: {filterType}',
56          grab: 'Agarrar',
57          groupByColumn: 'Agrupar por {column}',
58          groupedBy: 'Agrupados por ',
59          hideAll: 'Ocultar todo',
60          hideColumn: 'Ocultar columna de {column}',
61          rowActions: 'Acciones de fila',
62          pinToLeft: 'Alfile a la izquierda',
63          pinToRight: 'Alfile a la derecha',
64          save: 'Salvar',
65          search: 'Búsqueda',
66          selectedCountOfRowCountRowsSelected:
67            '{selectedCount} de {rowCount} fila(s) seleccionadas',
68          showAll: 'Mostrar todo',
69          showAllColumns: 'Mostrar todas las columnas',
70          showHideColumns: 'Mostrar/Ocultar columnas',
71          showHideFilters: 'Alternar filtros',
72          showHideSearch: 'Alternar búsqueda',
73          sortByColumnAsc: 'Ordenar por {column} ascendente',
74          sortByColumnDesc: 'Ordenar por {column} descendiendo',
75          thenBy: ', entonces por ',
76          toggleDensity: 'Alternar relleno denso',
77          toggleFullScreen: 'Alternar pantalla completa',
78          toggleSelectAll: 'Seleccionar todo',
79          toggleSelectRow: 'Seleccionar fila',
80          ungroupByColumn: 'Desagrupar por {column}',
81          unpin: 'Quitar pasador',
82          unsorted: 'Sin clasificar',
83        }}
84      />
85    </ThemeProvider>
86  );
87};
88

89export default Example;
90

If you are willing and able to contribute accurate translations, please consider making a PR and they will be included as an extra import in this library