DocsGuides

Guides

Localization/i18n Guide

How to customize localization and translations (i18n) in Shadcn Table

Shadcn 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
1ST_LocalizationLocalization (i18n) Guide

Built-in Locales

English ships with the table. Every other locale is its own registry item, shadcn-table-locale-<code>, installed after the table from the same base path of the registry (/r/radix/ for a radix-* style in components.json, /r/base/ for a base-* style):

pnpm dlx shadcn@latest add https://www.shadcn-table.com/r/radix/shadcn-table-locale-de.json   # Radix UI
pnpm dlx shadcn@latest add https://www.shadcn-table.com/r/base/shadcn-table-locale-de.json    # Base UI

With the @st namespace registered (see Installation), pnpm dlx shadcn@latest add @st/shadcn-table-locale-de picks the path from the project's style. GitHub fallback: anindosarker/shadcn-table/shadcn-table-locale-de (Radix UI) and anindosarker/shadcn-table/shadcn-table-base-locale-de (Base UI).

The item lands in components/ui/shadcn-table/locales/<code>.ts and is imported from '@/components/ui/shadcn-table/locales/<code>'. Available codes:

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. A locale is data shared by both bases: add one file under shared/.

Built-in Locale Examples

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

Loading 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 = useShadcnTable({
  columns,
  data,
  localization: {
    language: 'pt', // BCP 47 language tag for number formatting
    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 <ShadcnTable 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 ST 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!

On this page