TablePc 表格 - DingTalk Help Center

展示行列数据。

何时使用

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`	可通过绑定数据源设置数据列	TableColumn[]	-
`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`