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.

    Relevant Props

    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 StackblitzOpen Code SandboxOpen on GitHub

    Kevin26
    Theodore28
    Tanner33

    Filas por página

    1-3 de 3

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