---
group:
  title: 通用组件
  order: 2
title: StandardTable
order: 2
toc: content
---
#  StandardTable 通用表格

## 代码演示

###  基本使用
<code hideactions='["CSB"]' src="../../src/StandardTable/demos/basic.tsx"></code>

###  操作列配置
列配置type='action'，同时使用buttonGroup配置渲染按钮组
<code hideactions='["CSB"]' src="../../src/StandardTable/demos/action.tsx"></code>

###  可选择
<code hideactions='["CSB"]' src="../../src/StandardTable/demos/checkbox.tsx"></code>

###  全局配置
使用FanProvider进行全局配置
<code hideactions='["CSB"]' src="../../src/StandardTable/demos/config.tsx"></code>

## API
| 参数      | 说明                                      | 类型         | 默认值 | 参考值 |
|----------|------------------------------------------|-------------|-------|-------|
| rowKey |列主键值 | `string / function(record): string` | `id` | - |
| hideOrderNumber | 是否隐藏“序号列” | Boolean | `false` |- |
| orderNumber | 配置“序号列”相关参数，如{fixed: 'left'}等，优先级高于`columnsConfig.orderNumber` | Object | {} |- |
| data | 数据源 | Object | - |`{list: [], pagination: {} }`|
| columns |  表格列配置| Array | - | [Column参数](#columns-列参数配置-api) |
| columnsConfig | 列选项扩展配置| Object | - | `{orderNumber: {},action: {}, otherColumn: {}}` |
| onChange | 分页、排序、筛选变化时触发,同官网 | function(pagination, filters, sorter, extra: { currentDataSource: [], action: 'paginate' \| 'sort' \| 'filter' }) | - |pagination除了官方默认的参数外，还加入了`sorters`及`sorterParams`(sorterParams存应列排序字段) |
| codes | 功能权限数据| Array | - | - |
| permissionCodes | 当前有权限的按钮code值组合 | Array | - | `["codeBtnDetail", "codeBtnDetail"]` |
| emptyText | 无数据时文本提示| String | - | - |
| rowSelection | 表格行是否可选择| object | - | 配置项[参考](https://ant.design/components/table-cn/#rowSelection)|
| className | 内容外层样式类| String | - | - |
| title |标题 | String |  |- |
| buttonGroup |配置显示在左侧或右侧的按钮组 | Array |  |- |
| buttonGroupConfig |按钮组扩展配置 |  | |`{placement: 'right'}` |
| batchButtonGroup |批量操作按钮组，只有配置rowSelection才显示 | Array |  |- |
| buttonGroupPlacement |按钮组放置位置 |  | `right`|`left` \ `right` |
| sortOrders |用于配置列表默认的排序值，优先级高于`columns`内配置的`sortOrder` |object  | |配置成`{columnKeySorter_name: 'descend'} `或者 `{name: 'descend'}`都会被列 `key:'name'`识别|
| ~sortPrefixToUrl(弃用)~ |用于指定排序字段名前缀 |  |`columnKeySorter_`| |
| pagination |表格页码配置，优先级高于`data.pagination`,设为false时不显示页码 |  || [配置API](https://ant.design/components/pagination-cn#api) |
| paginationConfig | 表格内页码扩展配置，可用于全局配置 |  ||[配置API](https://ant.design/components/pagination-cn#api) |
| rowSelectedConfig(`v4.1.36`) | 表格顶部显示已选择标识的扩展配置，（前置条件需要将`selectedRowKeys`传给`rowSelection`) | object |`{show: false,  buttonGroupConfig}`|[配置 rowSelectedConfig API](#rowselectedconfig-api) |
| headerAlert(`v4.1.36`) | 表头提示语或其他扩展结构 | ReactNode || |
| 其他参数 | 参考官网[table](https://ant.design/components/table-cn/#Table) |- | - | - |

# StandardTable ref

| 参数      | 说明                                      | 类型         |  参考值 |
|----------|------------------------------------------|-------------|-------|
| initialInstance |包含了原始antd的Table ref  | `nativeElement、scrollTo` |  [原始值说明](https://ant.design/components/table-cn#table-ref) |


> 关于页码配置优先级说明：
> 
> `pagination` > `data.pagination` > `paginationConfig`；
> 
> 如果 `pagination` 配置为 `false` ，则 `data.pagination` 与 `paginationConfig` 的配置项也无效

### columns 列参数配置 API
| 参数字段      | 说明  |   类型   |必选项| 参考值|
|----------|------|-------------|------|------|
| title | 表头标题 | String 或 ReactNode | 是 |- |
| key | 当前列的键值 | String | 是 | - |
| dataIndex | 当前列值与数据匹配的字段名 | String | 否 | - |
| align | 	设置列的对齐方式 | String | 否 | - |
| render | 可自定义行内显示结构 | Function ReactNode | 否 | - |
| type | 可配置当前列属于“操作列” | String | 否 | `action` |
| min | 操作列按钮最小可展示按钮数量 | Number | 3 | 不得低于1 |
| buttonGroup | 操作列的按钮配置| Array/ReactNode/Function(参数同render, 返回值为数组) | 否 |[字段参考](#buttongroup-api)  |
| buttonGroupConfig | 按钮组参数配置，包括下拉菜单配置等 | Object  | 否 | `{type: string, dropdownConfig: Dropdown API}` 参考官网的Dropdown API |
| moreText | `type='action'`使用 | string  | 否 |"更多"按钮显示的文本 |
| moreIcon | `type='action'`使用 | ReactNode  | 否 | "更多"按钮后的图标 |


### buttonGroup API
| 参数字段      | 说明  |   类型   |必选项|
|----------|------|-------------|------|
| name | 按钮文本 | String | 是 |
| type | 按钮类型 | String | 否 |
| icon | 图标类名(类型为String：带前缀时，需要用','隔开(如'speci,plus')，第一个值代表前缀，第二个值代表图标类名)，可参考[icon-api](/components/spec-icon#api) | String/ReactNode | 否 |
| fn | 按钮点击事件 | Function | 否 |
| code | 权限code(对应code配置的name优先级高于上面的name值) | String | 否 |
| exName | 当设置code时，会优先使用exName作为按钮上的文本显示值 | String | 否 |
| isHide | 是否隐藏当前按钮（类型为Function时，返回值为true或false） | Boolean/Function(text, record, rowIndex) |否 |
| disabled | 禁用当前按钮 | Boolean | 否 |
| 其他配置 | 参考[button-group](/components/button-group#api) | - | - |

### rowSelectedConfig API
| 参数字段      | 说明  |   类型   |必选项|
|----------|------|-------------|------|
| show | 是否显示（默认不显示） | Boolean | 否 |
| buttonGroupConfig | 按钮组参数配置，包括下拉菜单配置等 | Object | 否 |
| render | 自定义结构 | ReactNode | 否 |

<style>



.standard-table  .ant-table-thead > tr > th, 
.standard-table  .ant-table-tbody > tr > td,
.standard-table  .ant-table tfoot > tr > th,
.standard-table  .ant-table tfoot > tr > td {
padding: 8px;
}
</style>