React Data GridLanguage

Set Handsontable's UI language to one of the built-in translations, or create your own language set using our templates.

Overview
Load the prepared language files
- Demo
List of translatable features
List of available languages
- Create custom languages
Language file
- Local language
Use custom keys in the translation
Static Handsontable methods and properties
Related articles
- Related guides
- Related API reference

Overview

You can easily change the text of the UI for the purpose of translating it to specific languages. We provide the developer with predefined languages, which can be applied by loading the language set and changing just one setting, and an ability to use their own language sets, created using templates of existing language files.

TIP

To properly display RTL languages, configure Handsontable's layout direction.

Load the prepared language files

To properly use the internationalization feature, you need to load the language sets. It's important that they're included after the Handsontable files. You can do it by getting the necessary files created with the UMD standard:

ES modules (ESM)

import Handsontable from 'handsontable/base';
import { HotTable } from '@handsontable/react-wrapper';
import { registerLanguageDictionary, deDE } from 'handsontable/i18n';

registerLanguageDictionary(deDE);

const App = () => {
  return (
    <HotTable
      language={deDE.languageCode}
    />
  );
};

CommonJS (CJS)

const Handsontable = require('handsontable/base').default;
const { registerLanguageDictionary, deDE } = require('handsontable/i18n');

registerLanguageDictionary(deDE);

const App = () => {
  return (
    <HotTable
      language={deDE.languageCode}
    />
  );
};

Demo

To see the translated context menu, right-click on a cell.

Language files were loaded after loading Handsontable.

{
  "name": "handsontable",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "hyperformula": "^2.4.0",
    "handsontable": "15.0",
    "@handsontable/react-wrapper": "15.0"
  },
  
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Handsontable</title>
  </head>

  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root"></div>
  </body>
</html>

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import ExampleComponent from "./ExampleComponent";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <ExampleComponent />
  </StrictMode>
);

import React from "react";
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import { registerLanguageDictionary, deDE } from 'handsontable/i18n';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();
registerLanguageDictionary(deDE);

const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['Lorem', 'ipsum', 'dolor', 'sit', '12/1/2015', 23],
        ['adipiscing', 'elit', 'Ut', 'imperdiet', '5/12/2015', 6],
        ['Pellentesque', 'vulputate', 'leo', 'semper', '10/23/2015', 26],
        ['diam', 'et', 'malesuada', 'libero', '12/1/2014', 98],
        ['orci', 'et', 'dignissim', 'hendrerit', '12/1/2016', 8.5],
      ]}
      contextMenu={true}
      height="auto"
      language="de-DE"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

export default ExampleComponent;

import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import { registerLanguageDictionary, deDE } from 'handsontable/i18n';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();
registerLanguageDictionary(deDE);

const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['Lorem', 'ipsum', 'dolor', 'sit', '12/1/2015', 23],
        ['adipiscing', 'elit', 'Ut', 'imperdiet', '5/12/2015', 6],
        ['Pellentesque', 'vulputate', 'leo', 'semper', '10/23/2015', 26],
        ['diam', 'et', 'malesuada', 'libero', '12/1/2014', 98],
        ['orci', 'et', 'dignissim', 'hendrerit', '12/1/2016', 8.5],
      ]}
      contextMenu={true}
      height="auto"
      language="de-DE"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};



ReactDOM.render(<ExampleComponent />, document.getElementById("example1"));

<script src="https://cdn.jsdelivr.net/npm/handsontable@15.0/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@15.0/styles/handsontable.min.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@15.0/styles/ht-theme-main.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@15.0/styles/ht-theme-horizon.css" /> 
<script src="https://cdn.jsdelivr.net/npm/handsontable@15.0/dist/languages/all.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react-wrapper@15.0/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

<div id="example1" class="hot ht-theme-main-dark-auto "></div>

{
  "name": "handsontable",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "hyperformula": "^2.4.0",
    "handsontable": "15.0",
    "@handsontable/react-wrapper": "15.0"
  },
  
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Handsontable</title>
  </head>

  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root"></div>
  </body>
</html>

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import ExampleComponent from "./ExampleComponent";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <ExampleComponent />
  </StrictMode>
);

