Buttons Column

How to add buttons to the rows of a table


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.html(f"<h1>{name}</h1><p>Modal content</p>", order=0, cols_size=12)

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

# 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
        label="Open Modal",
    columns_options={"Buttons": {"width": 150}}

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

Last updated