Per cell currency formatting

by Blake Gilchrist

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css" /> 
<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/[email protected]/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

<div id="example1" class="hot "></div>

Babel + JSX

import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['Tesla', 2017, 'USD', '50000'],
        ['Nissan', 2018, 'GBP', '65000'],
        ['Chrysler', 2019, 'USD', '45000'],
        ['Volvo', 2020, 'Euro', '30000']
      ]}
      colHeaders={['Car', 'Year', 'Buying currency', 'Buying amount']}
      columns={[
        {},
        { type: 'numeric' },
        {
          type: 'dropdown',
          source: ['USD', 'GBP', 'Euro']
        },
        {
          type: 'numeric',
          numericFormat: {
          pattern: '$0,0.00',
          culture: 'en-US', // this is the default culture, set up for USD
          },
        }
      ]}
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};



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