Although I am new to Dash, I am well-versed in Python, HTML, and CSS.
I have a simple structure that displays a DataTable. Here is the code snippet:
def render_datatable(df=None, id=None):
dt1= dash_table.DataTable(
id=id,
columns=[{"name": i, "id": i} for i in df.columns],
data=df.to_dict('records'),
style_data={'height':'auto'},
fill_width=False,
)
return dt1
This DataTable is shown within an html.Div element as:
html.Div(className='col-sm',
children=my_rendered_datatable
)
In my Project/assets/css/custom.css file, I have a basic override:
*{
font-family: Poppins;
}
*:hover {background-color: yellow;}
My website and the datatable display correctly: https://i.sstatic.net/dSVA7.png
However, there's an issue when trying to hover over a row (tr) in the DataTable. The hover effect only works on the surrounding <div> element instead of the actual row. I'm looking for a solution to enable hover on DataTable rows in Dash.