Handsontable.js 表格处理(react的应用)

页面部分：

<HotTable

 

data={date}

colHeaders ={[中国，日本，韩国，朝鲜]}

columns={[{date:zhonguo},{date:riben},{date:hanguo},{date:chaoxian}]}

height={表格行高}

width={表格宽}

colWidths={表格宽度}

afterChange =

{(changes, source) => {      //表格编辑改变前改变后的数据获取

         const rowValue = changes[idx][0];

         const field = changes[idx][1];

        oldValue = changes[idx][2];

        newValue = changes[idx][3];

        changes.forEach(([row, prop, oldValue, newValue]) => {}

}}

afterSelection={(row, col) => {  //获取选中单元格的数据

            date[row][col]

            }}

cells={(row, col, prop) => {

  let cellProperties = {};

cellProperties.readOnly = true;//表格只读模式

cellProperties.className = 'htRight htMiddle'/’'htCenter htMiddle','htLeft htMiddle';//表格内容靠右/居中/靠左（默认）

cellProperties.renderer = function (instance, td, row, col, prop, value, cellProperties) {

                  Handsontable.renderers.TextRenderer.apply(this, arguments);

                  td.style.background = 'red';//背景色

                  td.style.fontSize='20px';  //字体大小

　　　　　td.style.color ='green'//字体颜色

                }

}

>