Handsontable example

HTML

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

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

Babel + JSX

import Handsontable from 'handsontable';
import { registerLanguageDictionary, ptBR } from 'handsontable/i18n';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

registerLanguageDictionary(ptBR);

const container = document.querySelector('#example1');
const 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],
];

new Handsontable(container, {
  data,
  contextMenu: true,
  height: 'auto',
  language: 'pt-BR',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});