> ## 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.

# Rincian TableField

> Referensi komponen rincian TableField di YiDA. Pelajari cara mengonfigurasi bidang subformulir, tindakan baris, serta pembacaan dan penulisan data untuk skenario satu rekam utama yang terkait dengan banyak rekam rincian.

## Kapan digunakan

* Digunakan untuk skenario pengiriman subformulir.

## Definisi tipe

### Struktur konfigurasi item tindakan kustom

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface Action {
  content: string; // Label item tindakan
  callback: ({index: number, groupId: string, itemValue: any, actionKey: string }) => void; // Callback klik
  render: ({index: number, groupId: string, itemValue: any, actionKey: string }) => ReactNode; // Render kustom
}
```

## Contoh komponen

## Properti komponen

| Atribut                                   | Deskripsi                                                                                                                                 | Tipe                                                                | Default       |
| ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------- |
| `actions`                                 | Item tindakan kustom                                                                                                                      | `Action[]`                                                          | `[]`          |
| `actionsColumnWidth`                      | Lebar kolom tindakan, dalam piksel                                                                                                        | `number`                                                            | `70`          |
| `addButtonBehavior`                       | Status operasional tombol Tambah                                                                                                          | `'NORMAL' \| 'DISABLED' \| 'HIDDEN'`                                | `NORMAL`      |
| `addButtonPosition`                       | Posisi tombol Tambah                                                                                                                      | `'bottom' \| 'top'`                                                 | `'bottom'`    |
| `addButtonText`                           | Label tombol Tambah                                                                                                                       | `string`                                                            | `'Add item'`  |
| `beforeAddClick`                          | Callback yang dijalankan sebelum tombol Tambah diklik. Kembalikan false untuk memblokir penambahan.                                       | `() => boolean`                                                     | -             |
| `beforeCopyClick`                         | Callback yang dijalankan sebelum tombol Salin diklik. Kembalikan false untuk memblokir penyalinan.                                        | `( sourceGroupId: string, sourceItem: any ) => boolean`             | -             |
| `beforeDelClick`                          | Callback yang dijalankan sebelum tombol Hapus diklik. Kembalikan false untuk memblokir penghapusan.                                       | `( groupId: string , item: object ) => void`                        | -             |
| `beforeImportData`                        | Dijalankan sebelum data diimpor secara massal                                                                                             | `( data: any[] ) => any[]`                                          | -             |
| `behavior`                                | Status tampilan komponen formulir                                                                                                         | [Behavior](/id/open/yida/components/interface#behavior)             | `'NORMAL'`    |
| `columnsWidth`                            | Lebar kolom bidang. Contoh: \{ node\_ockzdxe6of1: '200px' }                                                                               | `Record<string, string>`                                            | -             |
| `copyButtonText`                          | Label tombol Salin                                                                                                                        | `string`                                                            | `'Copy'`      |
| `delButtonText`                           | Label tombol Hapus                                                                                                                        | `string`                                                            | `'Delete'`    |
| `label`                                   | Judul komponen formulir                                                                                                                   | `string`                                                            | -             |
| `labelAlign`                              | Posisi judul komponen formulir                                                                                                            | `'left' \| 'top'`                                                   | `'top'`       |
| `labelColOffset`                          | Posisi offset judul. Nilainya berupa nilai kisi, dengan 1 mewakili 1/24.                                                                  | `number`                                                            | `0`           |
| `labelColSpan`                            | Lebar placeholder judul. Nilainya berupa nilai kisi, dengan 1 mewakili 1/24.                                                              | `number`                                                            | `4`           |
| `labelTextAlign`                          | Perataan judul komponen formulir                                                                                                          | `'left' \| 'right'`                                                 | `'right'`     |
| `labelTipsIcon`                           | Ikon entri untuk tips judul komponen formulir. Berlaku ketika labelTipsTypes disetel ke **text** atau **render**.                         | `string`                                                            | -             |
| `labelTipsRender`                         | Metode render kustom untuk tips judul komponen formulir. Berlaku ketika labelTipsTypes disetel ke **render**.                             | `(props: IComponentProps) => ReactNode`                             | -             |
| `labelTipsText`                           | Teks tips judul komponen formulir. Berlaku ketika labelTipsTypes disetel ke **text**.                                                     | `string`                                                            | -             |
| `labelTipsTypes`                          | Pengaturan tipe tips judul komponen formulir                                                                                              | [LabelTipsTypes](/id/open/yida/components/interface#labeltipstypes) | `'none'`      |
| `layoutSetting.indexName`                 | Nama nomor urut                                                                                                                           | `string`                                                            | `'Item'`      |
| `layoutSetting.isFreezeOperateColumn`     | Apakah membekukan kolom tindakan                                                                                                          | `boolean`                                                           | `true`        |
| `layoutSetting.layout`                    | Mode tata letak (mode TABLE hanya berlaku pada mode PC). TILED: tata letak berjajar; TABLE: tata letak tabel.                             | `'TILED' \| 'TABLE'`                                                | `'TABLE'`     |
| `layoutSetting.pcFreezeColumnStartCounts` | Jumlah kolom yang dibekukan di sebelah kiri. 0 berarti tidak ada kolom yang dibekukan.                                                    | `'0' \| '1' \| '2' \| '3'`                                          | `0`           |
| `layoutSetting.showIndex`                 | Apakah menampilkan nomor urut                                                                                                             | `boolean`                                                           | `true`        |
| `layoutSetting.showTableHead`             | Apakah menampilkan header tabel (hanya berlaku pada mode tabel PC)                                                                        | `boolean`                                                           | `true`        |
| `layoutSetting.theme`                     | Subjek (hanya berlaku pada mode tabel PC)                                                                                                 | `'zebra' \| 'split' \| 'border'`                                    | `'split'`     |
| `maxItems`                                | Jumlah item maksimum. Hingga 500.                                                                                                         | `number`                                                            | `50`          |
| `moveDown`                                | Label tombol Pindah ke Bawah                                                                                                              | `string`                                                            | `'Move down'` |
| `moveUp`                                  | Label tombol Pindah ke Atas                                                                                                               | `string`                                                            | `'Move up'`   |
| `onAddClick`                              | Peristiwa klik tombol Tambah                                                                                                              | `( newGroupId: string ) => void`                                    | -             |
| `onChange`                                | Dipicu ketika nilai subformulir berubah                                                                                                   | `({ value: any , extra: any }) => void`                             | -             |
| `onCopyClick`                             | Peristiwa klik tombol Salin                                                                                                               | `( newGroupId: string , copiedItem: any ) => void`                  | -             |
| `onDelClick`                              | Peristiwa klik tombol Hapus                                                                                                               | `( newGroupId: string , copiedItem: object ) => void`               | -             |
| `pageSize`                                | Jumlah item per halaman                                                                                                                   | `'10' \| '20' \| '30'`                                              | `20`          |
| `showActions`                             | Apakah menampilkan kolom tindakan                                                                                                         | `boolean`                                                           | `true`        |
| `showCopyAction`                          | Apakah menampilkan tombol Salin                                                                                                           | `boolean`                                                           | `false`       |
| `showDelAction`                           | Apakah menampilkan tombol Hapus                                                                                                           | `boolean`                                                           | `true`        |
| `showDeleteConfirm`                       | Apakah mengaktifkan konfirmasi penghapusan                                                                                                | `boolean`                                                           | `true`        |
| `showSortable`                            | Apakah menampilkan pengurutan (hanya berlaku pada mode tabel PC)                                                                          | `boolean`                                                           | `false`       |
| `size`                                    | Ukuran komponen formulir                                                                                                                  | [Size](/id/open/yida/components/interface#size)                     | `'medium'`    |
| `tips`                                    | Deskripsi komponen formulir, ditampilkan di bawah kontrol                                                                                 | `string`                                                            | -             |
| `useCustomColumnsWidth`                   | Apakah mengustomisasi lebar kolom lain                                                                                                    | `boolean`                                                           | `false`       |
| `validation`                              | Pengaturan validasi untuk komponen formulir. Untuk detail, lihat [dokumentasi Validasi Formulir](/id/open/yida/guide/concept/validation). | [Validation\[\]](/id/open/yida/components/interface#validation)     | `[]`          |
| `value`                                   | Nilai default komponen rincian                                                                                                            | `any[]`                                                             | `[]`          |
| `wrapperColOffset`                        | Posisi offset komponen formulir. Nilainya berupa nilai kisi, dengan 1 mewakili 1/24.                                                      | `number`                                                            | `0`           |
| `wrapperColSpan`                          | Lebar placeholder komponen formulir. Nilainya berupa nilai kisi, dengan 1 mewakili 1/24.                                                  | `number`                                                            | `0`           |