dataSource | 表格展示的数据源 | Array | [] |
onRowClick | 点击表格每一行触发的事件
签名: Function(record: Object, index: Number, e: Event) => void 参数: record: {Object} 该行所对应的数据 index: {Number} 该行所对应的序列 e: {Event} DOM 事件对象 | Function | () => {} |
onRowMouseEnter | 悬浮在表格每一行的时候触发的事件
签名: Function(record: Object, index: Number, e: Event) => void 参数: record: {Object} 该行所对应的数据 index: {Number} 该行所对应的序列 e: {Event} DOM 事件对象 | Function | () => {} |
onRowMouseLeave | 离开表格每一行的时候触发的事件
签名: Function(record: Object, index: Number, e: Event) => void 参数: record: {Object} 该行所对应的数据 index: {Number} 该行所对应的序列 e: {Event} DOM 事件对象 | Function | () => {} |
onSort | 点击列排序触发的事件
签名: Function(dataIndex: String, order: String) => void 参数: dataIndex: {String} 指定的排序的字段 order: {String} 排序对应的顺序, 有desc 和asc 两种 | Function | () => {} |
onFilter | 点击过滤确认按钮触发的事件
签名: Function(filterParams: Object) => void 参数: filterParams: {Object} 过滤的字段信息 | Function | () => {} |
onResizeChange | 重设列尺寸的时候触发的事件
签名: Function(dataIndex: String, value: Number) => void 参数: dataIndex: {String} 指定重设的字段 value: {Number} 列宽变动的数值 | Function | () => {} |
rowProps | 设置每一行的属性,如果返回值和其他针对行操作的属性冲突则无效。
签名: Function(record: Object, index: Number) => Object 参数: record: {Object} 该行所对应的数据 index: {Number} 该行所对应的序列 返回值: {Object} 需要设置的行属性
| Function | () => {} |
cellProps | 设置单元格的属性,通过该属性可以进行合并单元格
签名: Function(rowIndex: Number, colIndex: Number, dataIndex: String, record: Object) => Object 参数: rowIndex: {Number} 该行所对应的序列 colIndex: {Number} 该列所对应的序列 dataIndex: {String} 该列所对应的字段名称 record: {Object} 该行对应的记录 返回值: {Object} 返回 td 元素的所支持的属性对象
| Function | () => {} |
hasBorder | 表格是否具有边框 | Boolean | true |
hasHeader | 表格是否具有头部 | Boolean | true |
isZebra | 表格是否是斑马线 | Boolean | false |
loading | 表格是否在加载中 | Boolean | false |
loadingComponent | 自定义 Loading 组件 请务必传递 props, 使用方式: loadingComponent={props => <Loading {...props}/>}
签名: Function(props: Object) => void 参数: props: {Object} 当前点击行的 key | Function | - |
filterParams | 当前过滤的的 keys,使用此属性可以控制表格的头部的过滤选项中哪个菜单被选中,格式为 {dataIndex: {selectedKeys:[]}} 示例: 假设要控制 dataIndex 为 id 的列的过滤菜单中 key 为 one 的菜单项选中
<Table filterParams={{id: {selectedKeys: ['one']}}}/> | Object | - |
sort | 当前排序的字段,使用此属性可以控制表格的字段的排序,格式为{dataIndex: 'asc'} | Object | - |
sortIcons | 自定义排序按钮,例如上下排布的: {desc: <Icon style={{top: '6px', left: '4px'}} type={'arrow-down'} size="small" />, asc: <Icon style={{top: '-6px', left: '4px'}} type={'arrow-up'} size="small" />} | Object | - |
emptyContent | 设置数据为空的时候的表格内容展现 | ReactNode | - |
primaryKey | dataSource 当中数据的主键,如果给定的数据源中的属性不包含该主键,会造成选择状态全部选中 | String | 'id' |
expandedRowRender | 额外渲染行的渲染函数
签名: Function(record: Object, index: Number) => Element 参数: record: {Object} 该行所对应的数据 index: {Number} 该行所对应的序列 返回值: {Element} 渲染内容
| Function | - |
expandedRowIndent | 额外渲染行的缩进 | Array | - |
openRowKeys | 默认情况下展开的渲染行或者 Tree, 传入此属性为受控状态 | Array | - |
hasExpandedRowCtrl | 是否显示点击展开额外渲染行的+号按钮 | Boolean | - |
getExpandedColProps | 设置额外渲染行的属性
签名: Function() => void | Function | - |
onRowOpen | 在额外渲染行或者 Tree 展开或者收起的时候触发的事件
签名: Function(openRowKeys: Array, currentRowKey: String, expanded: Boolean, currentRecord: Object) => void 参数: openRowKeys: {Array} 展开的渲染行的 key currentRowKey: {String} 当前点击的渲染行的 key expanded: {Boolean} 当前点击是展开还是收起 currentRecord: {Object} 当前点击额外渲染行的记录 | Function | - |
onExpandedRowClick | 点击额外渲染行触发的事件
签名: Function(record: Object, index: Number, e: Event) => void 参数: record: {Object} 该行所对应的数据 index: {Number} 该行所对应的序列 e: {Event} DOM 事件对象 | Function | - |
fixedHeader | 表头是否固定,该属性配合 maxBodyHeight 使用,当内容区域的高度超过 maxBodyHeight 的时候,在内容区域会出现滚动条 | Boolean | - |
maxBodyHeight | 最大内容区域的高度,在fixedHeader 为true 的时候,超过这个高度会出现滚动条 | Number/String | - |
rowSelection | 是否启用选择模式
属性: getProps: {Function} Function(record, index)=>Object 获取 selection 的默认属性 onChange: {Function} Function(selectedRowKeys:Array, records:Array) 选择改变的时候触发的事件,注意: 其中 records 只会包含当前 dataSource 的数据,很可能会小于 selectedRowKeys 的长度。 onSelect: {Function} Function(selected:Boolean, record:Object, records:Array) 用户手动选择/取消选择某行的回调 onSelectAll: {Function} Function(selected:Boolean, records:Array) 用户手动选择/取消选择所有行的回调 selectedRowKeys: {Array} 设置了此属性,将 rowSelection 变为受控状态,接收值为该行数据的 primaryKey 的值 mode: {String} 选择 selection 的模式, 可选值为single , multiple ,默认为multiple columnProps: {Function} Function()=>Object 选择列 的 props,例如锁列、对齐等,可使用Table.Column 的所有参数 titleProps: {Function} Function()=>Object 选择列 表头的 props,仅在 multiple 模式下生效 titleAddons: {Function} Function()=>Node 选择列 表头添加的元素,在single multiple 下都生效 | Object | - |
stickyHeader | 表头是否是 sticky | Boolean | - |
offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | - |
affixProps | affix 组件的的属性 | Object | - |
indent | 在 tree 模式下的缩进尺寸, 仅在 isTree 为 true 时候有效 | Number | - |
isTree | 开启 Table 的 tree 模式, 接收的数据格式中包含 children 则渲染成 tree table | Boolean | - |
useVirtual | 是否开启虚拟滚动 | Boolean | - |
rowHeight | 设置行高 | Number/Function | - |
onBodyScroll | 在内容区域滚动的时候触发的函数
签名: Function() => void | Function | - |
expandedIndexSimulate | 开启时,getExpandedColProps() / rowProps() / expandedRowRender() 的第二个参数 index (该行所对应的序列) 将按照 01,2,3,4...的顺序返回,否则返回真实 index(0,2,4,6... / 1,3,5,7...) | Boolean | false |