使用 ali-react-table 解决动态列宽表卡顿问题

替换的可行性分析

1. 性能： 一次性添加上百列不卡顿，页面不卡顿， 满足需求
2. 锁定列： 在columns 在对应的列 设置lock: true, 即可锁定该列， 可以实现
3. 排序： 可以拿到排序点击的回调， 获得当前正在排序的字段（目前单列排序）， 支持接口排序
4. 分页： 采用别的组件的分页组件， 也是可以实现分页效果的

ali-react-table用法

安装

npm install ali-react-table

使用别的组件 npm install @alifd/next

文档

github： https://github.com/alibaba/ali-react-table/tree/master/packages/website

api文档： ali-react-table.js.org/docs/pipeli…

排序的实现

    import { BaseTable, useTablePipeline, features } from 'ali-react-table'
    import * as fusion from '@alifd/next'

    //表格扩展机制
    const pipeline = useTablePipeline({ components: fusion })
        .input({ dataSource, columns })
        .use(
        // 支持单列排序
        features.sort({
            mode: 'single',
            defaultSorts: [],
            highlightColumnWhenActive: true,
            ...sortFeatureOptions,
        }),
    )
    
    <BaseTable {...pipeline.getProps()} />