import React from "react";
import { useState, useEffect } from 'react';
import { HotTable } from '@handsontable/react-wrapper';
import {
  registerLanguageDictionary,
  getLanguagesDictionaries,
  arAR,
  csCZ,
  deCH,
  deDE,
  esMX,
  frFR,
  hrHR,
  itIT,
  jaJP,
  koKR,
  lvLV,
  nbNO,
  nlNL,
  plPL,
  ptBR,
  ruRU,
  srSP,
  zhCN,
  zhTW,
} from 'handsontable/i18n';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();
registerLanguageDictionary(arAR);
registerLanguageDictionary(csCZ);
registerLanguageDictionary(deCH);
registerLanguageDictionary(deDE);
registerLanguageDictionary(esMX);
registerLanguageDictionary(frFR);
registerLanguageDictionary(hrHR);
registerLanguageDictionary(itIT);
registerLanguageDictionary(jaJP);
registerLanguageDictionary(koKR);
registerLanguageDictionary(lvLV);
registerLanguageDictionary(nbNO);
registerLanguageDictionary(nlNL);
registerLanguageDictionary(plPL);
registerLanguageDictionary(ptBR);
registerLanguageDictionary(ruRU);
registerLanguageDictionary(srSP);
registerLanguageDictionary(zhCN);
registerLanguageDictionary(zhTW);

const ExampleComponent = () => {
  const [language, setLanguage] = useState('en-US');
  const [languageList, setLanguageList] = useState([]);

  useEffect(() => {
    setLanguageList(getLanguagesDictionaries());
  }, []);

  const updateHotLanguage = (event) => {
    setLanguage(event.target.value);
  };

  return (
    <div>
      <div className="controls select-language">
        <label>
          Select language of the context menu:{' '}
          <select value={language} onChange={updateHotLanguage}>
            {languageList.map(({ languageCode }) => (
              <option key={languageCode} value={languageCode}>
                {languageCode}
              </option>
            ))}
          </select>
        </label>
      </div>

      <HotTable
        data={[
          ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],
          ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],
          ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],
          ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],
          ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],
        ]}
        colHeaders={true}
        rowHeaders={true}
        contextMenu={true}
        height="auto"
        language={language}
        autoWrapRow={true}
        autoWrapCol={true}
        licenseKey="non-commercial-and-evaluation"
      />
    </div>
  );
};

export default ExampleComponent;

import { useState, useEffect } from 'react';
import { HotTable } from '@handsontable/react-wrapper';
import {
  registerLanguageDictionary,
  getLanguagesDictionaries,
  arAR,
  csCZ,
  deCH,
  deDE,
  esMX,
  frFR,
  hrHR,
  itIT,
  jaJP,
  koKR,
  lvLV,
  nbNO,
  nlNL,
  plPL,
  ptBR,
  ruRU,
  srSP,
  zhCN,
  zhTW,
} from 'handsontable/i18n';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();
registerLanguageDictionary(arAR);
registerLanguageDictionary(csCZ);
registerLanguageDictionary(deCH);
registerLanguageDictionary(deDE);
registerLanguageDictionary(esMX);
registerLanguageDictionary(frFR);
registerLanguageDictionary(hrHR);
registerLanguageDictionary(itIT);
registerLanguageDictionary(jaJP);
registerLanguageDictionary(koKR);
registerLanguageDictionary(lvLV);
registerLanguageDictionary(nbNO);
registerLanguageDictionary(nlNL);
registerLanguageDictionary(plPL);
registerLanguageDictionary(ptBR);
registerLanguageDictionary(ruRU);
registerLanguageDictionary(srSP);
registerLanguageDictionary(zhCN);
registerLanguageDictionary(zhTW);

const ExampleComponent = () => {
  const [language, setLanguage] = useState('en-US');
  const [languageList, setLanguageList] = useState([]);

  useEffect(() => {
    setLanguageList(getLanguagesDictionaries());
  }, []);

  const updateHotLanguage = (event) => {
    setLanguage(event.target.value);
  };

  return (
    <div>
      <div className="controls select-language">
        <label>
          Select language of the context menu:{' '}
          <select value={language} onChange={updateHotLanguage}>
            {languageList.map(({ languageCode }) => (
              <option key={languageCode} value={languageCode}>
                {languageCode}
              </option>
            ))}
          </select>
        </label>
      </div>

      <HotTable
        data={[
          ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],
          ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],
          ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],
          ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],
          ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],
        ]}
        colHeaders={true}
        rowHeaders={true}
        contextMenu={true}
        height="auto"
        language={language}
        autoWrapRow={true}
        autoWrapCol={true}
        licenseKey="non-commercial-and-evaluation"
      />
    </div>
  );
};



ReactDOM.render(<ExampleComponent />, document.getElementById("example2"));

