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, { FC } 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] as MRT_ColumnDef<Person>[];
    29

    30const Example: FC = () => {
    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