TableField Detail - DingTalk Help Center

When to Use

Use for subform submission scenarios.

Type Definitions

Custom Action Item Configuration Structure

interface Action {
  content: string; // Action item label
  callback: ({index: number, groupId: string, itemValue: any, actionKey: string }) => void; // Click callback
  render: ({index: number, groupId: string, itemValue: any, actionKey: string }) => ReactNode; // Custom render
}

Component Example

Component Properties

Attribute	Description	Type	Default
`actions`	Custom action items	`Action[]`	`[]`
`actionsColumnWidth`	Width of the action column, in pixels	`number`	`70`
`addButtonBehavior`	Interactive state of the Add button	`'NORMAL' \| 'DISABLED' \| 'HIDDEN'`	`NORMAL`
`addButtonPosition`	Position of the Add button	`'bottom' \| 'top'`	`'bottom'`
`addButtonText`	Label of the Add button	`string`	`'Add item'`
`beforeAddClick`	Callback executed before the Add button is clicked. Return false to block the addition.	`() => boolean`	-
`beforeCopyClick`	Callback executed before the Copy button is clicked. Return false to block the copy.	`( sourceGroupId: string, sourceItem: any ) => boolean`	-
`beforeDelClick`	Callback executed before the Delete button is clicked. Return false to block the deletion.	`( groupId: string , item: object ) => void`	-
`beforeImportData`	Callback executed before batch data import	`( data: any[] ) => any[]`	-
`behavior`	Display state of the form component	Behavior	`'NORMAL'`
`columnsWidth`	Field column width. Example: { node_ockzdxe6of1: ‘200px’ }	`Record<string, string>`	-
`copyButtonText`	Label of the Copy button	`string`	`'Copy'`
`delButtonText`	Label of the Delete button	`string`	`'Delete'`
`label`	Title of the form component	`string`	-
`labelAlign`	Position of the form component title	`'left' \| 'top'`	`'top'`
`labelColOffset`	Offset of the title. The value uses a 24-grid system, where 1 represents 1/24.	`number`	`0`
`labelColSpan`	Width of the title placeholder. The value uses a 24-grid system, where 1 represents 1/24.	`number`	`4`
`labelTextAlign`	Alignment of the form component title	`'left' \| 'right'`	`'right'`
`labelTipsIcon`	Entry icon for the title tips of the form component. Takes effect when labelTipsTypes is set to text or render.	`string`	-
`labelTipsRender`	Custom render method for the title tips of the form component. Takes effect when labelTipsTypes is set to render.	`(props: IComponentProps) => ReactNode`	-
`labelTipsText`	Title tips text of the form component. Takes effect when labelTipsTypes is set to text.	`string`	-
`labelTipsTypes`	Type of title tips for the form component	LabelTipsTypes	`'none'`
`layoutSetting.indexName`	Name of the sequence number column	`string`	`'Item'`
`layoutSetting.isFreezeOperateColumn`	Whether to freeze the action column	`boolean`	`true`
`layoutSetting.layout`	Layout mode (TABLE mode takes effect only in PC mode). TILED: tiled layout; TABLE: table layout.	`'TILED' \| 'TABLE'`	`'TABLE'`
`layoutSetting.pcFreezeColumnStartCounts`	Number of frozen columns on the left. 0 means no columns are frozen.	`'0' \| '1' \| '2' \| '3'`	`0`
`layoutSetting.showIndex`	Whether to display the sequence number	`boolean`	`true`
`layoutSetting.showTableHead`	Whether to display the table header (takes effect only in PC table mode)	`boolean`	`true`
`layoutSetting.theme`	Subject (takes effect only in PC table mode)	`'zebra' \| 'split' \| 'border'`	`'split'`
`maxItems`	Maximum number of items. Up to 500.	`number`	`50`
`moveDown`	Label of the Move Down button	`string`	`'Move down'`
`moveUp`	Label of the Move Up button	`string`	`'Move up'`
`onAddClick`	Click event of the Add button	`( newGroupId: string ) => void`	-
`onChange`	Triggered when the subform value changes	`({ value: any , extra: any }) => void`	-
`onCopyClick`	Click event of the Copy button	`( newGroupId: string , copiedItem: any ) => void`	-
`onDelClick`	Click event of the Delete button	`( newGroupId: string , copiedItem: object ) => void`	-
`pageSize`	Number of items per page	`'10' \| '20' \| '30'`	`20`
`showActions`	Whether to display the action column	`boolean`	`true`
`showCopyAction`	Whether to display the Copy button	`boolean`	`false`
`showDelAction`	Whether to display the Delete button	`boolean`	`true`
`showDeleteConfirm`	Whether to enable delete confirmation	`boolean`	`true`
`showSortable`	Whether to display sorting (takes effect only in PC table mode)	`boolean`	`false`
`size`	Size of the form component	Size	`'medium'`
`tips`	Description of the form component, displayed below the control	`string`	-
`useCustomColumnsWidth`	Whether to customize the width of other columns	`boolean`	`false`
`validation`	Validation settings for the form component. For details, see the Form Validation documentation.	Validation[]	`[]`
`value`	Default value of the detail component	`any[]`	`[]`
`wrapperColOffset`	Offset of the form component. The value uses a 24-grid system, where 1 represents 1/24.	`number`	`0`
`wrapperColSpan`	Width of the form component placeholder. The value uses a 24-grid system, where 1 represents 1/24.	`number`	`0`