Black Lives Matter. Please consider donating to Black Girls Code today.

Dash DataTable -- style_filter doesn't seem to work?

Hi All,

I can’t seem to get the style_filter option to change the filter cell (ex: swapping font-family from monospace to something else). Style_cell also doesn’t seem to update it, though style_cell works for all other cells in my table, and style_header also seems to work.

Can’t find any examples where style_filter was used successfully either, and there aren’t any tests that touch it in the dash source. Anyone able to use this property successfully?

Thanks!

1 Like

Hit the same problem - did you manage to figure it out?

L.E.: it looks like only background color works, for example:

{‘backgroundColor’: ‘white’,
‘color’: ‘red’,
‘fontWeight’: ‘bold’}

Everything else gets ignored except the background color part.

Having this issue as well. Not great since the filter row text color is a dark grey, so it is hard to read when using a dark theme.

I got the same issue. “style_filter” is working only for background color change for me.
I also tried “style_filter_conditional” and it looks as not existing at all, but it is mentioned here in priority list:
https://dash.plot.ly/datatable/style

It would be also great to have possibility to change standard message “filter data …” to custom message.

Dash/Plotly guys - your datatable is super cool and adding filtering to it makes it even cooler. Please, add possibility to style fully filter row.

The issue is caused by the style_filter being applied to the dash-filter class, however the actual input box has a much more specific set of css rules overriding the following settings:

padding
margin
height
line-height
border
font-family
text-align
box-sizing
color
text-shadow

They also override background-color, but as they set it to transparent, this doesn’t affect the setting applied through style_filter.

A work around that is working for me is to create a more specific rule to override the css for the input box:

.myapp .dash-spreadsheet-container .dash-spreadsheet-inner input:not([type=radio]):not([type=checkbox]) {
    text-align: center;
}

This, of course, goes inside the css sheet for your app (and change .myapp to the actual classname for your app)