Cell_Class_Name question

[asdf77449212-art]

Hello Taipy team, I'm currently encountering a problem with the cell_class_name attribute when using tables and would like to ask for your help.

Below is a simple example I've attached (one Cell_Class_Name_Test.py file and one style.css file). Since my development environment cannot connect to the external network, please forgive the poor formatting due to having to paste it on my phone.

To briefly explain the problem I'm trying to solve:

In Cell_Class_Name_Test.py, I have two tables, one with cell_class_name__UM1="{cell_class_UM1}", and one without.

I added 'cell_class_name__UM1': 'gray-background' to the table without cell_class_name__UM1 using properties="{table_kwargs}".

My expectation is that both tables should display the same result (both should have CSS applied), but the table with cell_class_name__UM1="{cell_class_UM1}" has CSS applied, while the other does not.

Cell_Class_Name_Test.py：

from taipy.gui import Gui, navigate
from datetime import datetime
import taipy.gui.builder as tgb
import pandas as pd
import os
import math

===== 初始狀態變數 =====

tables = []
filter_df = pd.DataFrame(columns=["欄位", "篩選條件"])
data_with_select = pd.DataFrame({
"TYPE": ["水砂紙", "鑽石砂紙", "水砂紙", "鑽石砂紙"],
"UM1": [10, 20, 30, 40]
})
data = pd.DataFrame()
constraints_df=pd.DataFrame()
#cell_class = cell_class_UM1
table_kwargs = {}

def on_table_action(state, var_name, payload):
try:
print(f"🔍 收到事件: {payload}")
action = payload.get("action")
reason = payload.get("reason")
index = payload.get("index")
column = payload.get("col")
value = payload.get("value")
row_data = state.data_with_select.iloc[index].to_dict()

    if column and value is not None:
        # 如果點選的欄位是 value2，則查詢對應的 value1
        if column in state.constraints_df["目標欄位"].values:
            # 查詢對應的 value1
            value1_row = state.constraints_df[state.constraints_df["目標欄位"] == column]
            if not value1_row.empty:
                value1 = value1_row.iloc[0]["來源欄位"]
                state.selected_column = value1
                print(f"🔄 已將 selected_column 設置為: {value1}")
   
    for _, row in state.constraints_df.iterrows():
        col = row["欄位"]
        logic = row["邏輯類型"]
        value = row["邏輯值"]


        if logic == "Editable" and len(value) > 5:
            if col in state.columns:
                update_Editable_Dynamic(state, col, value, row_data)
            else:
                print(f"⚠️ Editable 欄位 {col} 不在現有 columns，略過")
    row_series = pd.Series(row_data)
    cell_class_UM1(state,None, row_series, row_series, index)
   
except Exception as e:
    print(f"❌ 回調函式中出現錯誤: {e}")

def cell_class_UM1(state, value, row, col, row_index):
print("cell_class_UM1 called")
# col 是 Pandas row (Series)
print("state",state)
print("value",value)
print("row",row)
print("col",col)
print("row_index",row_index)
try:
type_value = col["TYPE"]
except:
type_value = ""
print("type_value:",type_value)
if type_value == "水砂紙":
#cell_class_args = {f"cell_class_name__UM1":"gray-background"}
new_table_kwargs = dict(state.table_kwargs)
#new_table_kwargs.update(cell_class_args)
new_table_kwargs[f"cell_class_name__UM1"] = "gray-background"
state.table_kwargs = new_table_kwargs
print("Updated table_kwargs:", dict(state.table_kwargs))
return "gray-background"
else:
#cell_class_args = {f"cell_class_name__UM1":"green-background"}
new_table_kwargs = dict(state.table_kwargs)
#new_table_kwargs.update(cell_class_args)
new_table_kwargs[f"cell_class_name__UM1"] = "green-background"
state.table_kwargs = new_table_kwargs
print("Updated table_kwargs:", dict(state.table_kwargs))
return "green-background"

with tgb.Page() as root_page:
tgb.table(data="{data_with_select}", show_all=True,properties="{table_kwargs}", on_action="on_table_action", on_edit="on_table_action",rebuild=True,editable=True, cell_class_name__UM1="{cell_class_UM1}")

tgb.table(data="{data_with_select}", show_all=True,properties="{table_kwargs}", on_action="on_table_action", on_edit="on_table_action",rebuild=True,editable=True)

pages = {
"/": root_page
}

Gui(pages=pages, css_file="style.css").run(
async_mode="threading",
data=pd.DataFrame(),
data_with_select=pd.DataFrame({
"TYPE": ["水砂紙", "鑽石砂紙", "水砂紙", "鑽石砂紙"],
"UM1": [10, 20, 30, 40]
}),
columns=[],
dialog_message="",
#cell_class=cell_class,
dark_mode=False,
table_kwargs=table_kwargs,
favicon=""
)

