Buttons Column

How to add buttons to the rows of a table

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.

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}}
)

Initial State No Buttons Pressed

Table With buttons

First Button Pressed

Second Button Pressed

Cant use shared data set with a column of buttons, as the data has to be modified by the SDK.