Datatable style issue - fixed_columns

Dash Python
1

Hi there! I’ve been experiencing some issues with DataTable formatting when using fixed columns.

Specifically, I have noticed an issue with the Plotly table component where the column width overlaps other non-fixed column after a callback update (new data).

dash_table.DataTable(
.
.
.
    fixed_columns={'headers': True, 'data': 1},
    style_table={'minWidth': '100%', 'overflowX': 'scroll', 'height': '150px',
                 'overflowY': 'scroll'},
    style_cell={'width': '50px'},
    style_cell_conditional={'if': {'column_id': Date},
                                 'width': '100px',
                                 'minWidth': '100px',
                                 'maxWidth': '100px',
                                 },
    },

Basically it goes from this (expected behavior)…
image

…to this after a callback:
image

This issue only occurs when fixed_columns is used. If I remove fixed_column property, the bug also disappears!

Additionally, I have tried many different solutions to fix this issue, such as setting the column width with relative or absolute numbers, both in the callback and initially, but none of them resolved the problem.

Cheers

2

Hi @aboh and welcome to the Dash community :slight_smile:

There are quite a few open issues with fixed rows and fixed columns in the DataTable

I recommend you give dash-ag-grid a try. Not only can you set the which rows/columns are fixed, the user can also do that by dragging the column.

ag_grid_pinning

Find more info here:

2 Likes
3

Hi @AnnMarieW, thanks for your warm welcome and suggestion. I’ll take a look.