介绍

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

Github

https://github.com/komarovalexander/ka-table

安装

• npm

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 (
    <Table
      {...tableProps}
      dispatch={dispatch}
    />
  );
};

export default OverviewDemo;

总结

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