<script src="https://cdn.jsdelivr.net/npm/handsontable@15.0/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@15.0/styles/handsontable.min.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@15.0/styles/ht-theme-main.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@15.0/styles/ht-theme-horizon.css" /> 
<script src="https://cdn.jsdelivr.net/npm/handsontable@15.0/dist/languages/all.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react-wrapper@15.0/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

<div id="example2" class="hot ht-theme-main-dark-auto "></div>

import { useState, useEffect } from 'react';
import { HotTable } from '@handsontable/react-wrapper';
import {
  registerLanguageDictionary,
  getLanguagesDictionaries,
  arAR,
  csCZ,
  deCH,
  deDE,
  esMX,
  frFR,
  hrHR,
  itIT,
  jaJP,
  koKR,
  lvLV,
  nbNO,
  nlNL,
  plPL,
  ptBR,
  ruRU,
  srSP,
  zhCN,
  zhTW,
} from 'handsontable/i18n';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();
registerLanguageDictionary(arAR);
registerLanguageDictionary(csCZ);
registerLanguageDictionary(deCH);
registerLanguageDictionary(deDE);
registerLanguageDictionary(esMX);
registerLanguageDictionary(frFR);
registerLanguageDictionary(hrHR);
registerLanguageDictionary(itIT);
registerLanguageDictionary(jaJP);
registerLanguageDictionary(koKR);
registerLanguageDictionary(lvLV);
registerLanguageDictionary(nbNO);
registerLanguageDictionary(nlNL);
registerLanguageDictionary(plPL);
registerLanguageDictionary(ptBR);
registerLanguageDictionary(ruRU);
registerLanguageDictionary(srSP);
registerLanguageDictionary(zhCN);
registerLanguageDictionary(zhTW);

const ExampleComponent = () => {
  const [language, setLanguage] = useState('en-US');
  const [languageList, setLanguageList] = useState([]);

  useEffect(() => {
    setLanguageList(getLanguagesDictionaries());
  }, []);

  const updateHotLanguage = (event) => {
    setLanguage(event.target.value);
  };

  return (
    <div>
      <div className="controls select-language">
        <label>
          Select language of the context menu:{' '}
          <select value={language} onChange={updateHotLanguage}>
            {languageList.map(({ languageCode }) => (
              <option key={languageCode} value={languageCode}>
                {languageCode}
              </option>
            ))}
          </select>
        </label>
      </div>

      <HotTable
        data={[
          ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],
          ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],
          ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],
          ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],
          ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],
        ]}
        colHeaders={true}
        rowHeaders={true}
        contextMenu={true}
        height="auto"
        language={language}
        autoWrapRow={true}
        autoWrapCol={true}
        licenseKey="non-commercial-and-evaluation"
      />
    </div>
  );
};

export default ExampleComponent;

List of translatable features

Below is a list of features which can be translated:

Dropdown menu
Filtering
Hiding columns
Hiding rows
Nesting rows
Comments
Context menu
Custom borders
Freezing
Merge cells
Read-only

List of available languages

By default, Handsontable uses the English - United States language-country set (en-US code) for creating the text of UI elements. However, it can be used like every extra, "non-standard" language file, thus the en-US.js file can be found in /dist/languages, /languages and /src/languages folders. Currently, we also distribute extra language-country files:

ar-AR.js for Arabic - Global (ar-AR code). To render this language as intended, set the layout direction to RTL.
cs-CZ.js for Czech - Czechia (cs-CZ code).
de-CH.js for German - Switzerland (de-CH code).
de-DE.js for German - Germany (de-DE code).
es-MX.js for Spanish - Mexico (es-MX code).
fr-FR.js for French - France (fr-FR code).
hr-HR.js for Croatian - Croatia (hr-HR code).
it-IT.js for Italian - Italy (it-IT code).
ja-JP.js for Japanese - Japan (ja-JP code).
ko-KR.js for Korean - Korea (ko-KR code).
lv-LV.js for Latvian - Latvia (lv-LV code).
nb-NO.js for Norwegian (Bokmål) - Norway (nb-NO code).
nl-NL.js for Dutch - Netherlands (nl-NL code).
pl-PL.js for Polish - Poland (pl-PL code).
pt-BR.js for Portuguese - Brazil (pt-BR code).
ru-RU.js for Russian - Russia (ru-RU code).
sr-SP.js for Serbian (Latin) - Serbia (sr-SP code).
zh-CN.js for Chinese - China (zh-CN code).
zh-TW.js for Chinese - Taiwan (zh-TW code).

