Handsontable example

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

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

SCSS

.ht-theme-main .htCore thead th.bold .colHeader {
  font-weight: 700;
}

Babel + JSX

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

// register Handsontable's modules
registerAllModules();

const setColumnHeader = (_, TH) => {
  TH.classList.add('bold')
}

const updateTableWidthContainer = (hot) => {
  if (!hot) return

  const SCROLLBAR_MARGIN = 14

  const wtHider = hot.rootElement.querySelector('.wtHider')

  if (wtHider) {
    hot.updateSettings({
      width: wtHider.clientWidth + SCROLLBAR_MARGIN,
    })
  }
}

const ExampleComponent = () => {

  const hotRef = React.useRef(null)

React.useEffect(() => {
  const hot = hotRef.current?.hotInstance
  if (!hot) return
  requestAnimationFrame(() => updateTableWidthContainer(hot))
}, [])
  return (
    <HotTable
      themeName="ht-theme-main"
      data={[
        ['', 'Tesla', 'Volvo', 'Toyota', 'Ford', 'FAW'],
        ['2019', 10, 11, 12, 13, 14],
        ['2019', 10, 11, 12, 13, 14],
        ['2019', 10, 11, 12, 13, 14],
        ['2019', 10, 11, 12, 13, 14],
        ['2019', 10, 11, 12, 13, 14],
        ['2019', 10, 11, 12, 13, 14],
        ['2019', 10, 11, 12, 13, 14],
        ['2019', 10, 11, 12, 13, 14],
        ['2019', 10, 11, 12, 13, 14],
        ['2019', 10, 11, 12, 13, 14],
        ['2019', 10, 11, 12, 13, 14],
        ['2019', 10, 11, 12, 13, 14],
        ['2019', 10, 11, 12, 13, 14],
        ['2019', 10, 11, 12, 13, 14],
        ['2019', 10, 11, 12, 13, 14],
      ]}
      rowHeaders={true}
      colHeaders={true}
      height="300"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
      afterGetColHeader={setColumnHeader}
      afterInit={function (this) {
        updateTableWidthContainer(this)
      }}
    />
  );
};

const container = document.getElementById("example");
const root =...