Table 表格

可容纳多种数据类型的大型数据容器，并可支持多种数据相关和表格属性设置相关的操作，具有强大的统计功能

何时使用

当需要管理一定量级的统一结构的数据记录时

当需要对一部分全部数据进行编辑、筛选过滤时

特别说明

• 按照 React 的规范，所有的数组组件必须绑定 key。Table 组件的 data 属性的每一列也需要指定一个 key 值来表明每一行数据的唯一性。同时基于综合考虑（性能、维护性、功能间的组合性等），当没有 key 传入的时候，组件内部并不会帮您生成 key。当 key 不存在时可能会引起一系列的问题，还请注意。
• 在进行列冻结时，一定要传入列宽(width)！

Props

| 属性名 | 描述 | 类型 | 可选值 | 默认值 | | --------------------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ------------------------ | ---------- | | data | 表格数据 | object[] | - | - | | fieldKey | 指定 data 表格数据中某一属性为 key | string | - | 'key' | | columns | 表格列配置信息 | ColumnItem[] | - | - | | bordered | 是否显示边框（表头分组模式下，表格自带边框） | boolean | true | false | false | | sticky | 是否支持表头吸顶 | boolean | true | false | false | | stickyTop | 表头吸顶距离视口顶部距离 | number | - | 0 | | highlightedColKeys | 高亮列（受控） | string[] | - | [] | | expandedRender | 表格展开项 | (record: dataItem, index: number) => ReactNode | Promise | - | - | | rowExpandable | 设置是否允许行展开 | (record: dataItem ) => ReactNode | Boolean | - | true | | onExpand | 表格展开时的回调函数 | (expanded, row: object) => void | - | - | | expandedRowKeys | 内嵌式表格以及树形表格展开的行 | number[] | - | - | | maxHeight | 表格最大高度，当穿过该高度时，展示滚动条且表头固定 | number | - | - | | fixedToColumn | 表格列冻结设置，为 string 时仅支持从左侧冻结至某一列 | string | FixedOption | columns 中对应的 dataKey | null | | size | 配置表格尺寸 | string | 'lg' | 'md' | 'sm' | 'md' | | pagination | 表格分页配置项 | Pagination | - | null | | errorRowKeys | 错误列（受控） | string[] | - | [] | | highlightedRowKeys | 高亮行（受控） | string[] | - | [] | | rowSelection | 行可选（受控） | RowSelection | - | null | | dataSource | 异步数据源 | (current: number) => DataSource | - | null | | showColMenu | 是否支持列操作 | boolean | - | false | | striped | 是否展示为斑马纹效果 | boolean | - | false | | setting | 是否集成控制面板功能 | boolean | - | false | | emptyContent | 数据为空时的展示内容 | string | () => ReactNode | - | '暂无数据' | | resizable | 是否能够动态控制列宽 | boolean | true | false | false | | standard | 标准模式，默认集成 showColMenu = true, sticky = true, bordered = true, setting = true, striped = true | boolean | true | false | false | | loading | 加载中状态 | boolean | true | false | false | | scrollWidth | 表格滚动的宽度（当表格总设置宽度（含自适应列）大于表格父级容器宽度时需要设置）3.7.0 版本以后，该属性不建议使用 | number | - | - | | showColHighlight | 表格某一列hover时，该列高亮 | boolean | true | false | false | | draggable | 表格行可拖拽 | boolean | true | false | false | | hiddenColKeys | 隐藏列（受控） (v3.9.0 新增) | string[] | - | - | | onHiddenColKeysChange | 列隐藏设置时回调 (v3.9.0 新增) | (hiddenColKeys: string[]) => void | - | - | | cellRender | 全局控制单元格自定义渲染，优先级低于 column 的 render 方法 | (text: DataItem[ColumnItem[dataKey]]) => ReactNode | - | - |

Event

| 属性名 | 描述 | 类型 | 可选值 | 默认值 | | -------------- | ------------------ | --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | | onHeaderRow | 行标题事件处理函数 | (item: ColumnItem[], index: number) => object | - | - | | onLoadChildren | 点击异步加载子项 | (row: DataItem) => object[] | Promise | - | - | | onDragStart | 开始拖拽时触发 | (rowData: object) => void | rowData: 当前行的数据 | - | | onDrop | 拖拽行放开时触发 | (dragRowData: object, dropRowData: object, data: object, level: Level) => boolean | Promise | dragRowData: 拖拽的行数据 dropRowData: 目标行数据 data:当前结构数据 level:当前级别数据 | - | | onDropEnd | 拖拽成功时触发 | (dragRowData: object, dropRowData: object, data: object) => void | dragRowData: 拖拽的行数据 dropRowData: 目标行数据 data: 拖拽完成后的结构数据 | - |

在 onLoadChildren 方法中，返回的数据中会根据 isLeaf 字符控制左侧展开按钮的显示状态

onHeaderRow 使用方法

// demo 见【行操作-标题事件处理】

<Table
  onHeaderRow={(columns, index) => {
    return {
      onClick: (event) => {}, // 点击行
      onDoubleClick: (event) => {},
      onContextMenu: (event) => {},
      onMouseEnter: (event) => {}, // 鼠标移入行
      onMouseLeave: (event) => {},
    };
  }}
/>

Type