style.css：
.button-row{
display:flex !important;
gap:5px;
}
.primary-key {
pointer-events: none; /* 禁用點擊事件 /
background-color: #f0f0f0; / 灰色背景，表示不可編輯 /
color: #888; / 字體顏色變淡 /
cursor: not-allowed; / 滑鼠指標顯示為禁止符號 */
}
.dialog-fake{
position: fixed;
top: 30%;
left: 30%;
padding: 20px;
background-color: #fff;
color:black;
border: 2px solid red;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
z-index: 1000;
}
.taipy-dialog{
position: fixed;
height: auto;
}
.dialog-button{
position: absolute;
right: 10px;
}
td.error-cell{
background-color: #fa0202 !important;
}
.part-image{
background-color: #ffffff !important;
border-bottom: inset;
display: flex;
}
:root{
--root-margin:0rem !important;
--color-background-light:#ffffff;
--custom-scrollbar-thumb-color:#717171;
}
.taipy-table{
padding-right:20px;
}
.taipy-light{
background: linear-gradient(0deg, #FAEDD3, transparent);
}
.taipy-button{
color:black;
border:1px solid #cfcfcf;
background-color: #ffffff;
font-weight: 600;
min-height: auto;
min-width: auto;
}
.css-16fw218 {
background: linear-gradient(0deg, #fffbf4, transparent);
}
.MuiDrawer-paper{
background-color: #f7f3f3;
}
.MuiAvatar-circular{
background-color: #e9dcdc;
color:#000000;
}
tr:hover{
background-color: #f8e5c4 !important;
}
tr,td{
border:1px solid #e1dcdc;
}
th{
background-color: #ededed !important;
border: 1px solid #e1dcdc;
}
.MuiTablePagination-root{
border:1px solid #e1dcdc;
}
.css-q25ezd{
font-weight: bold;
}
.title-table{
position: absolute;
margin-left: 50px;
margin-top: -25px;
}
.MuiPopper-root{
width: auto !important;
}
.page_button{
display:flex !important;
gap:5px;
justify-content: center;
}
.taipy-watermark{
display: none;
}
.title-login{
position: absolute;
right: 70px;
top: 8px;
min-width: auto;
min-height: auto;
font-weight: 600;
}
.MuiLink-root{
position: absolute;
right: 20px;
min-width: auto;
min-height: auto;
font-weight: 600;
top: 8px;
}
.Email_button_Row{
display:flex !important;
gap:5px;
position: absolute;
right: 20px;
left:auto;
}

.Setting_Page_Button{
display:flex !important;
gap:5px;
position: absolute;
right: 20px;
left:auto;
}
.Schedule{
display:flex !important;
gap:5px;
}
.Schedule_Button{
display:flex !important;
gap:5px;
}
h4,h5{
position: relative;
left: 10px;
}
.MuiSelect-select{
min-width: auto;
min-height: auto !important;
}
.MuiInputBase-root{
min-width: auto;
min-height: auto !important;
}
.page_text{
margin-top: -5px;
}
.gray-background {
background-color: #757575; /* 灰色背景 /
color: #000; / 黑色文字 /
display: table-column;
}
.green-background {
background-color: #beecc9; / 綠色背景表示可編輯 /
color: #155724;
}
.gray-background-editable {
background-color: #757575; / 灰色背景 /
color: #000; / 黑色文字 /
display: table-column;
}
.green-background-editable {
background-color: #beecc9; / 綠色背景表示可編輯 */
color: #155724;
}

[asdf77449212-art]

[arcanaxion]

Hi @asdf77449212-art .

I think I see the issue. Here is a shorter, working example:

import pandas as pd
import taipy.gui.builder as tgb
from taipy.gui import Gui, State

df = pd.DataFrame(
    {
        "id": [1, 2, 3, 4, 5, 6, 7, 8],
        "status": ["primary", "secondary", "error", "warning", "success", "primary", "secondary", "error"],
    }
)


def cell_class_status(state: State, value, index, row, column_name):
    if value == "primary":
        return "bg-primary"
    elif value == "secondary":
        return "bg-secondary"
    elif value == "error":
        return "bg-error"
    elif value == "warning":
        return "bg-warning"
    elif value == "success":
        return "bg-success"


with tgb.Page() as page:
    tgb.table(data="{df}", cell_class_name__status="{cell_class_status}")

    table_properties = {"cell_class_name[status]": "{cell_class_status}"}  # Note the dictionary key here
    tgb.table(data="{df}", properties="{table_properties}")


Gui(page).run()

Solution

When using a Taipy indexed property as a properties dictionary key, you should use the Taipy Markdown format of "cell_class_name[column_name]" instead of cell_class_name__column_name. I.e.

# Wrong ❌
table_properties = {"cell_class_name__status": "{cell_class_status}"}

# Correct ✅
table_properties = {"cell_class_name[status]": "{cell_class_status}"}

Additional notes

By the way, passing indexed properties like this is also useful when you have column names that are not valid Python identifiers. For example, if you have a column in your dataframe called "Current Status":

# You can't do ❌
tgb.table(..., cell_class_name__Current Status="{cell_class_status}")
# because you can't have whitespace in a parameter name

# You should do ✅
table_properties = {"cell_class_name[Current Status]": "{cell_class_status}"}
tgb.table(..., properties="{table_properties}")

Let me know if this addresses your issue.

[asdf77449212-art]

Thanks for your help, this was very helpful for me.