介绍

今天要介绍的是一个在react生态中的一个表格组件——ka-table，正如标题，ka-table是一个具有排序、筛选、分组、虚拟化、编辑功能的React表格组件。可定制、可扩展、轻量级和免费的React Table组件！

Github

/komarovalexander/ka-table

安装

npm install ka-table

或者yarn

yarn add ka-table

主要特性

针对不同数据类型的编辑器开箱即用，具有良好的定制能力，由于定制功能，你可以扩展自己所需的任何组件与表格集成

事件

所有可能的事件都可以添加到childElements

筛选

使用带有可自定义编辑器的预定义筛选器行或使用扩展筛选器

分组功能支持

单元格和行自定义支持分组

表格搜索

实现搜索功能很方便

表格数据选择

支持多选和单选

状态保持

保存表的状态并在页面重新加载后恢复它

编辑验证

在应用编辑器值之前验证它

虚拟滚动

虚拟化可以很好地处理大量数据和分组，主要是通过虚拟滚动实现的

远程数据

最基本的案例

import "ka-table/style.css";import React, { useState } from 'react';import { ITableProps, kaReducer, Table } from 'ka-table';import { DataType, EditingMode, SortingMode } from 'ka-table/enums';import { DispatchFunc } from 'ka-table/types';const dataArray = Array(10).fill(undefined).map( (_, index) => ({ column1: `column:1 row:${index}`, column2: `column:2 row:${index}`, column3: `column:3 row:${index}`, column4: `column:4 row:${index}`, id: index, }),);const tablePropsInit: ITableProps = { columns: [ { key: 'column1', title: 'Column 1', dataType: DataType.String }, { key: 'column2', title: 'Column 2', dataType: DataType.String }, { key: 'column3', title: 'Column 3', dataType: DataType.String }, { key: 'column4', title: 'Column 4', dataType: DataType.String }, ], data: dataArray, editingMode: EditingMode.Cell, rowKeyField: 'id', sortingMode: SortingMode.Single,};const OverviewDemo: React.FC = () => { const [tableProps, changeTableProps] = useState(tablePropsInit); const dispatch: DispatchFunc = (action) => { changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); }; return (

);};export default OverviewDemo;

总结

总体来说ka-table是一个非常不错的React表格组件，相对于一般普通表格来说，功能上更加强大，其扩展性又很好的解决了一些复杂场景的需求！