ColumnItem

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- | ---------------------------- | ------ | | title | 列标题 | string | () => ReactNode | - | - | | dataKey | 列对应数据项的唯一标识 | string | number | - | - | | align | 列对齐方式 | string | 'left' | 'right' |'center' | 'left' | | selectFilters | 表头的筛选菜单, 更多配置请参考 Select 组件 (v3.7.1 新增) | object | - | null | | sorter | 列排序函数 (v3.7.1 新增) | () => boolean | - | null | | defaultSortOrder | 默认排序顺序 (v3.7.1 新增) | ascend | descend | - | null | | filterIcon | 自定义 filter 图标 (v3.7.1 新增) | ReactNode | - | null | | filterDropdown | 自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 (v3.7.1 新增) | (props: {ColumnItem, setFilterDropdownVisible}) => ReactNode | - | null | | filterDropdownWidth | 自定义筛选菜单宽度 (v3.7.1 新增) | number | - | 150 | | filterDropdownClassName | 自定义筛选菜单 className (v3.7.1 新增) | string | - | - | | onFilterDropdownVisibleChange | 自定义筛选下拉选项显示状态改变时的回调方法 (v3.7.1 新增) | (filterDropdownVisible, ColumnItem) => void | true | false | false | | avg | 该列是否支持平均值 | boolean | - | false | | total | 该列是否支持合计 | boolean | - | - | | width | 该列宽度 | number | - | - | | children | 多级表头 | ColumnItem[] | - | - | | render | 控制单元格自定义渲染 | (text: DataItem[ColumnItem[dataKey]], row: DataItem, index: number, dataKey: string) => ReactNode | - | - |

DataSource

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------------- | ----------------------------------------- | --------------------------------- | -------------------------------------------------- | ------------- | | url | 请求的 url | string | - | - | | type | 请求方法 | string | get | post | get | | data | post 请求时请求体参数 | object | - | - | | params | url 查询参数 | object | - | - | | headers | 请求头 | object | - | - | | mode | 请求模式 | string | 'same-origin' | 'cors' | 'no-cors' | 'navigate' | 'same-origin' | | transformResponse | 成功时的回调，需要返回注入 table 的配置项 | (response: object) => TableConfig | - | - |

Pagination

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---------------- | ---------------------------------------------------------- | --------------------------------------------------------- | --------------------------------- | --------- | | type | 分页的类型 | string | 'default' | 'simple' | 'shrink' | 'default' | | defaultCurrent | 默认的当前页数 | number | - | 1 | | current | 当前页数 | number | - | - | | max | 最大显示的页数 | number | - | 2 | | pageSize | 每页条数 | number | - | 10 | | pageSizeOptions | 指定每页可以显示多少条 | number[] | - | [] | | total | 数据总数 | number | - | - | | autoHide | 只有一页时是否隐藏分页器 | boolean | true | false | false | | showJumper | 是否显示跳转 | boolean | true | false | false | | onJump | 快速跳转时触发，回调值为当前页数 | (current: number) => void | - | - | | onChange | 页码改变时的回调，回调值为当前页数、之前的页数和每页条数 | (current: number, prev: number, pageSize: number) => void | - | - | - | | onPageSizeChange | 每页显示条数改变的回调函数，返回改变后的每页条数及当前页数 | (pageSize: number, current: number) => void | - | - | - |

FixedOption

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----- | -------------------- | ------ | ------------------------ | ------ | | left | 表格从左侧冻结至某列 | string | columns 中对应的 dataKey | - | | right | 表格从右侧冻结至某列 | string | columns 中对应的 dataKey | - |

RowSelection

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------------- | ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ---------------- | ------ | | selectedRowKeys | 选中的行（受控） | string[] | row 中对应的 key | - | | getCheckboxConfig | 行选择的配置项 | rowData => object | - | - | | onChange | 选中项发生变化时的回调，如果是全选操作，targetRow 将是数组结构 | (selectedRowKeys: string[], targetRow?: object | object[], shouldChecked?: boolean) => void | - | - | | checkboxColWidth | 列选择 checkbox 所在列宽度 | number | - | - | | checkAllOptions | 全选操作的配置项 | { filterIcon?: React.ReactNode } | - | - |

CHANGELOG

| 参数 | 变更类型 | 变更内容 | 解决的问题 | | --------------------- | ---------- | ------------------------------------------- | ------------------------------------------- | | selectFilters | deprecated | 取消内嵌 Select | - | 使用 filterDropdown 能替代满足场景 | | onLoadChildren | feature | 必须返回数据 -> 返回 undefined 不做任何处理 | - | 强化功能：支持自定义控制更新 | | expandedEmbedRowKeys | feature | - | 字段：expandRowKeys -> expandedEmbedRowKeys | 强化功能：支持内嵌面板独立控制 | | onEmbedExpand | feature | 字段：onExpand -> onEmbedExpand | 强化功能：支持内嵌面板独立控制 | | stickyFooter | feature | boolean | 强化功能：支持底部吸底 | | stickyFooterBottom | feature | 底部吸底距离视口底部距离 | 强化功能 | | defaultFixedToColumn | feature | 1. 定义：非受控；2. 类型：对象 | 强化功能持久化 | | fixedToColumn | feature | 1. 定义：受控；2. 类型：对象 | 强化功能持久化 | | onFixedToColumn | feature | 1. 定义：冻结列回调；2. 类型：对象 | 强化功能持久化 | | showRowHighlight | feature | - | 强化功能受控化 | | sortedColKeys | feature | 列排序受控 | 强化功能持久化 | | onSortedColKeysChange | feature | 列排序设置回调 | 强化功能持久化 |