Localization

Every string the table shows (buttons, tooltips, menu items, placeholders, aria labels) comes from the localization option. The default is English.

Using a built in locale

Each locale is its own module, so only the ones you import end up in your bundle:

<script lang="ts">
  import { MaterialSvelteTable } from 'material-svelte-tanstack-table';
  import { MRT_Localization_FR } from 'material-svelte-tanstack-table/locales/fr';
</script>

<MaterialSvelteTable options={{ columns, data, localization: MRT_Localization_FR }} />

There are 39 built in locales:

Language	Export	Import path
`ar`	`MRT_Localization_AR`	`material-svelte-tanstack-table/locales/ar`
`az`	`MRT_Localization_AZ`	`material-svelte-tanstack-table/locales/az`
`bg`	`MRT_Localization_BG`	`material-svelte-tanstack-table/locales/bg`
`cs`	`MRT_Localization_CS`	`material-svelte-tanstack-table/locales/cs`
`da`	`MRT_Localization_DA`	`material-svelte-tanstack-table/locales/da`
`de`	`MRT_Localization_DE`	`material-svelte-tanstack-table/locales/de`
`el`	`MRT_Localization_EL`	`material-svelte-tanstack-table/locales/el`
`en`	`MRT_Localization_EN`	`material-svelte-tanstack-table/locales/en`
`es`	`MRT_Localization_ES`	`material-svelte-tanstack-table/locales/es`
`et`	`MRT_Localization_ET`	`material-svelte-tanstack-table/locales/et`
`fa`	`MRT_Localization_FA`	`material-svelte-tanstack-table/locales/fa`
`fi`	`MRT_Localization_FI`	`material-svelte-tanstack-table/locales/fi`
`fr`	`MRT_Localization_FR`	`material-svelte-tanstack-table/locales/fr`
`he`	`MRT_Localization_HE`	`material-svelte-tanstack-table/locales/he`
`hr`	`MRT_Localization_HR`	`material-svelte-tanstack-table/locales/hr`
`hu`	`MRT_Localization_HU`	`material-svelte-tanstack-table/locales/hu`
`hy`	`MRT_Localization_HY`	`material-svelte-tanstack-table/locales/hy`
`id`	`MRT_Localization_ID`	`material-svelte-tanstack-table/locales/id`
`it`	`MRT_Localization_IT`	`material-svelte-tanstack-table/locales/it`
`ja`	`MRT_Localization_JA`	`material-svelte-tanstack-table/locales/ja`
`ko`	`MRT_Localization_KO`	`material-svelte-tanstack-table/locales/ko`
`mk`	`MRT_Localization_MK`	`material-svelte-tanstack-table/locales/mk`
`nl`	`MRT_Localization_NL`	`material-svelte-tanstack-table/locales/nl`
`no`	`MRT_Localization_NO`	`material-svelte-tanstack-table/locales/no`
`np`	`MRT_Localization_NP`	`material-svelte-tanstack-table/locales/np`
`pl`	`MRT_Localization_PL`	`material-svelte-tanstack-table/locales/pl`
`pt-BR`	`MRT_Localization_PT_BR`	`material-svelte-tanstack-table/locales/pt-BR`
`pt`	`MRT_Localization_PT`	`material-svelte-tanstack-table/locales/pt`
`ro`	`MRT_Localization_RO`	`material-svelte-tanstack-table/locales/ro`
`ru`	`MRT_Localization_RU`	`material-svelte-tanstack-table/locales/ru`
`sk`	`MRT_Localization_SK`	`material-svelte-tanstack-table/locales/sk`
`sr-Cyrl-RS`	`MRT_Localization_SR_CYRL_RS`	`material-svelte-tanstack-table/locales/sr-Cyrl-RS`
`sr-Latn-RS`	`MRT_Localization_SR_LATN_RS`	`material-svelte-tanstack-table/locales/sr-Latn-RS`
`sv`	`MRT_Localization_SV`	`material-svelte-tanstack-table/locales/sv`
`tr`	`MRT_Localization_TR`	`material-svelte-tanstack-table/locales/tr`
`uk`	`MRT_Localization_UK`	`material-svelte-tanstack-table/locales/uk`
`vi`	`MRT_Localization_VI`	`material-svelte-tanstack-table/locales/vi`
`zh-Hans`	`MRT_Localization_ZH_HANS`	`material-svelte-tanstack-table/locales/zh-Hans`
`zh-Hant`	`MRT_Localization_ZH_HANT`	`material-svelte-tanstack-table/locales/zh-Hant`

Overriding or adding strings

localization takes a partial object, and anything you leave out falls back to English. Spread a locale to change a few of its strings:

import { MRT_Localization_DE } from 'material-svelte-tanstack-table/locales/de';

localization: { ...MRT_Localization_DE, search: 'Suchen…', noRecordsToDisplay: 'Keine Einträge' },

Some strings contain placeholders in braces, for example filterByColumn: 'Filter by {column}' and groupByColumn: 'Group by {column}'. Keep the placeholders in your translation.

A locale of your own

Type it as MRT_Localization and the compiler lists every key you still need:

import type { MRT_Localization } from 'material-svelte-tanstack-table';

export const MyLocale: MRT_Localization = {
  language: 'xx',
  // ...
};

The full list of keys is in the MRT_Localization type, and src/lib/locales/en.ts in the repository is a complete example to copy. Contributions of new or corrected locales are welcome.

Right to left languages

Arabic (ar), Persian (fa) and Hebrew (he) read right to left. Set dir="rtl" on a parent element, and columnResizeDirection: 'rtl' if column resizing is enabled.

Date and time inputs

The date filters use the browser’s native date and time inputs, which follow the browser’s language rather than the table’s localization.