TableField 明細 - DingTalk Help Center

使用シーン

サブフォームの送信シナリオで使用します。

型定義

カスタムアクション項目の設定構造

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`	アクション列の列幅（ピクセル単位）	`number`	`70`
`addButtonBehavior`	追加ボタンの操作可能状態	`'NORMAL' \| 'DISABLED' \| 'HIDDEN'`	`NORMAL`
`addButtonPosition`	追加ボタンの位置	`'bottom' \| 'top'`	`'bottom'`
`addButtonText`	追加ボタンのラベル	`string`	`'Add item'`
`beforeAddClick`	追加ボタンのクリック前に実行されるコールバック。false を返すと追加をブロックします。	`() => boolean`	-
`beforeCopyClick`	コピーボタンのクリック前に実行されるコールバック。false を返すとコピーをブロックします。	`( sourceGroupId: string, sourceItem: any ) => boolean`	-
`beforeDelClick`	削除ボタンのクリック前に実行されるコールバック。false を返すと削除をブロックします。	`( groupId: string , item: object ) => void`	-
`beforeImportData`	データの一括インポート前に実行	`( data: any[] ) => any[]`	-
`behavior`	フォームコンポーネントの表示状態	Behavior	`'NORMAL'`
`columnsWidth`	フィールド列の列幅。例：{ node_ockzdxe6of1: ‘200px’ }	`Record<string, string>`	-
`copyButtonText`	コピーボタンの名前	`string`	`'Copy'`
`delButtonText`	削除ボタンの名前	`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`	シーケンス番号の名前	`string`	`'Item'`
`layoutSetting.isFreezeOperateColumn`	アクション列を固定するかどうか	`boolean`	`true`
`layoutSetting.layout`	レイアウトモード（TABLE モードは 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`	`'Move down'`
`moveUp`	上へ移動ボタンの名前	`string`	`'Move up'`
`onAddClick`	追加ボタンのクリックイベント	`( newGroupId: string ) => void`	-
`onChange`	サブフォームの値が変更されたときにトリガー	`({ value: any , extra: any }) => void`	-
`onCopyClick`	コピーボタンのクリックイベント	`( newGroupId: string , copiedItem: any ) => void`	-
`onDelClick`	削除ボタンのクリックイベント	`( newGroupId: string , copiedItem: object ) => void`	-
`pageSize`	1 ページあたりの項目数	`'10' \| '20' \| '30'`	`20`
`showActions`	アクション列を表示するかどうか	`boolean`	`true`
`showCopyAction`	コピーボタンを表示するかどうか	`boolean`	`false`
`showDelAction`	削除ボタンを表示するかどうか	`boolean`	`true`
`showDeleteConfirm`	削除確認を有効にするかどうか	`boolean`	`true`
`showSortable`	並べ替えを表示するかどうか（PC のテーブルモードでのみ有効）	`boolean`	`false`
`size`	フォームコンポーネントのサイズ	Size	`'medium'`
`tips`	フォームコンポーネントの説明。コントロールの下部に表示されます。	`string`	-
`useCustomColumnsWidth`	その他の列の幅をカスタマイズするかどうか	`boolean`	`false`
`validation`	フォームコンポーネントのバリデーション設定。詳細はフォームバリデーションのドキュメントを参照してください。	Validation[]	`[]`
`value`	明細コンポーネントのデフォルト値	`any[]`	`[]`
`wrapperColOffset`	フォームコンポーネントのオフセット位置。値はグリッド値で、1 は 1/24 を表します。	`number`	`0`
`wrapperColSpan`	フォームコンポーネントのプレースホルダ幅。値はグリッド値で、1 は 1/24 を表します。	`number`	`0`