Mantine React Table

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.

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

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

Scroll and find your language below to see an example of how to use it.

import '@mantine/core/styles.css';
import '@mantine/dates/styles.css'; //if using mantine date picker features
import 'mantine-react-table/styles.css'; //make sure MRT styles were imported in your app root (once)
//Import Mantine React Table and its Types
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';

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

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

const columns: MRT_ColumnDef<Person>[] = [
  {
    accessorKey: 'firstName',
    header: 'Primer nombre',
  },
  {
    accessorKey: 'lastName',
    header: 'Apellido',
    enableClickToCopy: true,
  },
  {
    accessorKey: 'age',
    header: 'Años',
  },
];

const Example = () => {
  return (
    <MantineReactTable
      columns={columns}
      data={data}
      enableColumnFilterModes
      enableColumnOrdering
      enableEditing
      enableColumnPinning
      enableRowActions
      enableRowSelection
      enableSelectAll={false}
      initialState={{ showColumnFilters: true, showGlobalFilter: true }}
      localization={MRT_Localization_ES}
    />
  );
};

export default Example;

Note: In some frameworks like Remix, you may need to use a full import path like
import { MRT_Localization_ES } from 'mantine-react-table/locales/es/index.js'; or
import { MRT_Localization_ES } from 'mantine-react-table/locales/es/index.esm.js';
to properly import the locale.

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
  },
});

return <MantineReactTable table={table} />;

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!