Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
react-better-table
Advanced tools
antd是一个非常流行的组件库,里面的table组件功能非常强大,但是对于税友这种以财、税、票为核心的业务场景,对表格的使用和要求会更高一些,不管是功能性还是性能,antd的table都不能满足我们的要求,所以我们打算重新开发一个全新的表格,部分逻辑和API设计参考了antd的table,整体上会比antd的table更加好用,且易于维护。
与antd Table对比,react-better-table有以下的主要优势:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
data | 数据数组 | object[],注意:object中key是必填项 | [] |
columns | 表格列的配置描述,详见下面的Column配置 | object[] | [] |
empty | 自定义无数据 | ReactNode | - |
summary | 配置合计行,注意:leafColumns是平铺的数组(多行表头时,只返回叶子列数组),返回值对象里必须携带dataIndex | (leafColumns, data) => column[] | - |
rowSelection | 表格行是否可选择,具体配置项详见下面的 rowSelection | object | - |
virtual | 开启并配置虚拟滚动,具体配置详见下面的:virtual | object | - |
onSortChange | 点击排序按钮时触发的事件 | function(column, columnDataIndex, order) | - |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 表格标题 | string、ReactNode | - |
dataIndex | 列数据在数据项中对应的 key,支持 a.b.c 的嵌套写法 | string | - |
width | 列宽 | number | - |
minWidth | 最小列宽,表格拉宽时,列宽会自动按比例放大 | number | - |
scroll | 设置表体固定高度、最大高度,如:{ height: 'calc(100vh - 100px)' } 、{ maxHeigth: 200 } | object | - |
rowHoverEffectEnabled | 鼠标悬浮在行上方时,底色加深的效果 | boolean | true |
ellipsis | 内容超出显示省略号 | boolean | false |
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) | - |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 多选、单选,可选项:'checkbox'、 'radio' | string | 'checkbox' |
fixed | 把选择框列固定在左边,当columns配置了左固定列时,内部会自动转为true | boolean | false |
columnTitle | 自定义列表选择框标题 | 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) | - |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
lineHeight | 每行的高度 | number | - |
delayTime | 滚动条滚动后触发下一屏渲染的防抖时间(单位:ms),值越大,滚动条拖动越流畅,但加载中状态持续时间越长,请自行权衡利弊取合适的值 | number | 10 |
FAQs
基于react开发的易于维护、性能较好的表格组件
The npm package react-better-table receives a total of 3 weekly downloads. As such, react-better-table popularity was classified as not popular.
We found that react-better-table demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.