Setting up a translation in React

Overview

The following example shows a Handsontable instance with translations set up in React.

Example

import React from 'react'; import ReactDOM from 'react-dom'; import { HotTable, HotColumn } from '@handsontable/react'; import { registerAllModules } from 'handsontable/registry'; import 'handsontable/dist/handsontable.min.css'; // register Handsontable's modules registerAllModules(); import numbro from 'numbro'; import languages from 'numbro/dist/languages.min.js'; // register the languages you need numbro.registerLanguage(languages['ja-JP']); numbro.registerLanguage(languages['tr-TR']); // define formats const formatJP = { pattern: '0,0.00 $', culture: 'ja-JP' }; const formatTR = { pattern: '0,0.00 $', culture: 'tr-TR' }; const hotSettings = { data: [ { productName: 'Product A', JP_price: 1.32, TR_price: 100.56 }, { productName: 'Product B', JP_price: 2.22, TR_price: 453.5 }, { productName: 'Product C', JP_price: 3.1, TR_price: 678.1 } ], autoRowSize: false, autoColumnSize: false, colHeaders: ['Product name', 'Price in Japan', 'Price in Turkey'], height: 'auto', licenseKey: 'non-commercial-and-evaluation' } const App = () => { return ( <HotTable settings={hotSettings}> <HotColumn data="productName" type="text" width="120" /> <HotColumn data="JP_price" type="numeric" numericFormat={formatJP} width="120" /> <HotColumn data="TR_price" type="numeric" numericFormat={formatTR} width="120" /> </HotTable> ) } ReactDOM.render(<App />, document.getElementById('example1')); <script src="https://cdn.jsdelivr.net/npm/handsontable@11.0/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@11.0/dist/handsontable.full.min.css" /> <script src="https://cdn.jsdelivr.net/npm/numbro@2.1.2/dist/languages.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@handsontable/react@11.0/dist/react-handsontable.js"></script> <script src="https://handsontable.com/docs/11.0/scripts/fixer.js"></script> <script src="https://handsontable.com/docs/11.0/scripts/helpers.js"></script> <div id="example1" class="hot "></div>

import React from 'react';
import ReactDOM from 'react-dom';
import { HotTable, HotColumn } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';

import 'handsontable/dist/handsontable.min.css';

// register Handsontable's modules
registerAllModules();

import numbro from 'numbro';
import languages from 'numbro/dist/languages.min.js';

// register the languages you need
numbro.registerLanguage(languages['ja-JP']);
numbro.registerLanguage(languages['tr-TR']);

// define formats
const formatJP = {
  pattern: '0,0.00 $',
  culture: 'ja-JP'
};

const formatTR = {
  pattern: '0,0.00 $',
  culture: 'tr-TR'
};

const hotSettings = {
  data: [
    {
      productName: 'Product A',
      JP_price: 1.32,
      TR_price: 100.56
    },
    {
      productName: 'Product B',
      JP_price: 2.22,
      TR_price: 453.5
    },
    {
      productName: 'Product C',
      JP_price: 3.1,
      TR_price: 678.1
    }
  ],
  autoRowSize: false,
  autoColumnSize: false,
  colHeaders: ['Product name', 'Price in Japan', 'Price in Turkey'],
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation'
}

const App = () => {
  return (
    <HotTable settings={hotSettings}>
      <HotColumn data="productName" type="text" width="120" />
      <HotColumn
        data="JP_price"
        type="numeric"
        numericFormat={formatJP}
        width="120"
      />
      <HotColumn
        data="TR_price"
        type="numeric"
        numericFormat={formatTR}
        width="120"
      />
    </HotTable>
  )
}

ReactDOM.render(<App />, document.getElementById('example1'));