TablePc 表格
展示行列数据。
何时使用
- Table 负责将数据呈现为高度可定制和具备可访问性的 HTML 表格，其核心功能为将结构化的数据使用表格的方式展现;
- 可以使用各种参数来向表格中加入一些特性，比如排序，过滤，滚动，锁列等。
组件示例
组件属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
actionBar | 设置顶部操作-操作条 | array | [{title: {zh_CN: '操作1',en_US: 'Action 1',type: 'i18n'},option: 'callback'}] |
actionFixed | 设置操作列列固定 | string | 'none' |
actionHidden | 设置操作列是否隐藏 | boolean | false |
actionTitle | 设置操作列标题 | string | '操作' |
actionType | 设置操作列按钮类型 | string | 'link' |
actionWidth | 设置操作列宽度 | number | 0 |
cellProps | 设置风格和样式-单元格分割合并 | (rowIndex: number,colIndex: number,dataIndex: number,record: object)=>void | - |
columnProps | 设置行选择器-选择列属性 | () => void | - |
columns | 可通过绑定数据源设置数据列 | - | |
data | 数据源 | any[] | - |
dataSourceType | 数据源类型 | 'data' | 'url' | 'data' |
device | 设置操作项-在特定端显示 | string | - |
emptyContent | 设置风格和样式-空数据渲染 | () => ReactNode | - |
expandedRowIndent | 设置可折叠/树形表格-启用折叠,额外渲染行的缩进 | array | [] |
expandedRowRender | 设置可折叠/树形表格-启用折叠,额外渲染行的渲染函数 | (record: object, index: number) => ReactNode | - |
fixedHeader | 设置风格和样式-表头是否固定 | boolean | true |
getExpandedColProps | 设置可折叠/树形表格-启用折叠,设置额外渲染行的属性 | (record: object, index: number) => ReactNode | - |
getProps | 设置行选择器-选择器属性 | (rowData: object, index: number) => void | - |
hasExpandedRowCtrl | 设置可折叠/树形表格-启用折叠,折叠按钮 | boolean | true |
hasHeader | 设置风格和样式-显示表头 | boolean | true |
isDisabled | 设置顶部操作-操作条页面跳转,是否禁用 | boolean | - |
isExpand | 设置可折叠/树形表格-启用折叠 | boolean | false |
isPagination | 分页设置-使用分页 | boolean | true |
isPagination | 分页设置-当分页数为1时，是否隐藏分页器 | boolean | false |
isTree | 设置可折叠/树形表格-启用树形 | boolean | false |
loading | 是否处于加载状态 | boolean | false |
loadingComponent | 设置风格和样式-设置loading组件 | ()=>ReactNode | - |
maxBodyHeight | 设置风格和样式-表头是否固定,最大内容区域的高度 | number | 0 |
maxWebShownActionCount | 设置最大展示数量 | number | 3 |
mobileActionsStyle | 手机端特有配置-设置展开方式,操作风格 | string | - |
mobileDefaultCardColumns | 手机端特有配置-展开方式,默认字段数 | string | 4 |
mobileExpanViewMode | 手机端特有配置-展开方式 | string | normal |
mobileMargin | 手机端特有配置-设置默认外边距 | number | 0 |
mobileMode | 手机端特有配置-展示风格 | string | normal |
mode | 设置操作项-在编辑状态显示 | string | 'VIEW' |
mode | 设置行选择器-类型 | 'single' | 'multiple' | 'multiple' |
noPadding | 高级-设置隐藏边距 | boolean | false |
onCellDataChange | 动作设置-编态数据发生变化时触发 | ({data: object}) => void | - |
onChange | 设置行选择器-选择变动回调 | (selectedRowKeys: array,records: array)=>void | - |
onColumnsChange | 设置顶部操作-列筛选器回调 | (columns: object)=>void | - |
onFetchData | 动作设置-分页、搜索、排序时触发 | ({params: object}) => void | - |
onResizeChange | 动作设置-重设列尺寸的时候触发的事件 | ({dataIndex: string, value:number}) => void | - |
onRowClick | 动作设置-点击表格每一行触发的事件 | ({record: object, index:number, evt:object}) => void | - |
onRowMouseEnter | 动作设置-悬浮在表格每一行的时候触发的事件 | ({record: object, index: number, evt: object}) => void | - |
onRowMouseLeave | 动作设置-离开表格每一行的时候触发的事件 | ({record: object, index:number, evt:object}) => void | - |
onRowOpen | 设置可折叠/树形表格-启用折叠,展开收起时触发的事件 | (openRowKeys: array, currentRowKey: string, expanded: boolean, currentRecord: object) => void | - |
onSelect | 设置行选择器-单行选择回调 | ({selected: boolean,rowData: object,selectedRows: array})=>void | - |
onSelectAll | 设置行选择器-全部选择回调 | (selected: boolean,selectedRows: array)=>void | - |
openRowKeys | 设置可折叠/树形表格-启用折叠,默认展开渲染的行 | string[] | - |
pageMode | 设置顶部操作-操作条页面跳转,关联页面状态 | string | - |
pageShowCount | 分页设置-页码显示数量 | number | 5 |
pageSize | 分页设置-pageSize | number | 10 |
pageSizeList | 分页设置-每页显示选择器可选值 | array | [5,10,20] |
pageSizePosition | 分页设置-每页显示选择器在组件中的位置 | string | 'end' |
pageSizeSelector | 分页设置-每页显示选择器类型 | boolean | false |
pagination | 分页设置-分页位置 | string | 'right' |
primaryKey | 设置数据主键，数据主键用于区分数据中不同的行，对行选择和行编辑功能非常重要，不同的行主键值不可重复，一般采用数据库中自增 ID 字段 | string | 'id' |
render | 设置操作项-定制渲染 | (title: object,rowData: object)=>{title} | - |
rowProps | 设置风格和样式-单元格行属性配置 | (record: object,index: number)=>void | - |
searchBarPlaceholder | 设置顶部操作-显示搜索条占位符 | string | '请搜索' |
selectedRowKeys | 设置行选择器-已选中的行 | string[] | - |
setEmptyContent | 设置风格和样式-自定义空数据渲染 | boolean | false |
setLoadingComponent | 设置风格和样式-自定义loading组件 | boolean | false |
shape | 分页设置-前进后退按钮样式 | string | arrow-only |
showActionBar | 设置顶部操作-显示操作条 | boolean | true |
showCustomBarItem | 设置顶部操作-显示自定义区域 | boolean | false |
showCustomCoulmn | 设置顶部操作-显示列筛选器 | boolean | false |
showCustomCoulmn | 设置顶部操作-自定义区域渲染 | ()=>void | - |
showLinkBar | 设置顶部操作-是否显示外链条 | boolean | true |
showMiniPager | 分页设置-是否显示顶部的迷你分页(仅对 PC 端渲染有效) | boolean | false |
showRowSelector | 设置行选择器-是否显示 | boolean | false |
showSearch | 设置顶部操作-显示搜索条 | boolean | true |
size | 分页设置-分页尺寸 | string | 'medium' |
stickyHeader | 设置风格和样式-表头是否是sticky | boolean | false |
theme | 设置风格和样式-主题 | string | 'split' |
title | 设置操作项-标题 | string | '详情' |
title | 设置顶部操作-操作条标题 | string | '操作' |
title | 设置顶部操作-外链操作条,外链操作标题 | string | '外链操作' |
titleAddons | 设置行选择器-选择列列标题元素 | (rowData: object,index: number) => ReactNode | - |
titleProps | 设置行选择器-选择列列标题属性 | (rowData: object, index: number) => void | - |
type | 分页设置-分页类型 | string | 'normal' |
useStickyLock | 高级-设置列固定优化 | boolean | false |
useVirtual | 设置风格和样式-虚拟滚动 | boolean | false |