Table
容器属性
所有组件配置的第一层均支持容器属性
组件属性 componentsProps
| Name | Type | Default | 是否支持 Variable Pattern | Description |
|---|---|---|---|---|
| className | string | ✔️ | 组件的 className | |
| style | object | 组件的 style | ||
| columnDefs | object | ag-grid 的列的定义 | ||
| defaultColDef | object | 默认的列的定义 | ||
| dataSource | { token: string, pbcToken: string, listUrl: string } | 数据源 | ||
| dataUrl | string | ✔️ | 通过 dataUrl 一次性获取所有表格数据 | |
| pinnedTopDataUrl | string | ✔️ | 固定到表格顶部的行数据 | |
| pinnedBottomDataUrl | string | ✔️ | 固定到表格底部的行数据 | |
| dataFilters | ConditionalListPropertyPropType(DataFilters) | ✔️ | 请求数据源隐藏的固定 filter 条件，无法通过界面进行改变 | |
| translateDataResponse | bool | false | 是否需要翻译请求结果 | |
| httpMethod | 'get' | 'post' | 'get' | ️ | 获取数据时发送请求使用的 http 方法 |
| httpBody | object | ️ ✔️ | 获取数据发送 post 请求时的请求数据，会覆盖自动生成 body | |
| selectColId | Array<string> | 加载的数据字段，不配置则加载所有字段。 | ||
| needCount | bool | true | ️ | 请求是否需要查询数量 |
| searchTextColIds | Array<string> | 指定下拉框模糊搜索的字段，不指定则全局搜索 | ||
| suppressToolbar | ConditionalPropertyPropType(bool) | false | ✔️ | 禁止 Toolbar |
| suppressToolbarActions | ConditionalPropertyPropType(bool) | false | ✔️ | 禁止 Toolbar 的所有操作按钮 |
| suppressAddButton | ConditionalPropertyPropType(bool) | false | ✔️ | 禁止 "新增" 按钮 |
| suppressFuzzySearch | ConditionalPropertyPropType(bool) | false | ✔️ | 禁止模糊搜索 |
| suppressFuzzySearchSpeech | ConditionalPropertyPropType(bool) | false | ✔️ | 禁止模糊搜索的语音搜索功能 |
| suppressColumnSelect | ConditionalPropertyPropType(bool) | false | ✔️ | 禁止 "显示/隐藏" 列 |
| suppressExcelExport | ConditionalPropertyPropType(bool) | false | ✔️ | 禁止导出 Excel 的功能 |
| suppressToolbarRefresh | ConditionalPropertyPropType(bool) | false | ✔️ | 禁止工具栏的 "刷新" 按钮 |
| suppressTableSetting | ConditionalPropertyPropType(bool) | false | ✔️ | 禁止工具栏展开设置功能 |
| suppressFullscreen | ConditionalPropertyPropType(bool) | false | ✔️ | 禁止全屏功能 |
| suppressSaveSetting | ConditionalPropertyPropType(bool) | false | ✔️ | 禁止保存表格设置 |
| suppressFilterPanel | ConditionalPropertyPropType(bool) | false | ✔️ | 禁止工具栏的 Filter 面板 |
| suppressFavoriteView | ConditionalPropertyPropType(bool) | false | ✔️ | 禁止保存多种 View |
| supportShowDeleted | ConditionalPropertyPropType(bool) | false | ✔️ | 是否支持 "显示已删除" 功能 |
| suppressRefreshDataWhenFilterChange | ConditionalPropertyPropType(bool) | false | ✔️ | 禁止在 Filter Panel 里修改 filter 条件后自动刷新数据 |
| settingKey | string | 表格设置保存的 key | ||
| tableSize | 'default' | 'small' | 'default' | 表格的尺寸，默认或者紧凑模式 | |
| addButtonHref | ConditionalPropertyPropType(string) | false | ✔️ | 新增按钮的链接地址 |
| addButtonContent | string | false | 新增按钮的文字 | |
| fuzzySearchPlaceholder | string | false | 模糊搜索输入框的 placeholder | |
| fuzzySearchOpen | bool | false | 模糊搜索是否永远展开显示 | |
| excelExportFilename | string | 'export' | 导出 Excel 的文件名 | |
| excelExportMaxSizePerReq | number | 1000 | 导出 Excel 的请求按多少行分批次发送 | |
| pagination | bool | false | 是否使用分页功能 | |
| paginationPageSize | number | 30 | 分页功能每页显示的行数 | |
| pageSizeOptions | Array<number> | 自定义每页行数的选项 | ||
| pinnedFilter | Array<string> | 默认显示在 Filter Panel 的 filter 列，无法被删除 | ||
| interval | bool | false | 是否使用定期刷新数据功能 | |
| intervalTime | number | 10 | 表格定期刷新数据的时间间隔（s） | |
| toolbarFields | array | 使用 json 配置的工具栏的自定义元素 | ||
| toolbarChildren | node | 使用 jsx 配置的工具栏的自定义元素 | ||
| alwaysUseApiFilter | bool | false | 当在 clientSide 模式下的时候，也是用 api 接口进行 filter，而不是用表格本身的过滤功能。 | |
| multiValueKey | string | 'label' | 表格 ACL 和 Select 等调用了 MultiValueCellRenderer 的列进行过滤和分组的时候使用的数据属性 | |
| onSwitchFavoriteView | (newView) => void | 当表格 toolbar 切换视图的时候调用此函数 |
所有其余 componentsProps 将会被传给组件根元素（AgGridReact）。
JS API
通过 formApi.getFieldApi() 获取的接口如下：
| Name | Type | Description |
|---|---|---|
| node | HTML Element | 组件的根 DOM 元素 |
| gridApi | object | Ag-Grid 的 api 接口, 官方文档 |
| getComponentProps | () => object | 获取表格的组件属性 componentProps |
| updateComponentProps | () => void | 修改表格的组件属性 componentProps，示例 |
| getTableState | () => { tableSize, columnState, filterModel, paginationPageSize } | 获取当前表格状态 |
| setTableState | (newState) => void | 设置表格状态，newState 对象会和已有 state 对象做合并操作 |
| getSearchText | () => string | 获取当前模糊搜索文本 |
| getSelectedIds | () => array | 获取当前表格选中行的 id，不管单选多选都返回数组 |
| refresh | () => void | 刷新表格数据 |