react 封装表格组件_ali-react-table：高性能 React 表格组件

简介

在前端开发中，表格一直都是最复杂的组件之一。表格不仅要支持丰富的操作(排序、过滤、搜索、分页、自定义列等)，还要有非常好的性能以展示大量数据。很多组件库(例如 fusion design，ant design)提供了功能丰富的表格组件，但这些表格一开始很少考虑性能问题，往往是后面遇到性能瓶颈问题时才考虑添加虚拟滚动特性，但此时过多的表格功能使得性能优化的难度非常高。

ali-react-table (https://github.com/alibaba/ali-react-table)是我们小组开发的高性能 React 表格组件，我们在一开始就考虑了表格的性能，为其添加了内置的虚拟滚动特性。虚拟滚动会在数据量较大时自动开启，轻松展示一万行/一万列以上的数据。虚拟滚动是表格的核心特性之一，在为表格实现新功能时，我们会确保新功能不与虚拟滚动冲突。

表格组件的基本用法和 antd/fusion 表格类似，传入 dataSource 来指定表格的数据源，传入 columns 来对表格的列进行配置。(在线示例)

import { BaseTable } from 'ali-react-table'

function BasicUsage() {

const dataSource = [

{ prov: '湖北省', confirm: 54406, cure: 4793, dead: 1457, t: '2020-02-15 19:52:02' },

{ prov: '广东省', confirm: 1294, cure: 409, dead: 2, t: '2020-02-15 19:52:02' },

{ prov: '河南省', confirm: 1212, cure: 390, dead: 13, t: '2020-02-15 19:52:02' },

{ prov: '浙江省', confirm: 1162, cure: 428, dead: 0, t: '2020-02-15 19:52:02' },

{ prov: '湖南省', confirm: 1001, cure: 417, dead: 2, t: '2020-02-15 19:52:02' },

]

const columns = [

{ code: 'prov', name: '省份', width: 150 },

{ code: 'confirm', name: '确诊', width: 100, align: 'right' },

{ code: 'cure', name: '治愈', width: 100, align: 'right' },

{ code: '