Skip to content

Localization

Every string the table can show, in one object, with number, date and currency formatting that follows the same locale.

Report an issueSource

Basics

Loading example…

No English is hard-coded. Every label, placeholder, menu entry, announcement and empty-state message comes from the localization object, and locale drives the formatting that goes with it.

import { hu } from '@kingtech/react-tablekit/locales/hu';

<DataTable locale="hu-HU" localization={hu} data={rows} columns={columns} />;

locale is what Intl receives: numbers, currencies, dates and the collator that orders text-sorted columns all follow it. Setting the strings without the locale gives you translated labels beside American dates, which is worse than either.

Changing a few strings

The object is merged over the defaults, so overriding one label does not mean supplying all of them:

<DataTable localization={{ searchPlaceholder: 'Find a customer…' }} />

That is also how you adjust wording for a domain (records instead of rows) without a translation file.

Values with a count

A string that depends on a number can be a function instead of a {count} template. It receives the same variables, which is what lets a language with several plural forms be correct:

localization={{
  selectedCount: ({ count }) => (count === 1 ? '1 kiválasztva' : `${count} kiválasztva`),
}}

With an i18n library

The object can be built from your existing catalogue, so the table's strings live where the rest of your application's strings live. See i18next.

Customization

Every key is listed on Localization keys with its English default, so a translation can be checked against a complete list rather than discovered by clicking around.

formatters handles the values rather than the chrome (the row range, numbers, dates and currencies) and takes the same locale.

Right-to-left needs dir="rtl"; the layout uses logical properties, so pinning sides and alignment flip on their own.

Limitations

  • The bundled locales are a starting point, not a guarantee of tone. Review them before shipping to native speakers.
  • locale does not change the data. A date stored as a string is formatted only if the column is a date column or has a format.
  • One locale per table. A page showing two locales needs two tables; the state is per instance.

API

Edit this pageReport a problem with this page