> ## Documentation Index > Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt > Use this file to discover all available pages before exploring further. # TableField Detail > TableField detail component reference. Learn how to configure subform fields, row actions, and data read/write for scenarios where a single main record links to multiple detail records. ## When to Use * Use for subform submission scenarios. ## Type Definitions ### Custom Action Item Configuration Structure ```ts theme={"theme":{"light":"github-light","dark":"github-dark"}} 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](/open/yida/components/interface#behavior) | `'NORMAL'` | | `columnsWidth` | Field column width. Example: \{ node\_ockzdxe6of1: '200px' } | `Record` | - | | `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](/open/yida/components/interface#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](/open/yida/components/interface#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](/open/yida/guide/concept/validation). | [Validation\[\]](/open/yida/components/interface#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` |