Is it possible to style multiple headers separately?

Dash Python
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