Hi,
I m using the html.table to create a customize table in my dashboard.
I had assigned the id in the html.table, html.Th and html.Td.
Require to link the dataframe into the html.table.
Example:
if the column name / id = ‘Clutlery’
then need to display the ‘MTD’ from dataframe when the ‘Minor’ equal to the id or when the ‘Minor’ is ‘Clutlery’.
Sample dataframe:
Date | Minor | Major | MTD |
---|---|---|---|
01/01/2022 | Clutlery | Kitchen | 1000 |
01/01/2022 | Tops | Clothes | 100 |
01/01/2022 | Shoes | Clothes | 200 |
01/01/2022 | Turf | Garden | 1 |
01/01/2022 | Hoses | Garden | 2 |
01/01/2022 | Rakes | Garden | 3 |
01/01/2022 | Cooking | Kitchen | 4 |
02/01/2022 | Clutlery | Kitchen | 2000 |
02/01/2022 | Tops | Clothes | 200 |
02/01/2022 | Shoes | Clothes | 400 |
02/01/2022 | Turf | Garden | 2 |
02/01/2022 | Hoses | Garden | 4 |
02/01/2022 | Rakes | Garden | 6 |
02/01/2022 | Cooking | Kitchen | 8 |
01/02/2022 | Clutlery | Kitchen | 200 |
01/02/2022 | Tops | Clothes | 300 |
01/02/2022 | Shoes | Clothes | 400 |
01/02/2022 | Turf | Garden | 5 |
01/02/2022 | Hoses | Garden | 6 |
01/02/2022 | Rakes | Garden | 7 |
01/02/2022 | Cooking | Kitchen | 8 |
02/02/2022 | Clutlery | Kitchen | 4000 |
02/02/2022 | Tops | Clothes | 400 |
02/02/2022 | Shoes | Clothes | 600 |
02/02/2022 | Turf | Garden | 800 |
02/02/2022 | Hoses | Garden | 10 |
02/02/2022 | Rakes | Garden | 12 |
02/02/2022 | Cooking | Kitchen | 14 |
I had try:
app.layout = dbc.Container([
dbc.Row([
dbc.Col(
html.Table(id= 'htmltable')
)
])
])
#you may ignore the date_dd , it is a date dropdown
@app.callback(
Output('htmltable', 'children'),
Input('date_dd', 'value')
)
def update_table(selection):
if len (selection) == 0:
return dash.no_update
else:
dff = df[df['Settlement_Date'] == selection]
columns = dff[[Date','Minor','Major','MTD'']]
data=columns.to_dict('records')
table1= html.Table([
html.Thead([
html.Tr([
html.Th('Garden', id= 'Major', rowSpan = 2),
html.Th('TPV',id= 'MTD),
html.Th('vs previous month', id= 'compare')
], style = header_row_cell_style),
]),
html.Tbody([
html.Tr([
html.Td('Shoes', id= 'Minor',style = header_column_cell_style),
html.Td('S2',id= 'MTD'),
html.Td('S3',id= 'LMTD'),
], style = body_column_cell_style),
html.Br(),
html.Tr([
html.Td('Turf', style = header_column_cell_style),
html.Td('T2',id= 'MTD'),
html.Td('T3',id= 'LMTD'),
], style = body_column_cell_style),
html.Tr([
html.Td('Hoses', style = header_column_cell_style),
html.Td('H2',id= 'MTD'),
html.Td('H3',id= 'LMTD'),
], style = body_column_cell_style),
html.Tr([
html.Td('Rakes', style = header_column_cell_style),
html.Td('R2',id= 'MTD'),
html.Td('R3',id= 'LMTD'),
], style = body_column_cell_style),
html.Br(),
], style = body_section_style),
] , style = table_style)
return table1
Expected can get some data like this: