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'//字體顏色

                }

}

>