style_header_conditional example

[chriddyp]

https://community.plotly.com/t/dash-table-conditional-headers-formatting-for-multi-headers-tables/38974/2

[Marc-Andre-Rivet]

https://dash.plotly.com/datatable/conditional-formatting

[iuliancioarca]

Does style_header_conditional accept filter_query? I tried formatting the header cell color and got this error:

Failed component prop type: Invalid component prop style_header_conditional[0].if key filter_query supplied to DataTable. Bad object: { "column_id": "Pressure", "filter_query": "{Pressure} > 19 && {Pressure} < 41" } Valid keys: [ "column_id", "column_type", "header_index", "column_editable" ]

MWE (Julia version adapted from https://dash.plotly.com/julia/datatable/conditional-formatting):

using Dash

using OrderedCollections, DataFrames

data = OrderedDict( "Date" => ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"], "Region" => ["Montreal", "Toronto", "New York City", "Miami", "San Francisco", "London"], "Temperature" => [1, -20, 3.512, 4, 10423, -441.2], "Humidity" => [10, 20, 30, 40, 50, 60], "Pressure" => [2, 10924, 3912, -10, 3591.2, 15], )

df = DataFrame(data)

app = dash()

app.layout = dash_datatable( data = map(eachrow(df)) do r Dict(names(r) .=> values(r)) end, editable=true, sort_action="native", columns=[Dict("name" =>c, "id" => c) for c in names(df)], style_data_conditional=[ Dict( "if" => Dict( "filter_query" => "{Humidity} > 19 && {Humidity} < 41", "column_id" => "Humidity" ), "color" => "tomato", "fontWeight" => "bold" ), Dict( "if" => Dict( "filter_query" => "{Pressure} > 19", "column_id" => "Pressure" ), "textDecoration" => "underline" ) ], style_header_conditional = [Dict( "if" => Dict( "filter_query" => "{Pressure} > 19 && {Pressure} < 41", "column_id" => "Pressure" ), "backgroundColor" => "FireBrick", "color" => "white", )]

)

run_server(app, "0.0.0.0", 5002, debug=true)

[alexcjohnson]

@iuliancioarca if you're asking whether header cells can be styled based on the values in the column data below them, the answer is no. It's an interesting concept, but we'd also need to support aggregation or something so that the column could be reduced to a single value, and we'd need to decide if it applies only to the visible page or to all pages, what about filtered-out data, etc etc...

[iuliancioarca]

Thank you for your fast reply! Indeed my plan was to use the header cell color as an overall indication that at least one value in the corresponding column exceeds a certain limit, to help the user not browse through all table pages(lots of data, I use pagination). Of course there's always the option of sorting or filtering the table, I just thought it would look cool to see at a first glance a red header and inform me there's an issue in the data. For the moment I solved this by applying the logic in the backend itself and based on a flag color the header or not.