Localization/i18n Guide - Mantine React Table Docs

Localization (i18n) Guide

Mantine 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

	#	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 'mantine-react-table/locales/':

ar, bg, cs, da, de, en, es, et, fa, fi, fr, id, it, nl, no, ja, ko, pl, pt, pt-BR, ro, ru, sk, sr-Cryl-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.

Demo

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

Filas por página

1-3 de 3

1
//Import Mantine React Table and its Types
2
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
3

4
//Import Mantine React Table Translations
5
import { MRT_Localization_ES } from 'mantine-react-table/locales/es';
6

7
//mock data
8
import { data, type Person } from './makeData';
9

10
const columns: MRT_ColumnDef<Person>[] = [
11
  {
12
    accessorKey: 'firstName',
13
    header: 'Primer nombre',
14
  },
15
  {
16
    accessorKey: 'lastName',
17
    header: 'Apellido',
18
    enableClickToCopy: true,
19
  },
20
  {
21
    accessorKey: 'age',
22
    header: 'Años',
23
  },
24
];
25

26
const Example = () => {
27
  return (
28
    <MantineReactTable
29
      columns={columns}
30
      data={data}
31
      enableColumnFilterModes
32
      enableColumnOrdering
33
      enableEditing
34
      enablePinning
35
      enableRowActions
36
      enableRowSelection
37
      enableSelectAll={false}
38
      initialState={{ showColumnFilters: true, showGlobalFilter: true }}
39
      localization={MRT_Localization_ES}
40
    />
41
  );
42
};
43

44
export default Example;

1
//Import Mantine React Table and its Types
2
import { MantineReactTable } from 'mantine-react-table';
3

4
//Import Mantine React Table Translations
5
import { MRT_Localization_ES } from 'mantine-react-table/locales/es';
6

7
//mock data
8
import { data } from './makeData';
9

10
const columns = [
11
  {
12
    accessorKey: 'firstName',
13
    header: 'Primer nombre',
14
  },
15
  {
16
    accessorKey: 'lastName',
17
    header: 'Apellido',
18
    enableClickToCopy: true,
19
  },
20
  {
21
    accessorKey: 'age',
22
    header: 'Años',
23
  },
24
];
25

26
const Example = () => {
27
  return (
28
    <MantineReactTable
29
      columns={columns}
30
      data={data}
31
      enableColumnFilterModes
32
      enableColumnOrdering
33
      enableEditing
34
      enablePinning
35
      enableRowActions
36
      enableRowSelection
37
      enableSelectAll={false}
38
      initialState={{ showColumnFilters: true, showGlobalFilter: true }}
39
      localization={MRT_Localization_ES}
40
    />
41
  );
42
};
43

44
export default Example;

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 = useMantineReactTable({
  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
  },
});

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!