推荐一款React网格组件ka-table

2021-02-03

常用功能应有尽有，吸顶、行展开、虚拟化、单元格编辑、输入验证和筛选等。

官网地址：ka-table

盘点实践操作。

列key不能有rowKeyField

每个表格都有行关键字段rowKeyField，比如id，列columns中key不能有此字段，不然会引起行列错乱。

新增行

demo中新增行，分三步：打开新行编辑器、编辑行和保存行数据。相对较繁琐，通过代码来直接新建默认行：

dispatch(showNewRow());  
dispatch(saveNewRow(nodeId));
dispatch(updateCellValue(nodeId, 'name', nodeData.name));

获取选中行

有专门工具接口：

const selectedData = kaPropsUtils.getSelectedData(tableProps);

单独单元格禁止编辑

类似自定义编辑器，返回非输入型标签内容。

childComponents={{
    cellEditor: {
        content: (props) => {
            if (props.rowData.id === props.column.toNodeId) {
                return <div>-</div>;
            }
        }
    }
}}

操作action

表格所有变动都能在dispatch中体现，监听处理相应业务。

const dispatch = (action) => {
	changeTableProps((prevState) => kaReducer(prevState, action));
};

删除row前先deselectRow

ka-table应该是使用了对象池，删除行后再新建行，会出现被删行的属性，如选中效果。因此删除行后，最好同时重置下相关状态。

dispatch(deselectRow(0));
dispatch(deleteRow(0));
分享推荐