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

📣 DataTable Conditional Formatting Documentation

:wave: Hey everybody –

I’m pleased to share a new documentation chapter on Conditional Formatting with the DataTable:

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

This is the latest installment of our documentation push! Previously, we shared in announcements

Conditional formatting in the DataTable allows you to style particular cells based off of data. There were many questions about this in the forum, we hope that this documentation chapter helps address any questions going forward :fist:

Here are some screenshots of a few of my favorite examples:

All of the options!
Filtering by column, range of values, data column type, comparing columns to each other, and more!

Displaying stars and icons in the DataTable

Highlighting top 10% of values:

Highlighting above and below average:

Highlighting empty values:

DataTable meets Heatmap

Data Bars! Bar Chart Embedded within the DataTable


The full list of examples in this chapter:

  • Conditional Formatting
  • Alternative Highlighting Styles
  • Special characters like emoji, stars, checkmarks, circles
  • Filtering & Conditional Formatting Recipes
  • Highlighting the max value in a column
  • Highlighting a row with the min value
  • Highlighting the top three or bottom three values in a column
  • Highlighting the max value in every row
  • Highlighting the top two values in a row
  • Highlighting the maximum value in the table
  • Highlighting a range of values
  • Highlighting top 10% or bottom 10% of values by column
  • Highlighting values above average and below average
  • Highlighting None, NaN, or empty string values
  • Displaying special values for NaN or None values
  • Highlighting text that contains a value
  • Highlighting text that equals a value
  • Highlighting cells by value with a colorscale like a heatmap
  • Highlighting with a colorscale on a single column
  • Displaying data bars
  • Data bars without text
  • Diverging data bars
  • Highlighting dates

This chapter on conditional formatting is here: https://dash.plotly.com/datatable/conditional-formatting

Would love to hear any feedback or any other requests for examples. Enjoy!

:heart:

4 Likes

Hey Chris.
Many thanks for the updates.
I have a question.
Now that there are style_filter_conditional, style_cell_conditional, style_data_conditional, and style_header_conditional, can you please add one for columns properties like style_column_conditional for example if we want for a specific column, make some rows editable and some rows drop down and some rows not editable? Or is it possible to do that with the current settings?

Thanks,

it is possible to do that right now by using style_data_conditional or style_cell_conditional and using the column_id filter in the “if“ block.

1 Like

Fantastic and thanks for the prompt reply. I think I tried it before and it wasn’t working. I will try again and get back with more details if any issues.
Thanks again,

A post was split to a new topic: Need help with conditional formatting