Localization

The table ships in 38 languages. English is built in, and each of the other 37 is an optional registry item you install only when you need it. Every user-facing string can also be overridden one by one with the localization option.

Install a language

Add the language after the table. Each one is its own registry item, named data-table-locale-<code>:

pnpm dlx shadcn@latest add https://monabbir-ahmmad.github.io/shadcn-react-table/r/data-table-locale-de.json

It writes one file, components/ui/data-table/locales/de.ts, and adds no npm packages. Install as many languages as you like.

Use it on one table

import { DataTable, useDataTable } from "@/components/ui/data-table"
import { dataTableLocalizationDe } from "@/components/ui/data-table/locales/de"

const table = useDataTable({
  data,
  columns,
  getRowId: (row) => row.id,
  localization: dataTableLocalizationDe,
})

return <DataTable table={table} />

Use it app-wide

To set the language for many tables at once, wrap a subtree in DataTableConfigProvider. A localization option on a single table still overrides the provider.

import { DataTableConfigProvider } from "@/components/ui/data-table"
import { dataTableLocalizationDe } from "@/components/ui/data-table/locales/de"

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <DataTableConfigProvider localization={dataTableLocalizationDe}>
      {children}
    </DataTableConfigProvider>
  )
}

Change single strings

A language is a plain object, so spread it and replace only the keys you want. Define the object outside the component: a new object on every render rebuilds the columns.

const localization = {
  ...dataTableLocalizationDe,
  rowsPerPage: "Einträge pro Seite",
}

function PeopleTable() {
  const table = useDataTable({ data, columns, localization })
  return <DataTable table={table} />
}

Numbers and dates

Dates follow the localization's language: date filters and the date picker show dates, month names and weekday names in that language, always in the Gregorian calendar. Every language file sets language for you. If you write your own localization, set language to a BCP 47 tag such as "es".

Numbers do not follow language. Each language file formats its own numbers inside its function keys (for example 1,000 in English and 1.000 in German). A custom localization that only sets language keeps English number formatting, so call toLocaleString with your tag in the function keys yourself:

rowsSelected: (selected, total) =>
  `${selected.toLocaleString("es")} de ${total.toLocaleString("es")} filas seleccionadas`,

Numbers and dates come from the runtime's Intl data, so the server and the browser can differ slightly for some languages.

Available languages

Translation quality

The translations are adapted from Material React Table (MIT License, Copyright (c) 2022 Kevin Vandy). Strings that Material React Table does not have were added here, and those lines are marked // needs review in the file: a native speaker has not checked them yet.

To fix one, edit the file in your project (it is your copy) and delete the comment. To fix it for everyone, send a pull request against the matching file under packages/shadcn-react-table/src/components/data-table/locales/.

Related