@adapttable/i18n

📖 Documentation · 🚀 Live demo · Get started

Locale presets and RTL helpers for AdaptTable. The core stays i18n-agnostic; this optional package gives you ready label sets for 17 languages — English, Arabic, German, Spanish, Persian, French, Hebrew, Hindi, Italian, Japanese, Korean, Portuguese, Russian, Turkish, Urdu, Simplified Chinese, and Traditional Chinese — plus direction utilities, so you get multilingual, right-to-left support for free.

pnpm add @adapttable/i18n

Usage

import { DataTable, useFrontendData } from "@adapttable/mantine";
import { getLabels, getDirection } from "@adapttable/i18n";

function LocalizedTable({ locale }: { locale: string }) {
  const source = useFrontendData({ data, columns });
  return (
    <DataTable
      source={source}
      columns={columns}
      rowKey={(r) => r.id}
      labels={getLabels(locale)} // primary subtag → preset; unknown → English
      dir={getDirection(locale)} // "ar" / "he" → "rtl"
    />
  );
}

API

• getLabels(locale) — the label preset for a locale (matches the primary subtag, e.g. "de-AT" → German); falls back to English.
• getDirection(locale) → "ltr" | "rtl".
• isRtlLocale(locale) / primarySubtag(locale) / RTL_LANGUAGES.
• Raw preset objects: en, ar, de, es, fr, he, it, ja, pt, zh. locales — the keyed map; hasLocale(locale) — membership check.

Bring your own languages by spreading a preset and overriding strings:

import { en } from "@adapttable/i18n";
const fr = { ...en, search: "Rechercher", noData: "Aucune donnée" };

Features

• Ready label sets for English and Arabic — every string the table renders.
• RTL — pair ar with dir="rtl" and the whole table mirrors: column order, filter panel, column menu, pagination and chips, not just the text.
• Column-level i18n — map a column to a localized field with i18n: { ar: "…" } so sorting and filtering follow the translated value.
• Bring your own stack — the core is i18n-agnostic; use these sets, or pass a t function from i18next, FormatJS or anything else.
• Covers every feature's strings: filtering, selection, row expansion, cell editing, row grouping, column management, saved views, CSV export and pagination.

See it work

Every clip is the same table under an Arabic locale — the whole UI mirrors, not just the labels.

Selection + bulk actions — select-all and act on the selection, in Arabic

Inline cell editing — editors open and commit under RTL

Row grouping — group headers carry Arabic labels and subtotals

Filtering — the filter panel mirrors; chips read right-to-left

Column management — the column menu mirrors with the table

Documentation

Getting started · Live demo · Comparison vs ag-Grid · MUI X · TanStack

• Data — client vs server tiers · pagination & infinite scroll · URL-synced state
• Interaction — filtering · sorting · selection & bulk actions · row expansion · inline cell editing
• Columns — show/hide · reorder · pin · resize · row grouping & aggregates · CSV export
• More — i18n & RTL · virtualization · customization · API · FAQ

License

MIT © Orwa Mahmoud