Dash datatable: Fixed first column and fixed first row(header)

Dash Python
1

I Try to get a dash datatable in which the first column and the first row are fixed. But somehwo it seems broken. Fixed header is not problem. But as soon as i get a fixed column or both of it fixed column with fixed row. The first column of the datatable somehow appears above all other columns and under it the rest of the datatable is plotted:

html.Div([
            dt.DataTable(
                data=self.dataFrame.to_dict("rows"),
                columns = [{"name": key,
                          "id": key,
                          "type":value,"format":Format(precision=2)} for key,value in self.tableColumns.items()
                           if key in self.dataFrame.columns],
                fixed_rows={'headers': True, 'data': 0},
                fixed_columns={'headers': True,'data': 1},#'headers': True,
                filter_action='custom',
                filter_query='',
                id=pre + 'dataTable',
                sort_action='custom',
                sort_mode='multi',
                #sort_by=['startTime'],
                style_table={
                    'overflowX': 'scroll',
                    #'overflowY': 'scroll',
                    'maxHeight': '800px',
                },
                style_data_conditional=[{
                    "if": {'filter_query': '{status} eq SUCCESS'},
                    "backgroundColor": "#3D9970",
                    'color': 'white'
                },{
                    "if": {'filter_query': '{status} eq FAILURE'},
                          "backgroundColor": "#ff0000",
                            'color': 'white'}
                ],
                style_as_list_view=True,
                style_header={'backgroundColor': 'rgb(100, 100, 100)',
                              'color': 'white'},
                style_cell={
                    'backgroundColor': 'rgb(250, 250, 250)',
                    'color': 'black',
                    'font_size': '12px',
                    'minWidth': '180px',
                    'maxWidth': '180px',
                    'width':'180px',
                    'whiteSpace': 'no-wrap',
                    'overflow': 'hidden',
                    'textOverflow': 'ellipsis'

                }
            )], className="container")

grafik
grafik.png516×809 7.78 KB

1 Like
2

I don’t know if you ever found the answer to this but the answer in this related post solved the issue for me.

You may also want to add the following css to avoid limiting the table width to 500px:

.dash-spreadsheet.dash-freeze-left {
    max-width: none !important;
}
1 Like
3

Same issue fixed:-

1 Like
4

Thanks a lot, great hint - saved me hours!!