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

# Table Component

> Learn how to use code to control table row selection, retrieve selected rows, set a field's edit format to a dropdown, and expand rendered rows by default after enabling the tree structure. This document also compares feature support across editions (Free plan, Basic edition, Professional edition, Dedicated edition) and links to the full table reference and a guide on writing form data into a table from a custom page.

| **Feature**     | **Free plan** | **Basic edition** | **Professional edition** | **Dedicated edition** |
| --------------- | ------------- | ----------------- | ------------------------ | --------------------- |
| Table component | Not supported | Not supported     | Supported                | Supported             |

<Note>
  For component attributes, usage, and examples, see the [**table component reference**](/open/yida/components/advanced/table).
</Note>

## 1. Control Table Row Selection with Code

### 1.1 Select the Table Component and Click "Row Selector"

The attribute settings panel appears on the right side of the table component.

### 1.4 Bind an Event to Your Action Button and Control Row Selection by Updating the Custom Data Source

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

## 2. Retrieve Selected Rows

### 2.2 To Retrieve Them at Other Times, Create a "Variable" Data Source and Store Them Yourself

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

## 3. Set a Field's Edit Format to Dropdown

### 3.2 Update the Edit Configuration

**Reference code:**

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "rules": [],
  "placeholder": "",
  "__sid__": "param_kqrr5pkb",
    // The following are the option items
  "dataSource": [
    {
      "text": "1",
      "value": "1"
    },
    {
      "text": "2",
      "value": "2"
    }
  ]
}
```

## 4. Expand Rendered Rows by Default After Enabling the Tree Structure

In the edit code, the data format must be an array whose values are the primary keys of each row. This expands the corresponding rows by default. You can also bind a variable and update it on each click to dynamically change which rows are expanded by default.

## 5. Detailed Table Documentation

[**View the full table documentation**](/open/yida/components/advanced/table)