Quantcast
Channel: 🎛️ Dash - Plotly Community Forum
Viewing all articles
Browse latest Browse all 6271

How styling headers in Multi-Headers DataTable?

$
0
0

My Table:

row_data={('user_profile_id', '', ''): {0: 984, 1: 985, 2: 986, 3: 987, 4: 988},
 ('email', '', ''): {0: 'egjkljgler@gmail.com',
  1: 'dasdadaddcd740@gmail.com',
  2: 'dasdadaddcd740@gmail.com',
  3: 'dasdadaddcd740@gmail.com',
  4: 'temp_da@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', 'BBB', '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', 'BBB', 'Rere'): {0: 42,
  1: 77,
  2: 45,
  3: 12,
  4: 41}}
df= pd.DataFrame.from_dict(row_data)
df=df[['user_profile_id','email','results','feedback']]
df_columns = [{"name": col, "id": "_".join(col)} for col in df.columns]
df_data = [ {"_".join(col): val for col, val in row.items() } for row in df.to_dict('records')]

app = dash.Dash(__name__)
table=dash_table.DataTable(
                                    id='table',
                                    columns=df_columns,
                                    data=df_data,
                                    fixed_rows={'headers': False},
                                    page_size=20,
                                    sort_action='none',
                                    style_header={'backgroundColor': 'gray','fontSize':10,'color': 'black','fontWeight': 'bold','textAlign': 'center','border': '1px solid black'},
                                    style_cell={'textAlign': 'center','fontSize':15, 'font-family':'sans-serif','border': '1px solid black'},
                                    style_table={'overflowY': 'auto'},
                                    style_data={'color': 'black','backgroundColor': 'white', 'whiteSpace': 'normal'},
                                    fill_width=True,
                                    merge_duplicate_headers=True
)
app.layout = html.Div([ table])
if __name__ == '__main__':
    app.run_server(debug=True)

Result as Multi Headers Table:

Now I try to use style_header_conditional like in these examples
https://dash.plotly.com/datatable/conditional-formatting
to create styling for headers:


That is to say, a different color should be made to all the headings belonging to the main headline.
The problem is how to get to the main column? This doesn’t work :

                                    style_header_conditional=[
                                                    {
                                                        'if': {'column_id':'results'},
                                                        'backgroundColor': 'grey'
                                                    }
                                              ]

How can this be solved?
Thanks

7 posts - 2 participants

Read full topic


Viewing all articles
Browse latest Browse all 6271

Latest Images

Trending Articles



Latest Images