Is it possible to style multiple headers separately?

Dash Python
1

Hi,

Just trying to figure out how to give each of my headers different styles. Defining Table Style Header updates all of my headers with 1 particular style. Any suggestions for multiple headers / styles?

2

@sclavijo Yes!

Here’s an example for styling headers based on the various criteria available:

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash_table import DataTable

from dash.dependencies import Input, Output, State

import pandas as pd

from datetime import date, datetime, timedelta
import time

url = 'https://github.com/plotly/datasets/raw/master/26k-consumer-complaints.csv'

rawDf = pd.read_csv(url)
df = rawDf.to_dict("rows"),

app = dash.Dash()
app.scripts.config.serve_locally = True

app.layout = DataTable(
    id='datatable',
    columns=[{"name": [i, i, i], "id": i, "type": "numeric" if len(i) % 2 == 0 else "text", 'format': {'locale': {'group': '.', 'decimal': ','}}} for i in rawDf.columns],
    data=[],
    style_header={
        'color': 'white',
        'backgroundColor': 'black'
    },
    style_header_conditional=[
        { 'if': { 'column_type': 'numeric' }, 'backgroundColor': 'magenta' },
        { 'if': { 'header_index': 2 }, 'backgroundColor': 'orange' },
        { 'if': { 'column_id': 'Complaint ID', 'header_index': 0 }, 'backgroundColor': 'red' },
        { 'if': { 'column_id': 'Complaint ID', 'header_index': 1 }, 'backgroundColor': 'pink' },
        { 'if': { 'column_id': 'Complaint ID', 'header_index': 2 }, 'backgroundColor': 'yellow' },
    ]
)

if __name__ == "__main__":
    app.run_server(port=8053)

Gives the following headers when executed:

image
image.png1297×100 24.8 KB

Do note that when styling headers, the following props are applied in order:
style_cell -> style_cell_conditional -> style_header -> style_header_conditional

The same concept applies for style_data** and style_filter** props.

There’s no header specific example in the docs, but it can be helpful too. We’ll add some examples for headers and filters styling with this issue.

In the conditional props, the styles defined further down the list will have priority over the previous ones.

Hope this helps!

1 Like
3

Amazing! Is there link for the potential attributes available for the header/cell conditional?

I don’t think I ever would have found ‘header_index’.

Thanks again!

4

You can look up style_** props in the table’s reference here https://dash.plot.ly/datatable/reference. It’s a bit hard to read through the nested props documentation, something that needs improvement. Sorry about that.

1 Like
5

And have you managed to figure out how to do text alignment depending on header_index? Basically I would like the top row to be centered.

6

Dear Plotly,

It looks like there is a bug in this function: conditional styling in header when `merge_duplicate_headers=True` doesn't work · Issue #678 · plotly/dash-table · GitHub

Could you please let us know if there is any plan to fix it?