Conditional formatting of datatable based on column names

Dash Python
1

The column names of my editable datatable are dates in this string format:

"%b%y"

I want all the cells of the historical columns to be shaded in light grey. The documentation here presents plenty of applications and examples, but none of them deals with the column names. Can it be done? I suspect it’s doable but I need help. My incomplete attempt:

dash.dash_table.DataTable(
    id="table",
    editable=True,
    row_selectable="multi",
    css=[{"selector": "table", "rule": "margin-bottom: 50px;"}],
    style_data={"width": "20px", "maxWidth": "20px", "minWidth": "20px"},
    style_cell_conditional=[
        {
            "if": {"column_id": "state"},
            "width": "150px",
            "textAlign": "left",
        }
    ],
    style_data_conditional=[
        {
            "if":{
                "I do not know what goes in here"
            },
            "backgroundColor": "lightgrey",
        }
    ]
),

For reference, the data looks like this:

pd.DataFrame(columns=['state', 'Sep24', 'Oct24', 'Nov24', 'Dec24', 'Jan24', 'Feb24', 'Mar24',] , data=[['TX',1,2,3,4,5,6,7],['AK',7,6,5,4,3,2,1],['LA',2,4,6,8,10,12,14]])

Please is anyone able to help me out with that if statement?

2

Hi, I have now realised that there are plenty of examples that deal with the column names. I have also prepared a sample code which highlights the current month in a light red filling. I actually want to highlight all the months prior to and including the current month. How would you edit my code to achieve that?

from datetime import date, datetime

import dash
import pandas as pd

df = pd.DataFrame(
    columns=[
        "state",
        "Sep24",
        "Oct24",
        "Nov24",
        "Dec24",
        "Jan24",
        "Feb24",
        "Mar24",
    ],
    data=[
        ["TX", 1, 2, 3, 4, 5, 6, 7],
        ["AK", 7, 6, 5, 4, 3, 2, 1],
        ["LA", 2, 4, 6, 8, 10, 12, 14],
    ],
)


MTH_CURR = datetime.now().strftime("%b%y")

app = dash.Dash(__name__)

app.layout = dash.dash_table.DataTable(
    id="table",
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict("records"),
    editable=True,
    style_data_conditional=[
        {
            "if": {"column_id": MTH_CURR},
            "backgroundColor": "#ffeded",
        }
    ],
)

if __name__ == "__main__":
    app.run_server(debug=True)
3

:wave: Hi, look… I’m not expert in DataTable, but if you look for some video of @adamschroeder about AG Grid Dash AG Grid, I guess you could figure it out immediately! In fact, there is a section related to Layout and Style.
Here there is another link, that may be help you…

4

Hi @JuanG Thank you for the link. I solved my own question by applying what I learned in that post.

from datetime import date, datetime

import dash
import pandas as pd

df = pd.DataFrame(
    columns=[
        "state",
        "Sep24",
        "Oct24",
        "Nov24",
        "Dec24",
        "Jan24",
        "Feb24",
        "Mar24",
    ],
    data=[
        ["TX", 1, 2, 3, 4, 5, 6, 7],
        ["AK", 7, 6, 5, 4, 3, 2, 1],
        ["LA", 2, 4, 6, 8, 10, 12, 14],
    ],
)


MTH_CURR = datetime.now().strftime("%b%y")
lst = df.columns.to_list()[1:]
idx = lst.index(MTH_CURR) + 1
lst = lst[:idx]

app = dash.Dash(__name__)

app.layout = dash.dash_table.DataTable(
    id="table",
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict("records"),
    editable=True,
    style_data_conditional=[
        {
            "if": {"column_id": str(x)},
            "backgroundColor": "#ffeded",
        } for x in lst
    ],
)

if __name__ == "__main__":
    app.run_server(debug=True)
1 Like
5

Wonderful!! :fireworks: