react-better-table
组件描述
antd是一个非常流行的组件库，里面的table组件功能非常强大，但是对于税友这种以财、税、票为核心的业务场景，对表格的使用和要求会更高一些，不管是功能性还是性能，antd的table都不能满足我们的要求，所以我们打算重新开发一个全新的表格，部分逻辑和API设计参考了antd的table，整体上会比antd的table更加好用，且易于维护。
vs antd Table
与antd Table对比，react-better-table有以下的主要优势：
- 支持虚拟滚动
- 支持列宽自动分配
- 支持列宽可拖动
- 自定义滚动条
- 高性能勾选
- 全新的无数据展示方案
- 其他若干优化点
在线文档和demo
table-api
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| draggable | 是否开启可伸缩列 | boolean | true |
| data | 数据数组 | object[]，注意：object中key是必填项 | [] |
| columns | 表格列的配置描述，详见下面的Column配置 | object[] | [] |
| scroll | 设置表体固定高度、最大高度，如：{ height: 'calc(100vh - 100px)' }、{ maxHeigth: 200 }；设置滚动位置，如：{top: 100, left: 100}
|
object | - |
| empty | 自定义无数据 | ReactNode | - |
| rowHoverEffectEnabled | 鼠标悬浮在行上方时，底色加深的效果 | boolean | true |
| summary | 配置合计行，注意：leafColumns是平铺的数组（多行表头时，只返回叶子列数组），返回值对象里必须携带dataIndex | (leafColumns, data) => column[] | - |
| rowSelection | 表格行是否可选择，具体配置项详见下面的 rowSelection | object | - |
| virtual | 开启并配置虚拟滚动，具体配置详见下面的：virtual | object | - |
| onSortChange | 点击排序按钮时触发的事件 | function(column, columnDataIndex, order) | - |
| onDragEnd | 拖动列宽后的回调函数（可通过该函数获取最新列宽，重新设置columns，进而规避因为表格重绘导致列宽复原的问题） | function(column: { dataIndex: string, newWidth: number }) |
- |
| onScroll | 滚动后触发的回调 | function(e, direction) | - |
column-api
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 表格标题 | string、ReactNode | - |
| dataIndex | 列数据在数据项中对应的 key，支持 a.b.c 的嵌套写法 |
string | - |
| width | 列宽 | number | - |
| minWidth | 最小列宽，表格拉宽时，列宽会自动按比例放大 | number | - |
| ellipsis | 内容超出显示省略号 | boolean | false |
| align | 表体对齐方式：'left'、'center'、'right' | string | 'left' |
| headerAlign | 表头对齐方式：'left'、'center'、'right' | string | 'center' |
| fixed | 固定列设置，可选值：'left'、'right' | string | - |
| shouldCellUpdate | 自定义单元格渲染时机 | (preRecord, nextRecord) => boolean | - |
| sortable | 对应列是否可以排序，如果设置为 'custom'，表示用户希望自定义排序，需要与onSortChange配合使用 | string | - |
| defaultSortOrder | 默认的排序状态，可选值：'ascending'、 'descending'、 null | string | - |
| sortOrder | 受控的排序状态，可选值：'ascending'、 'descending'、 null | string | - |
| sortOrders | 排序时所使用排序策略的轮转顺序，需传入一个数组，随着用户执行排序，该列依次按照数组中元素的顺序进行排序 | [] | ['ascending', 'descending', null] |
| renderFilterDropdown | 自定义筛选下拉面板 | () => ReactNode | - |
| filterIcon | 自定义筛选icon | ReactNode | - |
| getFilterPopupContainer | 自定义筛选下拉面板的渲染容器 | () => HTMLElement | document |
| render | 自定义渲染函数，参数为：当前行的值，当前行数据，行索引，当前列宽 | (text, record, index, width) => any | - |
| onRow | 设置行属性 | function(record, index) | - |
| onHeaderRow | 设置表头行属性 | function(columns, index) | - |
| onHeaderCell | 设置表头单元格属性 | function(column) | - |
| onCell | 设置单元格属性 | function(record, rowIndex) | - |
rowSelection-api
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 多选、单选，可选项：'checkbox'、 'radio' | string | 'checkbox' |
| fixed | 把选择框列固定在左边，当columns配置了左固定列时，内部会自动转为true | boolean | false |
| columnTitle | 自定义列表选择框标题 | (originNode: ReactNode) => string、ReactNode |
- |
| columnWidth | 自定义列表选择框宽度 | number | 62 |
| selectedRowKeys | 指定选中行的 key 数组，需要和 onChange 进行配合 | string[] |
number[] |
| defaultSelectedRowKeys | 默认选中项的 key 数组 | string[] |
number[] |
| onChange | 选中项发生变化时的回调 | function(selectedRowKeys, selectedRows) | - |
| onSelectAll | 用户手动选择/取消选择所有行的回调 | function(selected, selectedRows) | - |
| onSelect | 用户手动选择/取消选择单行的回调 | function(record, selected, selectedRows, nativeEvent) | - |
| getSelectionProps | 选择框的属性配置，不能设置checked、defaultChecked、onChange，因为这些在rowSelection中已经处理了 | function(record) | - |
| renderCell | 自定义渲染 | function(checked, record, index, originNode) | - |
virtual-api
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| lineHeight | 每行的高度 | number | - |
| delayTime | 滚动条滚动后触发下一屏渲染的防抖时间（单位：ms），值越大，滚动条拖动越流畅，但加载中状态持续时间越长，请自行权衡利弊取合适的值 | number | 10 |