Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

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

🎛️ Dash Dash Python
#1

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
Dash table styling the filter cells
How to change the style of the "Filter Rows" table button?
#2

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.

#3

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.

#4

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.

#5

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)

#6

I found this to be the case as well. What I found to be a simpler and more specific rule for the overwrite was to add this to my CSS:

#idAssignedToDataTable .dash-filter .input {color: white}

where in my dash code at the creation of the DataTable it looks like this:

dash_table.DataTable(id='idAssignedToDataTable')

With CSS specificity, assigning the style to the assigned ID it is specific enough to overwrite the default for any of the attributes outlined by SimonP above. This also allows you to change just the filter row if you want, and not tweak that color for the whole table if you want different font colors for the filter row and the rest of the table.

1 Like