DataTable (Alpha) - Styling

Dash Python
1

@Philippe thanks for clarifying that pandas styling doesnt currently work with the new DataTable.

Is there currently a “Dash” way to replicate a similar styling approach in the code below for the new datatable? This example is a simple dummy-dataset, but this approach was used on a large dataframe in a jupyterlab, so it would be helpful to know how to replicate in Dash.

df = pd.DataFrame({'Freshman':['Mike', 'Bill', 'Maria'],
                   'Junior':['Lauren','Tom','Jessica'],
                   'Senior':['Sandy','Michelle','Mike']
                   })

my_dict = {'Male':['Mike','Bill','Tom'],
          'Female':['Maria','Lauren','Jessica','Sandy','Michelle']}

def where(val):
  bg = ['blue', 'pink']
  fg = ['orange', 'red']
  ls = ['Male', 'Female']
  for i, y in enumerate(ls):
    if val in my_dict[y]:
      return f"background-color: {bg[i]}; color: {fg[i]}"
  return ''

df = df.style.applymap(where)

@eliasdabbas this question may be of interest to you

1 Like
2

I was wondering if there was a way to make use of pandas’ styling capabilities?

I have been thinking if this would be possible as well with the release of the new table. @chriddyp @Philippe is pandas styling possible with the new datatable?

1 Like
3

No, I think you still need to return the records for the data prop of dash_table.DataTable so the styling is not passed to the table. We would need to be able to serialize the pandas DataFrame and it’s metadata and then parse on the front-end of the DataTable.

1 Like
5

From the original thread by @eliasdabbas

I was wondering if there was a way to make use of pandas’ styling capabilities?
I know there is styling, and conditional formatting as well. But since it is already included in pandas it might be easy to use, and more importantly because it uses matplotlib, there are all the color maps as well.

6

Conditional formatting will likely continue to use the DSL that we come up with for filtering V2. In the filtering v2 discussion on github (https://github.com/plotly/dash-table/issues/169), we’re exploring adopting the NumExpr DSL, which would make filtering (and therefore conditional styling) closer to pandas.

7

Great. Would that work on a cell by cell basis?
Sometimes you don’t know what the numbers will be and you want to dynamically make a gradient color mapping, so it’s immediately visible which numbers are higher / lower.

df = pd.DataFrame({'a': [1, 2, 3, 7], 
                   'b': [4444, 5555, 6666, 7777], 
                   'c': [1, 3, 15, 18]})

df.style.background_gradient(subset=['c'])

18%20AM

Unreadable!

df.style.background_gradient(subset=['c'], high=0.5)

29%20AM

Number formatting by columns would be great as well.

df.style.format({'a': '{:.2f}', 'b': '{:,}'})

24%20AM

This can easily be done with DataTable but the values in the DataFrame need to be changed / formatted, so there is no issue there.

I tried cell-by-cell coloring, but it doesn’t seem to work. Am I doing something wrong?

import matplotlib
colors = matplotlib.cm.viridis([1, 3, 15, 18])
colors
array([[0.26851 , 0.009605, 0.335427, 1.      ],
       [0.271305, 0.019942, 0.347269, 1.      ],
       [0.281924, 0.089666, 0.412415, 1.      ],
       [0.28291 , 0.105393, 0.426902, 1.      ]])

I passed this to DataTable:

  style_data_conditional=[{
              "if": {"row_index": i},
              "backgroundColor":  'rgb(' + ', '.join([str(x) for x in col]) + ')'}
                                   for i, col in enumerate(colors)])

All cells come out with the same color.

2 Likes