Black Lives Matter. Please consider donating to Black Girls Code today.

Conditionally Styling Background Colors for Columns and Column Headers in DataTable

Hello everyone,

I’m trying to make a data table where every column has a different background color depending on its index position. I can color the column itself just fine using the backgroundColor property, but I can’t seem to find a way to color the header in the same line.

Here’s a toy example:

table_data = [{'Goal': '200', 'P1': '1', 'P2': '2', 'P3': '3'},
{'Goal': '100', 'P1': '4', 'P2': '5', 'P3': '6'},
{'Goal': '300', 'P1': '7', 'P2': '8', 'P3': '9'}]

column_colors = ['#eae5ff', '#ffe4dc', '#e1f7ed', '#f4e5ff', 'ffefe3', '#e5f8fd', '#ffe7ec', '#e8f8d5', '#ffeeff', '#fff6e3']
x_list = ['P1', 'P2', 'P3']

app = dash.Dash(__name__)

app.layout = html.Div([html.H1("Sample Heading"),
DataTable(id='sample-table', data=table_data,
columns=[{"name": i, "id": i} for i in x_list],
style_data_conditional=[
{"if": {"column_id": i},
"backgroundColor": column_colors[x_list.index(i)-1]}
for i in x_list[1:]]))

When I run this I get the following:

It seems like a simple point, but how do I set the background color of the column header at the same time in this scenario?

Hey @rosenthall - It’s not possible right now, but it will be in the next release (next week or two) via a new style_header_conditional property.