# Buttons Column

**Overview**

This section explains how to enhance table data with interactive buttons linked to specific actions or data triggers. The buttons are defined per each data point, allowing for a customized and interactive data presentation.

**Creating Button Columns**

To integrate button columns into your table, you must define a `TableButtonColumnDefinition`. This object configures the buttons and their behaviors. The definition can be applied to any table created within this framework.

Fields of `TableButtonColumnDefinition`:

* **`column_name`**: The header title of the button column.
* **`label`**: Descriptive text displayed on each button.
* **`models_column`** (Optional): Specifies the column that contains the names of the models associated with the buttons.
* **`activities_column`** (Optional): Specifies the column that contains the ids for activities triggered by the buttons.
* **`actions_column`** (Optional): Specifies the column that contains the ids for actions triggered by the buttons.

**Example Usage:**

Below is an example to demonstrate how to add interactive buttons to a modal using `shimoku_client`.

```python
def create_modal(name: str):
    shimoku_client.plt.set_modal(name)
    shimoku_client.plt.html(f"<h1>{name}</h1><p>Modal content</p>", order=0, cols_size=12)
    shimoku_client.plt.pop_out_of_modal()

# Creating models for demonstration
for name in ["Modal 1", "Modal 2", "Modal 3"]:
    create_modal(name)

# Table data with dates and associated modals
table_data = [
    {"date": dt.date(2021, 1, 1), "modal": "Modal 1"},
    {"date": dt.date(2021, 1, 2), "modal": "Modal 2"},
    {"date": dt.date(2021, 1, 3), "modal": "Modal 3"},
    {"date": dt.date(2021, 1, 4), "modal": "Modal 1"},
    {"date": dt.date(2021, 1, 5), "modal": "Modal 2"}
]

# Configuring and displaying the table
shimoku_client.plt.table(
    data=table_data,
    order=0,
    rows_size=3,
    buttons_column_definition=shimoku_client.plt.TableButtonColumnDefinition(
        column_name="Buttons",
        label="Open Modal",
        models_column="modal"
    ),
    columns_options={"Buttons": {"width": 150}}
)

```

{% tabs %}
{% tab title="Initial State No Buttons Pressed" %}

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FfwTKkJ46RHx8xLPBftmX%2Fimatge.png?alt=media&#x26;token=6e100016-9fab-4cd9-9b19-874d7d9850fb" alt=""><figcaption><p>Table With buttons</p></figcaption></figure>
{% endtab %}

{% tab title="First Button Pressed           " %}

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FcUH9zqcEmPKUtu4ecaTL%2Fimatge.png?alt=media&#x26;token=f7c36e27-3718-4290-99ea-a284127dcadf" alt=""><figcaption><p>First row button pressed</p></figcaption></figure>
{% endtab %}

{% tab title="Second Button Pressed           " %}

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FxoqOgGGbSzeYZdf4xrAF%2Fimatge.png?alt=media&#x26;token=b26b043f-1763-43fc-b8d6-0cb1e291c0f0" alt=""><figcaption><p>Second row button pressed</p></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
Cant use shared data set with a column of buttons, as the data has to be modified by the SDK.
{% endhint %}