TableField Details

When to Use

• Used for sub-form submission scenarios;

Type Definition

Custom Action Item Configuration Structure

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

Component Example

Component Properties

属性	说明	类型	默认值
actions	Custom action items	Action[]	[]
actionsColumnWidth	Action column width, unit in px	number	70
addButtonBehavior	Add button operable state	'NORMAL' | 'DISABLED' | 'HIDDEN'	NORMAL
addButtonPosition	Add button position	'bottom' | 'top'	'bottom'
addButtonText	Add button text	string	'Add Item'
beforeAddClick	Callback before add button click, return false to prevent adding	() => boolean	-
beforeCopyClick	Callback before copy button click, return false to prevent copying	( sourceGroupId: string, sourceItem: any ) => boolean	-
beforeDelClick	Callback before delete button click, return false to prevent deletion	( groupId: string , item: object ) => void	-
beforeImportData	Execute before batch import data	( data: any[] ) => any[]	-
behavior	表单组件显示状态	Behavior	'NORMAL'
columnsWidth	Field column width, for example: { node_ockzdxe6of1: '200px' }	Record<string, string>	-
copyButtonText	Copy button name	string	'Copy'
delButtonText	Delete button name	string	'Delete'
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	'none'
layoutSetting.indexName	Index name	string	'Item'
layoutSetting.isFreezeOperateColumn	Whether to freeze operation column	boolean	true
layoutSetting.layout	Arrangement method (table method is only effective in PC mode), TILED: tiled method, TABLE: table method	'TILED' | 'TABLE'	'TABLE'
layoutSetting.pcFreezeColumnStartCounts	Left column freeze, 0 means no freeze	'0' | '1' | '2' | '3'	0
layoutSetting.showIndex	Whether to show index	boolean	true
layoutSetting.showTableHead	Whether to show table header (only effective in PC table mode)	boolean	true
layoutSetting.theme	Theme (only effective in PC table mode)	'zebra' | 'split' | 'border'	'split'
maxItems	Maximum count, maximum 500 items	number	50
moveDown	Move down button name	string	'Move Down'
moveUp	Move up button name	string	'Move Up'
onAddClick	Add button click event	( newGroupId: string ) => void	-
onChange	onChange sub-form value change	({ value: any , extra: any }) => void	-
onCopyClick	Add button click event	( newGroupId: string , copiedItem: any ) => void	-
onDelClick	Delete button click event	( newGroupId: string , copiedItem: object ) => void	-
pageSize	Pagination count	'10' | '20' | '30'	20
showActions	Whether to show action column	boolean	true
showCopyAction	Whether to show copy button	boolean	false
showDelAction	Whether to show delete button	boolean	true
showDeleteConfirm	Whether to enable delete confirmation	boolean	true
showSortable	Whether to show sorting (only effective in PC table mode)	boolean	false
size	表单组件尺寸	Size	'medium'
tips	表单组件描述信息，展示在控件下方	string	-
useCustomColumnsWidth	Whether to customize other column widths	boolean	false
validation	表单组件校验设置，具体使用详见表单校验文档	Validation[]	[]
value	Details component default value	any[]	[]
wrapperColOffset	设置表单组件的偏移位置，设置值为栅格值，1代表1/24	number	0
wrapperColSpan	设置表单组件的占位宽度，设置值为栅格值，1代表1/24	number	0