TablePc Spreadsheet - DingTalk Help Center

Displays row and column data.

When to Use

The table renders data as a highly customizable and accessible HTML table. Its core function is to present structured data in tabular form.
Use various parameters to enable features such as sorting, filtering, scrolling, and Column locking.

Component Example

Component Properties

Property	Description	Type	Default
`actionBar`	Set the top action bar.	`array`	`[{title: {zh_CN: '操作1',en_US: 'Action 1',type: 'i18n'},option: 'callback'}]`
`actionFixed`	Fix the Action Column.	`string`	`'none'`
`actionHidden`	Whether to hide the Action Column.	`boolean`	`false`
`actionTitle`	Title of the Action Column.	`string`	`'Action'`
`actionType`	Button Type of the Action Column.	`string`	`'link'`
`actionWidth`	Width of the Action Column.	`number`	`0`
`cellProps`	Style and appearance — Cell splitting and merging.	`(rowIndex: number,colIndex: number,dataIndex: number,record: object)=>void`	-
`columnProps`	Row selector — Selection Column properties.	`() => void`	-
`columns`	Set data columns by binding a Data Source.	TableColumn[]	-
`data`	Data Source.	`any[]`	-
`dataSourceType`	Data Source type.	`'data' \| 'url'`	`'data'`
`device`	Action item — Display on specific devices.	`string`	-
`emptyContent`	Style and appearance — Empty data rendering.	`() => ReactNode`	-
`expandedRowIndent`	Collapsible / tree Spreadsheet — Enable collapsing; indent of additionally rendered rows.	`array`	`[]`
`expandedRowRender`	Collapsible / tree Spreadsheet — Enable collapsing; render Function for additionally rendered rows.	`(record: object, index: number) => ReactNode`	-
`fixedHeader`	Style and appearance — Whether the header is fixed.	`boolean`	`true`
`getExpandedColProps`	Collapsible / tree Spreadsheet — Enable collapsing; properties of additionally rendered rows.	`(record: object, index: number) => ReactNode`	-
`getProps`	Row selector — Selector properties.	`(rowData: object, index: number) => void`	-
`hasExpandedRowCtrl`	Collapsible / tree Spreadsheet — Enable collapsing; collapse Button.	`boolean`	`true`
`hasHeader`	Style and appearance — Show header.	`boolean`	`true`
`isDisabled`	Top action bar — Page navigation, whether Disabled.	`boolean`	-
`isExpand`	Collapsible / tree Spreadsheet — Enable collapsing.	`boolean`	`false`
`isPagination`	Pagination Settings — Use pagination.	`boolean`	`true`
`isPagination`	Pagination Settings — Whether to hide the pager when there is only one page.	`boolean`	`false`
`isTree`	Collapsible / tree Spreadsheet — Enable tree mode.	`boolean`	`false`
`loading`	Whether the loading state is active.	`boolean`	`false`
`loadingComponent`	Style and appearance — Loading Component.	`()=>ReactNode`	-
`maxBodyHeight`	Style and appearance — Whether the header is fixed; maximum height of the content area.	`number`	`0`
`maxWebShownActionCount`	Maximum number of actions to display.	`number`	`3`
`mobileActionsStyle`	Mobile-specific Settings — Expansion mode, action style.	`string`	-
`mobileDefaultCardColumns`	Mobile-specific Settings — Expansion mode, default number of Fields.	`string`	`4`
`mobileExpanViewMode`	Mobile-specific Settings — Expansion mode.	`string`	`normal`
`mobileMargin`	Mobile-specific Settings — Default margin.	`number`	`0`
`mobileMode`	Mobile-specific Settings — Display style.	`string`	`normal`
`mode`	Action item — Display in Edit state.	`string`	`'VIEW'`
`mode`	Row selector — Type.	`'single' \| 'multiple'`	`'multiple'`
`noPadding`	Premium — Hide margins.	`boolean`	`false`
`onCellDataChange`	Action Settings — Triggered when data changes in edit mode.	`({data: object}) => void`	-
`onChange`	Row selector — Selection change callback.	`(selectedRowKeys: array,records: array)=>void`	-
`onColumnsChange`	Top action bar — Column filter callback.	`(columns: object)=>void`	-
`onFetchData`	Action Settings — Triggered on pagination, Search, or Sort.	`({params: object}) => void`	-
`onResizeChange`	Action Settings — Triggered when a Column is resized.	`({dataIndex: string, value:number}) => void`	-
`onRowClick`	Action Settings — Triggered when a Record is clicked.	`({record: object, index:number, evt:object}) => void`	-
`onRowMouseEnter`	Action Settings — Triggered when the mouse hovers over a Record.	`({record: object, index: number, evt: object}) => void`	-
`onRowMouseLeave`	Action Settings — Triggered when the mouse leaves a Record.	`({record: object, index:number, evt:object}) => void`	-
`onRowOpen`	Collapsible / tree Spreadsheet — Enable collapsing; event triggered on expand / collapse.	`(openRowKeys: array, currentRowKey: string, expanded: boolean, currentRecord: object) => void`	-
`onSelect`	Row selector — Single-row selection callback.	`({selected: boolean,rowData: object,selectedRows: array})=>void`	-
`onSelectAll`	Row selector — Select-All callback.	`(selected: boolean,selectedRows: array)=>void`	-
`openRowKeys`	Collapsible / tree Spreadsheet — Enable collapsing; rows expanded by Default.	`string[]`	-
`pageMode`	Top action bar — Page navigation, associated Page state.	`string`	-
`pageShowCount`	Pagination Settings — Number of page numbers to display.	`number`	`5`
`pageSize`	Pagination Settings — pageSize.	`number`	`10`
`pageSizeList`	Pagination Settings — Available values for the page-size selector.	`array`	`[5,10,20]`
`pageSizePosition`	Pagination Settings — Position of the page-size selector within the Component.	`string`	`'end'`
`pageSizeSelector`	Pagination Settings — Page-size selector type.	`boolean`	`false`
`pagination`	Pagination Settings — Pagination Location.	`string`	`'right'`
`primaryKey`	Set the data Primary key. The Primary key distinguishes rows within the data and is essential for row selection and row editing. Primary key values must be unique across rows. Typically, an auto-increment ID Field from the database is used.	`string`	`'id'`
`render`	Action item — Custom rendering.	`(title: object,rowData: object)=>{title}`	-
`rowProps`	Style and appearance — Cell row property Configuration.	`(record: object,index: number)=>void`	-
`searchBarPlaceholder`	Top action bar — Search bar placeholder.	`string`	`'Search'`
`selectedRowKeys`	Row selector — Selected rows.	`string[]`	-
`setEmptyContent`	Style and appearance — Custom empty data rendering.	`boolean`	`false`
`setLoadingComponent`	Style and appearance — Custom loading Component.	`boolean`	`false`
`shape`	Pagination Settings — Style of the previous / next Buttons.	`string`	`arrow-only`
`showActionBar`	Top action bar — Show the action bar.	`boolean`	`true`
`showCustomBarItem`	Top action bar — Show the Custom area.	`boolean`	`false`
`showCustomCoulmn`	Top action bar — Show the Column filter.	`boolean`	`false`
`showCustomCoulmn`	Top action bar — Custom area rendering.	`()=>void`	-
`showLinkBar`	Top action bar — Whether to show the external link bar.	`boolean`	`true`
`showMiniPager`	Pagination Settings — Whether to show the mini pager at the top (PC rendering only).	`boolean`	`false`
`showRowSelector`	Row selector — Whether to display it.	`boolean`	`false`
`showSearch`	Top action bar — Show the search bar.	`boolean`	`true`
`size`	Pagination Settings — Pagination size.	`string`	`'medium'`
`stickyHeader`	Style and appearance — Whether the header is sticky.	`boolean`	`false`
`theme`	Style and appearance — Subject.	`string`	`'split'`
`title`	Action item — Title.	`string`	`'Details'`
`title`	Top action bar — Action bar Title.	`string`	`'Action'`
`title`	Top action bar — External link action bar, external link action Title.	`string`	`'External Link Action'`
`titleAddons`	Row selector — Header elements for the Selection Column.	`(rowData: object,index: number) => ReactNode`	-
`titleProps`	Row selector — Header properties for the Selection Column.	`(rowData: object, index: number) => void`	-
`type`	Pagination Settings — Pagination type.	`string`	`'normal'`
`useStickyLock`	Premium — Column-fixing optimization.	`boolean`	`false`
`useVirtual`	Style and appearance — Virtual scrolling.	`boolean`	`false`