Black Lives Matter. Please consider donating to Black Girls Code today.

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

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")

1 Like

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

Same issue fixed:-

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