Link dataframe's data to the html.table

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:
image

That’s it! The grid operation that I repeatedly told the plotly team should be added to the dash_table component. For now, your idea may consider using pattern-matching callbacks. See my example below.

Or change the idea to hand over all operations to the backend, and use pandas more to achieve your goals.