# 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="/files/mnLIPVaSSExzcnmltqzC" alt=""><figcaption><p>Table With buttons</p></figcaption></figure>
{% endtab %}

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

<figure><img src="/files/5X6J2Zi0asczjwsbOK41" alt=""><figcaption><p>First row button pressed</p></figcaption></figure>
{% endtab %}

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

<figure><img src="/files/gG4LzJl6oqQAFwrf4YZH" 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.shimoku.com/dev/elements/charts/table/buttons-column.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.