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?