Localization

Pass a localization object to DataTable to override every string and aria-label rendered by the table — filter panel, pagination navigation, and expand/collapse buttons. All keys are optional and fall back to English defaults.

Quick start

Import one of the pre-built locales from the /locales subpath and pass it aslocalization. That's all you need for a fully translated table.

import DataTable from 'react-data-table-component';
import { fr } from 'react-data-table-component/locales';

<DataTable columns={columns} data={data} localization={fr} />;

Built-in locales

Export	Language
`en`	English (default)
`fr`	French
`es`	Spanish
`de`	German
`ptBR`	Brazilian Portuguese
`ar`	Arabic (Modern Standard)
`he`	Hebrew
`arEG`	Arabic (Egyptian)
`arLV`	Arabic (Levantine)
`zhCN`	Chinese (Simplified)
`zhTW`	Chinese (Traditional)
`ja`	Japanese
`ko`	Korean
`uk`	Ukrainian

Each locale is a standalone module. Only the locale you import enters your bundle — the rest are tree-shaken away.

Partial override

Spread an existing locale and replace only the keys you need.

import { fr } from 'react-data-table-component/locales';
import type { Localization } from 'react-data-table-component';

const myLocale: Localization = {
  ...fr,
  filter: {
    ...fr.filter,
    applyLabel: 'Valider',
    clearLabel: 'Effacer',
  },
};

<DataTable columns={columns} data={data} localization={myLocale} />;

Custom locale from scratch

Build a locale object from the Localization type. Every key is optional — any omitted key falls back to the English default.

import type { Localization } from 'react-data-table-component';

const custom: Localization = {
  pagination: {
    navigationAriaLabel: 'Paginación de la tabla',
    firstPageAriaLabel: 'Primera página',
    previousPageAriaLabel: 'Página anterior',
    nextPageAriaLabel: 'Página siguiente',
    lastPageAriaLabel: 'Última página',
  },
  filter: {
    applyLabel: 'Aplicar',
    clearLabel: 'Limpiar',
    addConditionLabel: '+ Añadir condición',
    andLabel: 'Y',
    orLabel: 'O',
    operators: {
      contains: 'Contiene',
      equals: 'Igual a',
      blank: 'Vacío',
    },
  },
  expandable: {
    expandRowAriaLabel: 'Expandir fila',
    collapseRowAriaLabel: 'Contraer fila',
  },
};

<DataTable columns={columns} data={data} localization={custom} />;

The Localization type

All sub-objects are optional. Each key within them is also optional.

interface Localization {
  pagination?: {
    navigationAriaLabel?: string; // default: 'Table pagination'
    firstPageAriaLabel?: string; // default: 'First Page'
    previousPageAriaLabel?: string; // default: 'Previous Page'
    nextPageAriaLabel?: string; // default: 'Next Page'
    lastPageAriaLabel?: string; // default: 'Last Page'
  };

  filter?: {
    filterColumnAriaLabel?: string; // default: 'Filter column'
    filterActiveAriaLabel?: string; // default: 'Filter active'
    filterPanelAriaLabel?: string; // default: 'Filter panel'
    operatorAriaLabel?: string; // default: 'Filter operator'
    valuePlaceholder?: string; // default: 'Value'
    valueAriaLabel?: string; // default: 'Filter value'
    value2Placeholder?: string; // default: 'Value'
    value2AriaLabel?: string; // default: 'Second filter value'
    betweenSeparatorText?: string; // default: 'and'
    removeConditionAriaLabel?: string; // default: 'Remove condition'
    addConditionAriaLabel?: string; // default: 'Add second condition'
    addConditionLabel?: string; // default: '+ Add condition'
    clearLabel?: string; // default: 'Clear'
    applyLabel?: string; // default: 'Apply'
    andLabel?: string; // default: 'AND'
    orLabel?: string; // default: 'OR'
    operators?: {
      contains?: string; // default: 'Contains'
      notContains?: string; // default: 'Does not contain'
      equals?: string; // default: 'Equals'
      notEquals?: string; // default: 'Does not equal'
      startsWith?: string; // default: 'Begins with'
      endsWith?: string; // default: 'Ends with'
      blank?: string; // default: 'Blank'
      notBlank?: string; // default: 'Not blank'
      gt?: string; // default: 'Greater than'
      gte?: string; // default: '≥'
      lt?: string; // default: 'Less than'
      lte?: string; // default: '≤'
      between?: string; // default: 'Between'
      before?: string; // default: 'Before'
      after?: string; // default: 'After'
    };
  };

  expandable?: {
    expandRowAriaLabel?: string; // default: 'Expand Row'
    collapseRowAriaLabel?: string; // default: 'Collapse Row'
  };

  contextMenu?: {
    headerMenuAriaLabel?: string; // default: 'Column menu'
    rowMenuAriaLabel?: string; // default: 'Row menu'
    headerMenuButtonAriaLabel?: string; // default: 'Column actions'
    rowMenuButtonAriaLabel?: string; // default: 'Row actions'
    sortAscLabel?: string; // default: 'Sort ascending'
    sortDescLabel?: string; // default: 'Sort descending'
    clearSortLabel?: string; // default: 'Clear sort'
    pinLeftLabel?: string; // default: 'Pin left'
    pinRightLabel?: string; // default: 'Pin right'
    unpinLabel?: string; // default: 'Unpin'
    hideColumnLabel?: string; // default: 'Hide column'
    resetLabel?: string; // default: 'Reset table'
  };
}

Scope

localization covers strings rendered by the table's built-in UI. Visible text in the pagination bar (rowsPerPageText, rangeSeparatorText,selectAllRowsItemText) is still controlled bypaginationComponentOptions, since those affect layout as well as text.

Prop reference

Prop	Type	Default	Description
`localization`	`Localization`	-	Override every user-visible string and aria-label in the table. Pass a pre-built locale or build your own.
~~`columnFilterOptions`~~	`ColumnFilterOptions`	-	Deprecated. Use `localization={{ filter: { ... } }}` instead. Will be removed in v9.
~~`expandableRowsOptions`~~	`ExpandableRowsOptions`	-	Deprecated. Use `localization={{ expandable: { ... } }}` instead. Will be removed in v9.