Weird bug with row display for Dash DataTables (Firefox, Chrome)

Has anybody encountered this visual bug before? You can fix it temporarily by resizing the window but I’d like to avoid it altogether if possible.

Certain cells in certain rows have heights that do not align with the rest of the row. There does not appear to be a pattern as to when this happens. Cells populated with text and empty cells can both be sized weird like this.

(I put those rectangles on in MS Paint to cover some data. All are 1-line strings, from 3-9 characters long.)

Capture

Happens to me as well when I try to toggle the columns.

I am experiencing the same issue. However, the row display starts of normal then goes out of alignment for me when I either:

a. Toggle columns a few times
b. Click the next button a few times
c. Filter on multiple columns

I’m able to fix this by setting the row height to auto, but should point out this introduces a separate bug: the filter row beneath the column headers becomes tiny. I’ll post a separate comment for that issue, however.

1 Like

I think you’re onto something with c there - I use a dropdown to apply filters via callbacks and the only filters that consistently trigger this bug are those that use multiple columns for filtering.

Some more clarity on my filtering:
I have a big function which has Output(‘live-update-table’, ‘data’) and do the filtering inside of there (one of the inputs is the dropdown). Every time there is a callback (dropdown or interval) this function is called. The flow is: read a csv file, drop some columns, filter out some rows (using numpy and pandas), create a few new columns, and then filter based on dropdown contents. Finally, the output data is returned.

This looks like a bug. Could someone try to create a simple, reproducable example? Also share your dash_table.__version__? The latest is 4.4.0 (https://github.com/plotly/dash-table/blob/dev/CHANGELOG.md)

I’ve been able to fix this problem by setting the height of the .dash-cell-value explicitly.
So as a workaround I added [{"selector": ".dash-cell-value", "rule": "height: 28px;"}] to the table css argument.

Can you post your app.layout with this included?