Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.material-react-table.com/docs/guides/localization below:

Localization/i18n Guide - Material React Table V3 Docs

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 table option.

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

ar, az, bg, cs, da, de, el, en, es, et, fa, fi, fr, he, hr, hu, 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.

Acciones

Seleccionar

Primer nombre

Modo de filtro: Difuso

Apellido

Modo de filtro: Difuso

Años

Modo de filtro: Difuso

1
2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
3
4
5import { MRT_Localization_ES } from 'material-react-table/locales/es';
6
7
8import { data, type Person } from './makeData';
9
10const columns: MRT_ColumnDef<Person>[] = [
11  
12  {
13    accessorKey: 'firstName',
14    header: 'Primer nombre',
15  },
16  {
17    accessorKey: 'lastName',
18    header: 'Apellido',
19    enableClickToCopy: true,
20  },
21  {
22    accessorKey: 'age',
23    header: 'Años',
24  },
25  
26];
27
28const Example = () => {
29  return (
30    <MaterialReactTable
31      columns={columns}
32      data={data}
33      enableColumnFilterModes
34      enableColumnOrdering
35      enableEditing
36      enableColumnPinning
37      enableRowActions
38      enableRowSelection
39      enableSelectAll={false}
40      initialState={{ showColumnFilters: true, showGlobalFilter: true }}
41      localization={MRT_Localization_ES}
42    />
43  );
44};
45
46
47import { createTheme, ThemeProvider, useTheme } from '@mui/material';
48import { esES } from '@mui/material/locale';
49
50const ExampleWithThemeProvider = () => {
51  const theme = useTheme(); 
52  return (
53    
54    <ThemeProvider theme={createTheme(theme, esES)}>
55      <Example />
56    </ThemeProvider>
57  );
58};
59
60export default ExampleWithThemeProvider;
61

Note: In some frameworks like Remix, you may need to use a full import path like
import { MRT_Localization_ES } from 'material-react-table/locales/es/index.js'; or
import { MRT_Localization_ES } from 'material-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 = useMaterialReactTable({
  columns,
  data,
  localization: {
    language: 'pt', 
    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',
  },
});
return <MaterialReactTable table={table} />;

For a full list of all available translation keys, see here. Please note that each localization object should include a language property containing a valid BCP 47 language tag to ensure proper number formatting.

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!

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4