How to override DashTable --hover value

Dash Python
1

Hi,

I would like to override the default “–hover” colour value in DashTable.

I tried using the following to no avail:

style_table={“–hover”:“#223344”}

and

style_table={“hover”:{“backgroundColor”:“#223344”}}

and

css={
“selector”: “.dash-spreadsheet-container”, “rule”:‘–hover:“#223344”’
}

What would be the correct way of doing this?

2

Hi @mswer

If you would like to change the entire row on hover, you can try adding this to the .css file in the assets folder

.dash-spreadsheet tr:hover td.dash-cell {
            border-color: lightgrey !important;
            border-width: 0.5px !important;
            background-color: red !important;
            color: white !important;
         }

If you would just like to change the color when you hover over the active cell, try:


.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
  --hover: red !important;
}
1 Like
3

Thank you @AnnMarieW. The first option was what I needed. Just needed to add a second block to also adjust the header hover color:

.dash-spreadsheet tr:hover th.dash-header {
border-color: lightgrey !important;
border-width: 0.5px !important;
background-color: black !important;
color: white !important;
}

1 Like