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

# テーブルコンポーネント

> YiDAのテーブルコンポーネントをコードで制御する方法を解説します。行選択の制御、選択済み行の取得、フィールドの編集形式をドロップダウンに設定する方法、ツリー構造の行をデフォルトで展開する方法に加え、カスタムページからテーブルへデータを書き込む手順まで紹介します。

| **機能**      | **Freeプラン** | **ベーシック版** | **プロフェッショナル版** | **専用版** |
| ----------- | ----------- | ---------- | -------------- | ------- |
| テーブルコンポーネント | 非対応         | 非対応        | 対応             | 対応      |

<Note>
  コンポーネントの属性、使い方、および例については、[**テーブルコンポーネントのドキュメント**](/ja/open/yida/components/advanced/table)をご参照ください。
</Note>

## 1. コードによるテーブルの行選択の制御

### 1.1 テーブルコンポーネントを選択し、「行セレクター」をクリック

テーブルコンポーネントの右側に属性設定パネルが表示されます。

### 1.4 操作ボタンにイベントをバインドし、カスタムデータソースを更新して行選択を制御

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function onClick(){
  this.setState({
    selectedRows: ['1'], // テーブルデータソース内の id
  });
}
```

## 2. 選択済み行の取得

### 2.2 別のタイミングで取得する場合は、「変数」データソースを作成し、自身で保存

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

## 3. フィールドの編集形式をドロップダウンに設定

### 3.2 編集設定を更新

**参考コード：**

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "rules": [],
  "placeholder": "",
  "__sid__": "param_kqrr5pkb",
    // 以下は選択肢の項目です
  "dataSource": [
    {
      "text": "1",
      "value": "1"
    },
    {
      "text": "2",
      "value": "2"
    }
  ]
}
```

## 4. ツリー構造を有効化後、レンダリング済み行をデフォルトで展開

編集コードでは、データ形式は各行の主キーを値とする配列である必要があります。これにより、対応する行がデフォルトで展開されます。また、変数をバインドし、クリックごとに更新することで、デフォルトで展開される行を動的に変更することも可能です。

## 5. テーブルの詳細ドキュメント

[**テーブルドキュメントを確認**](/ja/open/yida/components/advanced/table)