Dash Datatable: Highlight row on hover when using fixed panes

Dash Python
1

I am using fixed_columns={‘headers’: True, ‘data’: 2} to fix the first two columns in the datatable. I would like to highlight the entire row on hover. However, due to the “freeze panes” the table is separated into two blocks: Either the first two columns or the remaining columns of that row are highlighted.

The following CSS is working for a table without “freeze_panes”.
.dt-table-container__row-1 .cell-table tbody tr:hover td {
background-color: rgb(218, 230, 247);
transition: transform 0.1s linear;
-webkit-transition: transform 0.1s linear;
}

I tried to use jQuery but the row highlighting seem to disappear when the table refreshes.

Has anyone found a solution to this?

2

I have done some further investigation on this and reported an issue on github (Highlighting current cell (or row) with fixed_columns · Issue #871 · plotly/dash-table · GitHub).

In case someone has figured out a workaround, please let me know.

4

Many years later! The issue is there are two full duplicate tables: one inside a div.dash-fixed-column and another inside a div.dash-fixed-content. Each table shows its visible pane cells but hides the others with a “phantom-cell” class.

I got around this by injecting javascript to assign mouseenter and mouseleave listeners to each cell that add/remove a className to the desired matching row & column elements based on the cell’s cellIndex value and data-dash-row attribute. The javascript route is also useful because you can highlight the column as well.