How to style a merged Header in a dash datatable?

Dash Python
1

Hi All,

Im quite new in this Dash and Im loving it…I was going through the dash datatable features and I would like to know how can we format the merged headers??
Below pic is Im trying to accomplish
dash table
And I tried but the merged headers is not getting formatted Below is a modified code which I tried from the examples shown in Dash documentation

import dash
import dash_table
import pandas as pd



app = dash.Dash(__name__)

app.layout =dash_table.DataTable(
    columns=[
        {"name": ["", "Year"], "id": "year"},
        {"name": ["City", "Montreal"], "id": "montreal"},
        {"name": ["City", "Toronto"], "id": "toronto"},
        {"name": ["City", "Ottawa"], "id": "ottawa"},
        {"name": ["City", "Vancouver"], "id": "ottawa"},
        {"name": ["Climate", "Temperature"], "id": "temp"},
        {"name": ["Climate", "Humidity"], "id": "humidity"},
    ],
    data=[
        {
            "year": i,
            "montreal": i * 10,
            "toronto": i * 100,
            "ottawa": i * -1,
            "vancouver": i * -10,
            "temp": i * -100,
            "humidity": i * 5,
        }
        for i in range(10)
    ],
    merge_duplicate_headers=True,
    style_header={
        'backgroundColor': 'rgb(230, 230, 230)',
        'fontWeight': 'bold',
        'textAlign': 'justify'
    },
    style_header_conditional=(
    [
        {
        'if': {"column_id": c},
        "backgroundColor": "rgb(255, 191, 0)",
        "color": "#000000",
        'textAlign': 'justify'
    } for c in ["montreal","toronto","ottawa","ottawa"]
        ]
    +[
      {
       "if": {"column_id": d}, "backgroundColor": "#51f542",
       "color": "#000000",
       'textAlign': 'justify'
       } for d in ["temp","humidity"]
      ]
        ),
    )


if __name__ == '__main__':
    app.run_server()
2

Hi Guys,
Is there any solution for this
-Allan

3

Hey, Allan

I recently came across this question in a project I’m working on, and according to this issue on github, styling merged cells is a challenge still unsolved