Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Pandas Multi Index and Dash DataTable : How to separate the same index?

Data :

import dash_table
import pandas as pd
import dash

row_data={('id', '', ''): {0: 984, 1: 985, 2: 986, 3: 987, 4: 988},
 ('email', '', ''): {0: 'aa@gmail.com',1: 'bb@gmail.com',2: 'bb@gmail.com',3: 'cc@gmail.com',4: 'ff@dada.com'},
 ('feedback', 'AAA', 'Zaza'): {0: 'Perfect', 1: 'Loose',2: 'nan',3: 'nan',4: 'nan'},
 ('feedback', 'AAA', 'Kuku'): {0: 'Perfect',1: 'Tight',2: 'nan',3: 'nan',4: 'nan'},
 ('feedback', 'AAA', 'Duku'): {0: 'Tight',1: 'Perfect',2: 'nan',3: 'nan',4: 'nan'},
 ('feedback', 'AAA', 'Sasa'): {0: 'Tight',1: 'Perfect',2: 'nan',3: 'nan',4: 'nan'},
 ('feedback', 'AAA', 'Rere'): {0: 'Perfect',1: 'nan',2: 'nan',3: 'nan',4: 'nan'},
 ('results', 'AAA', 'Zaza'): {0: 14, 1: 12,2: 74,3: 87,4: 65},
 ('results', 'AAA', 'Kuku'): {0: 20, 1: 'nan', 2: 45, 3: 52, 4: 71},
 ('results', 'AAA', 'Duku'): {0: 25,1: 78,2: 25,3: 46,4: 89},
 ('results', 'AAA', 'Sasa'): {0: 45,1: 91,2: 45,3: 87, 4: 85},
 ('results', 'AAA', 'Rere'): {0: 42,  1: 77,  2: 45,  3: 12, 4: 41}}
df = pd.DataFrame.from_dict(row_data)
columns = [{"name": col, "id": "_".join(col)} for col in df.columns]
data = [ {"_".join(col): val for col, val in row.items() } for row in df.to_dict('records')]

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    columns=columns,
    data=data,
    merge_duplicate_headers=True,
    style_cell={'textAlign': 'center'},
            css=[
            {'selector': 'th[data-dash-column^="id"]', 'rule': 'background-color: gray'},
            {'selector': 'th[data-dash-column^="email"]', 'rule': 'background-color: gray'},

            {'selector': 'th[data-dash-column^="results"]', 'rule': 'background-color: #3d69e1'},
            {'selector': 'th[data-dash-column^="feedback"]', 'rule': 'background-color: #849feb'},
            {'selector': 'th[data-dash-column^=""]', 'rule': 'background-color: #c0d1ff'}

        ]
)

if __name__ == '__main__':
    app.run_server(debug=False)

Pandas Output :
enter image description here

Dash DataTable Output:
enter image description here

As you can see in the Dash DataTable, a second-level header will merge together. I can not remove this level because in the future more categories will be added at this level.
I think the one way is to add something to the Pandas this level index, but I can’t figure out how to do it.

Target Output in Dash:
enter image description here

This means that a second-level title will be under each first-level title.
@jlfsjunior

That’s a tricky one! I have no idea what to try to fix this… :frowning_face: