介绍
今天要介绍的是一个在react生态中的一个表格组件——ka-table,正如标题,ka-table是一个具有排序、筛选、分组、虚拟化、编辑功能的React表格组件。可定制、可扩展、轻量级和免费的React Table组件!
Github
/komarovalexander/ka-table
安装
npmnpm 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表格组件,相对于一般普通表格来说,功能上更加强大,其扩展性又很好的解决了一些复杂场景的需求!