它在7.0后开始转为付费软件，最后一个开源免费的版本是6.2.2。
其中本项目创建和安装过程如下：
1、创建umi项目，安装过程中选择使用dva
yarncreateumiyarninstall2、安装Handsontable社区版6.2.2和React包装器
npminstallhandsontable@6.2.2@handsontable/react3、在app.js中引入Handsontable样式和中文语言包
import'handsontable/dist/handsontable.full.css';import"handsontable/languages/zh-CN";4、在组件中使用@handsontable/react
自定义编辑器部分的代码：
//自定义编辑器classCustomEditorextendsHandsontable.editors.TextEditor{createElements(){super.createElements();//使用input元素this.TEXTAREA=document.createElement('input');//定义placeholder属性this.TEXTAREA.setAttribute('placeholder','自定义的placeholder');this.TEXTAREA.className='handsontableInput';this.textareaStyle=this.TEXTAREA.style;Handsontable.dom.empty(this.TEXTAREA_PARENT);this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);}}在handsontable中的使用：
通过Handsontable.languages.getLanguagesDictionaries()获取所有语言，并通过选择动态改变语言设置。
需要注意，返回的语言跟引入的语言包有关，需要在公共位置引入：
import"handsontable/languages/zh-CN";示例代码如下：
使用了umi.js，这里当然也顺便通过dva来实现该案例的效果。
建立model/setting.js如下：
importHandsontablefrom'handsontable';exportdefault{namespace:'setting',state:{data:Handsontable.helper.createSpreadsheetData(5,3),colHeaders:true,rowHeaders:true,readOnly:false,},reducers:{save(state,action){return{...state,...action.payload};},},effects:{*updateData({payload:{dataChanges},},{select,put},){constdata=yieldselect(state=>state.setting.data);constnewData=data.slice(0);//eslint-disable-next-lineno-unused-varsfor(let[row,column,oldValue,newValue]ofdataChanges){newData[row][column]=newValue;}yieldput({type:'save',payload:{data:newData,},});},*updateReadOnly({payload:{readOnly}},{put}){console.log(readOnly,'readOnly');yieldput({type:'save',payload:{readOnly,},});},},};组件代码：
this.hotTableComponent.current.hotInstance.loadData([['new','data']]);