> ## 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 明细
> TableField 明细组件参考，详解子表单字段配置、行操作与数据读写方式，用于一条主表数据关联多条明细的提交场景。
## 何时使用
* 用于子表单提交场景；
## 类型定义
### 自定义操作项配置结构
```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface Action {
content: string; // 操作项文案
callback: ({index: number, groupId: string, itemValue: any, actionKey: string }) => void; // 点击回调
render: ({index: number, groupId: string, itemValue: any, actionKey: string }) => ReactNode; // 自定义渲染
}
```
## 组件示例
## 组件属性
| 属性 | 说明 | 类型 | 默认值 |
| ----------------------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------------- | ---------- |
| `actions` | 自定义操作项 | `Action[]` | `[]` |
| `actionsColumnWidth` | 操作列宽度，单位px | `number` | `70` |
| `addButtonBehavior` | 新增按钮的可操作状态 | `'NORMAL' \| 'DISABLED' \| 'HIDDEN'` | `NORMAL` |
| `addButtonPosition` | 新增按钮位置 | `'bottom' \| 'top'` | `'bottom'` |
| `addButtonText` | 新增按钮文案 | `string` | `'新增一项'` |
| `beforeAddClick` | 添加按钮点击前回调，返回false阻止添加 | `() => boolean` | - |
| `beforeCopyClick` | 复制按钮点击前回调，返回false阻止复制 | `( sourceGroupId: string, sourceItem: any ) => boolean` | - |
| `beforeDelClick` | 删除按钮点击前回调，返回false阻止删除 | `( groupId: string , item: object ) => void` | - |
| `beforeImportData` | 批量导入数据前执行 | `( data: any[] ) => any[]` | - |
| `behavior` | 表单组件显示状态 | [Behavior](/zh/open/yida/components/interface#behavior) | `'NORMAL'` |
| `columnsWidth` | 字段列宽，例如： \{ node\_ockzdxe6of1: '200px' } | `Record` | - |
| `copyButtonText` | 复制按钮名称 | `string` | `'复制'` |
| `delButtonText` | 删除按钮名称 | `string` | `'删除'` |
| `label` | 表单组件标题 | `string` | - |
| `labelAlign` | 表单组件标题的位置 | `'left' \| 'top'` | `'top'` |
| `labelColOffset` | 设置标题的偏移位置，配置值为栅格值，1代表1/24 | `number` | `0` |
| `labelColSpan` | 设置标题的占位宽度，配置值为栅格值，1代表1/24 | `number` | `4` |
| `labelTextAlign` | 表单组件的标题对齐方式 | `'left' \| 'right'` | `'right'` |
| `labelTipsIcon` | 表单组件标题提示信息入口图标，当labelTipsTypes取值为 **text** 或 **render** 时生效 | `string` | - |
| `labelTipsRender` | 表单组件标题提示信息自定义渲染方法，当labelTipsTypes取值为 **render** 时生效 | `(props: IComponentProps) => ReactNode` | - |
| `labelTipsText` | 表单组件标题提示文本信息，当labelTipsTypes取值为 **text** 时生效 | `string` | - |
| `labelTipsTypes` | 表单组件标题提示信息类型设置 | [LabelTipsTypes](/zh/open/yida/components/interface#labelTipsTypes) | `'none'` |
| `layoutSetting.indexName` | 序号名称 | `string` | `'项目'` |
| `layoutSetting.isFreezeOperateColumn` | 是否冻结操作列 | `boolean` | `true` |
| `layoutSetting.layout` | 排列方式（表格方式只在 PC 模式下有效），TILED：平铺方式、TABLE：表格方式 | `'TILED' \| 'TABLE'` | `'TABLE'` |
| `layoutSetting.pcFreezeColumnStartCounts` | 左侧列冻结，0表示不冻结 | `'0' \| '1' \| '2' \| '3'` | `0` |
| `layoutSetting.showIndex` | 是否显示序号 | `boolean` | `true` |
| `layoutSetting.showTableHead` | 是否显示表头（只在 PC 表格方式下有效） | `boolean` | `true` |
| `layoutSetting.theme` | 主题（只在 PC 表格方式下有效） | `'zebra' \| 'split' \| 'border'` | `'split'` |
| `maxItems` | 最大条数，最大 500 条 | `number` | `50` |
| `moveDown` | 下移按钮名称 | `string` | `'下移'` |
| `moveUp` | 上移按钮名称 | `string` | `'上移'` |
| `onAddClick` | 添加按钮点击事件 | `( newGroupId: string ) => void` | - |
| `onChange` | onChange 子表单值变化 | `({ value: any , extra: any }) => void` | - |
| `onCopyClick` | 添加按钮点击事件 | `( newGroupId: string , copiedItem: any ) => void` | - |
| `onDelClick` | 删除按钮点击事件 | `( newGroupId: string , copiedItem: object ) => void` | - |
| `pageSize` | 分页条数 | `'10' \| '20' \| '30'` | `20` |
| `showActions` | 是否显示操作列 | `boolean` | `true` |
| `showCopyAction` | 是否显示复制按钮 | `boolean` | `false` |
| `showDelAction` | 是否显示删除按钮 | `boolean` | `true` |
| `showDeleteConfirm` | 是否开启删除确认 | `boolean` | `true` |
| `showSortable` | 是否显示排序（只在 PC 表格方式下有效） | `boolean` | `false` |
| `size` | 表单组件尺寸 | [Size](/zh/open/yida/components/interface#size) | `'medium'` |
| `tips` | 表单组件描述信息，展示在控件下方 | `string` | - |
| `useCustomColumnsWidth` | 是否自定义其它列宽度 | `boolean` | `false` |
| `validation` | 表单组件校验设置，具体使用详见[表单校验文档](/zh/open/yida/guide/concept/validation) | [Validation\[\]](/zh/open/yida/components/interface#validation) | `[]` |
| `value` | 明细组件默认值 | `any[]` | `[]` |
| `wrapperColOffset` | 设置表单组件的偏移位置，设置值为栅格值，1代表1/24 | `number` | `0` |
| `wrapperColSpan` | 设置表单组件的占位宽度，设置值为栅格值，1代表1/24 | `number` | `0` |