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

# Komponen Tabel

> Pelajari cara mengontrol pemilihan baris Tabel dengan kode di YiDA, mengambil baris terpilih, mengatur format edit bidang menjadi dropdown, dan memperluas baris pada struktur pohon — panduan lengkap Komponen Tabel untuk pengembang low-code.

| **Fitur**      | **Edisi Gratis** | **Edisi Basic** | **Edisi Professional** | **Edisi Dedicated** |
| -------------- | ---------------- | --------------- | ---------------------- | ------------------- |
| Komponen Tabel | Tidak didukung   | Tidak didukung  | Didukung               | Didukung            |

<Note>
  Untuk atribut komponen, penggunaan, dan contoh, [**klik di sini**](/id/open/yida/components/advanced/table).
</Note>

## 1. Mengontrol pemilihan baris Tabel dengan kode

### 1.1 Pilih Komponen Tabel dan klik "Pemilih baris"

Panel pengaturan atribut akan muncul di sisi kanan Komponen Tabel.

### 1.4 Ikat sebuah peristiwa ke tombol tindakan dan kontrol pemilihan baris dengan memperbarui sumber data kustom

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function onClick(){
  this.setState({
    selectedRows: ['1'], // id dari sumber data Tabel
  });
}
```

## 2. Mengambil baris yang dipilih

### 2.2 Untuk mengambilnya di waktu lain, buat sumber data "Variabel" dan simpan sendiri

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
    export function onSelectChange(selectedRowKeys, records) {
      console.log(selectedRowKeys, records);
      this.setState({
        selectedRowsData: records,
      });
    }
```

## 3. Mengatur format edit bidang menjadi dropdown

### 3.2 Perbarui konfigurasi edit

**Kode referensi:**

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "rules": [],
  "placeholder": "",
  "__sid__": "param_kqrr5pkb",
    // Berikut adalah item opsi
  "dataSource": [
    {
      "text": "1",
      "value": "1"
    },
    {
      "text": "2",
      "value": "2"
    }
  ]
}
```

## 4. Memperluas baris yang dirender secara default setelah mengaktifkan struktur pohon

Dalam kode edit, format data harus berupa array yang nilainya adalah kunci utama setiap baris. Ini akan memperluas baris yang bersangkutan secara default. Anda juga dapat mengikat sebuah variabel dan memperbaruinya pada setiap klik untuk mengubah secara dinamis baris mana yang diperluas secara default.

## 5. Dokumentasi Tabel lengkap

[**Klik di sini untuk melihat Dokumen Tabel**](/id/open/yida/components/advanced/table)