HandsontableをReactで利用する方法

Ⅰ. はじめに

タイトルの通り「HandsontableをReactで利用する方法」です

Ⅱ. 手順

1. 必要なパッケージをインストールする

npm install handsontable @handsontable/react

2. サンプルプログラムを書く

import { registerAllModules } from 'handsontable/registry'
import { HotTable } from '@handsontable/react'

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

registerAllModules()

export default function App(): JSX.Element {
  return (
    <HotTable
      data={[
        ['id', 'name', 'age', 'gender'],
        [1, 'tanaka', 11, 'm'],
        [2, 'yamada', 12, 'f'],
        [3, 'takahashi', 15, 'm']
      ]}
      rowHeaders={true}
      colHeaders={true}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  )
}

実行結果

参考

• https://github.com/handsontable/handsontable/