使用场景：将数据呈现为高度可定制和具备可访问性的 HTML 表格，其核心功能为将结构化的数据使用表格的方式展现，然后可以使用各种参数来向表格中加入一些特性，比如排序，过滤，滚动，锁列等。
已知问题
分组 Table 不支持在 Hover 状态和选中状态下显示背景色，无法合并单元格
分组 Table 不支持在 Hover 状态和选中状态下显示背景色，无法合并单元格
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| tableLayout | 表格元素的 table-layout 属性，设为 fixed 表示内容不会影响列的布局 可选值: 'fixed', 'auto' | Enum | - |
| size | 尺寸 small为紧凑模式 可选值: 'small', 'medium' | Enum | 'medium' |
| tableWidth | 表格的总长度，可以这么用：设置表格总长度 、设置部分列的宽度，这样表格会按照剩余空间大小，自动其他列分配宽度 | Number | - |
| 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 | - |
| columns | 等同于写子组件 Table.Column ，子组件优先级更高 | Array | - |
| emptyContent | 设置数据为空的时候的表格内容展现 | ReactNode | - |
| primaryKey | dataSource当中数据的主键，如果给定的数据源中的属性不包含该主键，会造成选择状态全部选中 | Symbol/String | 'id' |
| expandedRowRender | 额外渲染行的渲染函数 签名: Function(record: Object, index: Number) => Element 参数: record: {Object} 该行所对应的数据 index: {Number} 该行所对应的序列 返回值: {Element} 渲染内容 | Function | - |
| rowExpandable | 设置行是否可展开，设置 false 为不可展开 签名: Function(record: Object, index: Number) => Boolean 参数: record: {Object} 该行所对应的数据 index: {Number} 该行所对应的序列 返回值: {Boolean} 是否可展开 | Function | - |
| expandedRowIndent | 额外渲染行的缩进 | Array | - |
| hasExpandedRowCtrl | 是否显示点击展开额外渲染行的+号按钮 | Boolean | - |
| getExpandedColProps | 设置额外渲染行的属性 签名: Function() => void | Function | - |
| openRowKeys | 默认情况下展开的 Expand行 或者 Tree行 , 传入此属性为受控状态，一般配合 onRowOpen 使用 | Array | - |
| onRowOpen | 在 Expand行 或者 Tree行 展开或者收起的时候触发的事件 签名: Function(openRowKeys: Array, currentRowKey: String, expanded: Boolean, currentRecord: Object) => void 参数: openRowKeys: {Array} 展开的渲染行的key currentRowKey: {String} 当前点击的渲染行的key expanded: {Boolean} 当前点击是展开还是收起 currentRecord: {Object} 当前点击额外渲染行的记录 | 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，默认为multiplecolumnProps: {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 | - |
| onBodyScroll | 在内容区域滚动的时候触发的函数 签名: Function() => void | Function | - |
| expandedIndexSimulate | 开启时，getExpandedColProps() / rowProps() / expandedRowRender() 的第二个参数 index (该行所对应的序列) 将按照01,2,3,4...的顺序返回，否则返回真实index(0,2,4,6... / 1,3,5,7...) | Boolean | false |
| crossline | 在 hover 时出现十字参考轴，适用于表头比较复杂，需要做表头分类的场景。 | Boolean | false |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| dataIndex | 指定列对应的字段，支持a.b形式的快速取值 | String | - |
| cell | 行渲染的逻辑 value, rowIndex, record, context四个属性只可读不可被更改 Function(value, index, record) => Element | ReactElement/ReactNode/Function | value => value |
| title | 表头显示的内容 | ReactElement/ReactNode/Function | - |
| htmlTitle | 写到 header 单元格上的title属性 | String | - |
| sortable | 是否支持排序 | Boolean | - |
| width | 列宽，注意在锁列的情况下一定需要配置宽度 | Number/String | - |
| align | 单元格的对齐方式 可选值: 'left', 'center', 'right' | Enum | - |
| alignHeader | 单元格标题的对齐方式, 不配置默认读取align值 可选值: 'left', 'center', 'right' | Enum | - |
| filters | 生成标题过滤的菜单, 格式为[{label:'xxx', value:'xxx'}] | Array<Object> | - |
| filterMode | 过滤的模式是单选还是多选 可选值: 'single', 'multiple' | Enum | 'multiple' |
| filterMenuProps | filter 模式下传递给 Menu 菜单的属性， 默认继承 Menu 组件的API属性: subMenuSelectable: {Boolean} 默认为 false subMenu是否可选择isSelectIconRight: {Boolean} 默认为 false 是否将选中图标居右。注意：SubMenu 上的选中图标一直居左，不受此API控制 | Object | { subMenuSelectable: false, } |
| lock | 是否支持锁列,可选值为left,right, true | Boolean/String | - |
| resizable | 是否支持列宽调整, 当该值设为true，table的布局方式会修改为fixed. | Boolean | false |
| colSpan | header cell 横跨的格数，设置为0表示不出现此 th | Number | - |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 表头显示的内容 | ReactElement/ReactNode/Function | 'column-group' |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| cell | 行渲染的逻辑 | ReactElement/ReactNode/Function | () => '' |
| hasChildrenSelection | 是否在Children上面渲染selection | Boolean | false |
| hasSelection | 是否在GroupHeader上面渲染selection | Boolean | true |
| useFirstLevelDataWhenNoChildren | 当 dataSouce 里没有 children 时，是否使用内容作为数据 | Boolean | false |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| cell | 行渲染的逻辑 | ReactElement/ReactNode/Function | () => '' |