Create custom languages

You can create custom language sets for your implementations, or share them, as they're easily applicable to any Handsontable implementation.

Language file

It's really important for us, that the community is a important part of the growth of our library. We encourage you to create and share your translations!

Additional languages files should be placed in the src/i18n/languages folder of the Handsontable repository with name corresponding to the chosen language code (described below, for example: es-VE.js). You can incorporate your translations to the Handsontable library by sending us a pull request. It's important, that your changes are not made to the /languages and /dist/languages directories! We will generate the final files to be placed there. After that, you'll be able to use the languages in Handsontable.

You can see a full template of a sample language at the bottom of this paragraph. We're basing it on our default language pack (opens new window). Parts of the file creation process are described below.

The file should start with a comment containing the translation authors (separated by commas, for example: Authors: Chris Wick, John Kyle), "last updated" date (in format: mmm dd, yyyy, for example: Last updated: Jan 01, 2017) and a description.
```
/**
* @preserve
* Authors: Chris Wick, John Kyle
* Last updated: Nov 15, 2017
*
* Description: Definition file for Spanish - Venezuela language-country.
*/
```
Now, import the dictionary keys to be used in the translation.
```
import * as C from '../constants';
```
The language dictionary object should contain a languageCode key (in format: two lowercase letters, hyphen, two uppercase letters, for example: languageCode: 'es-PY') which will determine the language code to be used in the language property in the Handsontable settings and dictionaries keys with their corresponding translations.
```
const dictionary = {
  languageCode: 'es-VE',
  [C.CONTEXTMENU_ITEMS_ROW_ABOVE]: 'Insertar fila arriba',
  ...
}
```
Lastly, place a default export of the created dictionary.
```
export default dictionary;
```
A simple, sample language dictionary can look like the snippet below. The /languages and /dist/languages folders will be generated by the build process. Files from those localizations can be included as shown in this section. After loading them, you will be able to use the language. You can do it by changing the language setting of Handsontable to es-VE.
```
/**
* @preserve
* Authors: Chris Wick, John Kyle
* Last updated: Nov 15, 2017
*
* Description: Definition file for Spanish - Venezuela language-country.
*/
import * as C from '../constants';

const dictionary = {
  languageCode: 'es-VE',
  [C.CONTEXTMENU_ITEMS_ROW_ABOVE]: 'Insertar fila arriba',
};

export default dictionary;
```

Import already created file inside the src/i18n/languages/index.js file and export it like it's shown in the snippet below (keys in a alphabetical order).

import deCH from './de-CH';
import deDE from './de-DE';
import enUS from './en-US';
import esVE from './es-VE';
import plPL from './pl-PL';

export {
  deCH,
  deDE,
  enUS,
  esVE,
  plPL
};

Voilà! You've created a language which can be used just by you or shared with others. We wait for at least 5 positive feedback from users to accept a created pull request.

Local language

You can register a language dictionary which is not a part of the Handsontable package. To do so, use the static Handsontable.languages.registerLanguageDictionary method and the static constant Handsontable.languages.dictionaryKeys which are described briefly in the next section.

const C = Handsontable.languages.dictionaryKeys;

Handsontable.languages.registerLanguageDictionary({
  languageCode: 'morse',
  // Your translation in the Morse code
  [C.FILTERS_BUTTONS_OK]: '--- -•-'
});

Use custom keys in the translation

You can register a language dictionary containing custom keys. These entries can be used like any other keys, so you're not limited to using our pre-defined constants (the ones that are present within src/i18n/constants.js file and may be accessed by Handsontable.languages.dictionaryKeys alias).

const enUSDictionary = Handsontable.languages.getLanguageDictionary('en-US');

enUSDictionary.customKey = 'Hello world';

Handsontable.languages.registerLanguageDictionary(enUSDictionary); // re-registration
Handsontable.languages.getTranslatedPhrase('en-US', 'customKey'); // 'Hello world'

Configuration options:
Core methods:
Hooks:
- afterLanguageChange
- beforeLanguageChange

React Data GridLanguage

Overview

Load the prepared language files

Demo

List of translatable features

List of available languages

Create custom languages

Language file

Local language

Use custom keys in the translation

Static Handsontable methods and properties

Get language dictionary for specific language code

Get the registered language dictionaries

Get the phrase for specified dictionary key

Register a language dictionary for a specific language code

Dictionary constants