Dash Table - Conditional Headers Formatting for Multi-Headers Tables

Dash Python
1

Hi all, I created a dash table with multi-headers structure as described in the documentation (Styling | Dash for Python Documentation | Plotly), what I am trying to do now is to apply conditional formatting to the multi-headers in order to set different colors background for each of the headers and subheaders according to their columns_id and header_index properties. The desired output should look like the example below (excel screenshoot):

image
image1003×76 1.18 KB

Thus, I would kindly ask you whether this is feasible and if so, if you could provide an illustrative example of how that can be achieved.

Many thanks in advance.

2

Try the new style_header_conditional property (introduced in Dash 1.12.0). We don’t have any examples yet, but the syntax is similar to style_data_conditional which is documented here: https://dash.plotly.com/datatable/conditional-formatting

3

Hi, All,

This is my first post, so my apologies if there are some annoyances!

I have a similar ask, except I am looking to color the top level of the multi-header column since I will know the value of this level, but not necessarily the values of the other multi-header levels. For example, say I have a multi-header of {['fruits', 'apple'], ['fruits', 'banana'], ['drinks', 'milk'], ['drinks', 'water']} and want to color based on whether the top level is either 'fruits' or 'drinks', without having to explicitly know the other multi-header level values (since users will be loading data where the sub-headers are not known ahead of time).

Maybe is there a way to format based on either column_label (indexing the specific level) or allow regex and/or wildcard matching on column_id value?

I tried using . as a wildcard for column_id below, but this did not seem to work.

Thanks!

style_header_conditional=[
                    {
                        'if': {'column_id': 'fruits.'},
                        'backgroundColor': '#00Ff00'
                    }
                ],
4

Hi! Did you ever happen to figure out how style the datatable multi-headers separately? I need to center (and potentially embolden) the top level of the multi-header but not the sub-header. Any help would be appreciated!

5

Hi dash-beginner, late reply, but hopefully it will still help somebody. That would look something like this:

style_header_conditional=[
    {
        'if': {
            'header_index': 0
        },
        'fontWeight': 'bold',
        'textAlign': 'center',
        'fontSize': '20px'
    }
]

Good luck!

1 Like