react-better-table

react-better-table

组件描述

antd是一个非常流行的组件库，里面的table组件功能非常强大，但是对于税友这种以财、税、票为核心的业务场景，对表格的使用和要求会更高一些，不管是功能性还是性能，antd的table都不能满足我们的要求，所以我们打算重新开发一个全新的表格，部分逻辑和API设计参考了antd的table，整体上会比antd的table更加好用，且易于维护。

vs antd Table

与antd Table对比，react-better-table有以下的主要优势：

• 支持虚拟滚动
• 支持列宽自动分配
• 支持列宽可拖动
• 自定义滚动条
• 高性能勾选
• 全新的无数据展示方案
• 其他若干优化点

详细介绍

在线文档和demo

文档、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
headerAlign	表头对齐方式：'left'、'center'、'right'	string	'center'
align	表体对齐方式：'left'、'center'、'right'	string	'left'
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