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}}
)
Cant use shared data set with a column of buttons, as the data has to be modified by the SDK.
Last updated
Was this helpful?