[🐛 BUG] style[column_name] does not render any color

[sumanth-tccc]

What went wrong? 🤔

<|{food_df}|table|style[Category] = {lambda state, value, index, row, column_name: "blue-cell"}|> when trying cell render no highlights seen

Expected Behavior

Expected column to highlight

Steps to Reproduce Issue

food_df = pd.DataFrame({
"Meal": ["Lunch", "Dinner", "Lunch", "Lunch", "Breakfast", "Breakfast", "Lunch", "Dinner"],
"Category": ["Food", "Food", "Drink", "Food", "Food", "Drink", "Dessert", "Dessert"],
"Name": ["Burger", "Pizza", "Soda", "Salad", "Pasta", "Water", "Ice Cream", "Cake"],
"Calories": [300, 400, 150, 200, 500, 0, 400, 500],
})

def food_df_on_edit(state, var_name, payload):
index = payload["index"] # row index
col = payload["col"] # column name
value = payload["value"] # new value cast to the column type
user_value = payload["user_value"] # new value as entered by the user

old_value = state.food_df.loc[index, col]
new_food_df = state.food_df.copy()
new_food_df.loc[index, col] = value
state.food_df = new_food_df
notify(state, "I", f"Edited value from '{old_value}' to '{value}'. (index '{index}', column '{col}')")

def food_df_on_delete(state, var_name, payload):
index = payload["index"] # row index

state.food_df = state.food_df.drop(index=index)
notify(state, "E", f"Deleted row at index '{index}'")

def food_df_on_add(state, var_name, payload):
empty_row = pd.DataFrame([[None for _ in state.food_df.columns]], columns=state.food_df.columns)
state.food_df = pd.concat([empty_row, state.food_df], axis=0, ignore_index=True)

notify(state, "S", f"Added a new row.")

def table_style(state, index, row):
return "blue-cell" if row.Category == "Dessert" else ""

def highlight_column_cells(state, value, index, row, column_name):
print(f"Column: {column_name}, Value: {value}, Row: {row}")

if row.Category == 'Dessert':
    return "blue-cell"
return ""

def simple_highlight(state, value, index, row, column_name):
return "blue-cell" # Apply to all cells as a test

table_properties = {
"class_name": "rows-bordered",
"filter": True,
"on_edit": food_df_on_edit,
"on_delete": food_df_on_delete,
"on_add": food_df_on_add,
"group_by[Category]": True,
"apply[Calories]": "sum",
"style[Calories]" : highlight_column_cells
}

Solution Proposed

No response

Screenshots

Runtime Environment

No response

Browsers

No response

OS

No response

Version of Taipy

No response

Additional Context

No response

Acceptance Criteria

• Ensure new code is unit tested, and check code coverage is at least 90%.
• Create related issue in taipy-doc for documentation and Release Notes.

Code of Conduct

• I have checked the existing issues.
• I am willing to work on this issue (optional)

[FredLL-Avaiga]

<|{food_df}|table|style[Category] = {lambda state, value, index, row, column_name: "blue-cell"}|> works for me

blue-cell class name is applied to every cell for the Category column

The blue-cell class has to be defined though.
Which can be done through the style parameter of Markdown.

page = Markdown("""
<|{food_df}|table|properties={table_properties}|style[Category] = {lambda state, value, index, row, column_name: "blue-cell"}|>
""", style={".blue-cell": {"background-color": "blue"}})

import pandas as pd

from taipy.gui import Gui, Markdown, notify

food_df = pd.DataFrame(
    {
        "Meal": ["Lunch", "Dinner", "Lunch", "Lunch", "Breakfast", "Breakfast", "Lunch", "Dinner"],
        "Category": ["Food", "Food", "Drink", "Food", "Food", "Drink", "Dessert", "Dessert"],
        "Name": ["Burger", "Pizza", "Soda", "Salad", "Pasta", "Water", "Ice Cream", "Cake"],
        "Calories": [300, 400, 150, 200, 500, 0, 400, 500],
    }
)


def food_df_on_edit(state, var_name, payload):
    index = payload["index"]  # row index
    col = payload["col"]  # column name
    value = payload["value"]  # new value cast to the column type
    user_value = payload["user_value"]  # new value as entered by the user

    old_value = state.food_df.loc[index, col]
    new_food_df = state.food_df.copy()
    new_food_df.loc[index, col] = value
    state.food_df = new_food_df
    notify(state, "I", f"Edited value from '{old_value}' to '{value}'. (index '{index}', column '{col}')")


def food_df_on_delete(state, var_name, payload):
    index = payload["index"]  # row index

    state.food_df = state.food_df.drop(index=index)
    notify(state, "E", f"Deleted row at index '{index}'")


def food_df_on_add(state, var_name, payload):
    empty_row = pd.DataFrame([[None for _ in state.food_df.columns]], columns=state.food_df.columns)
    state.food_df = pd.concat([empty_row, state.food_df], axis=0, ignore_index=True)

    notify(state, "S", "Added a new row.")


def table_style(state, index, row):
    return "blue-cell" if row.Category == "Dessert" else ""


def highlight_column_cells(state, value, index, row, column_name):
    print(f"Column: {column_name}, Value: {value}, Row: {row}")

    if row.Category == "Dessert":
        return "blue-cell"
    return ""


def simple_highlight(state, value, index, row, column_name):
    return "blue-cell"  # Apply to all cells as a test


table_properties = {
    "class_name": "rows-bordered",
    "filter": True,
    "on_edit": food_df_on_edit,
    "on_delete": food_df_on_delete,
    "on_add": food_df_on_add,
    "group_by[Category]": True,
    "apply[Calories]": "sum",
    "style[Calories]": highlight_column_cells,
}

page = Markdown("""
<|{food_df}|table|properties={table_properties}|style[Category] = {lambda state, value, index, row, column_name: "blue-cell"}|>
""", style={".blue-cell": {"background-color": "blue"}})

Gui(page).run(title="1792 table indexed style")

[FredLL-Avaiga]

If you find the answer complete, I'll let you close this issue.

[sumanth-tccc]

Hi Team,
Thanks for the support , I tried the same as above in a new .py file, tested different browser and private browsing. Still unable to get the render on columns., Please find the screenshot below

[FlorianJacta]

This also doesn't work for me on 3.1.1 and 4.0.0.dev2.

[FredLL-Avaiga]

sorry then, it must only be in develop

[FredLL-Avaiga]

can you check if the blue-cell class is applied or not (ie present in the class attribute of the relevant TD) ?

[FlorianJacta]

I also put the blue-cell class in my css without any result

[sumanth-tccc]

Did add the blue-cell class. Not rendering color on columns. Full rows are working fine.

[FredLL-Avaiga]

Then you'll have to wait for the next release or request a developper release