Add Shape to Dash DataTable

Dash Python
1

I have the below DataTable in Dash

image
image1962×528 34.9 KB

Code for generating this table is as below:

import dash
import dash_table
import pandas as pd

data = {'value':['very low','low','medium','high','very high'],'data':[1,3,5,7,10]}
df = pd.DataFrame(data)


app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    id='table',
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict('records'),
)

if __name__ == '__main__':
    app.run_server(debug=True)

But I want to generate the below table. How can i do this using dash? The indicator column is a shape that is color coded based on a scale (For eg. 5 is medium and hence yellow/amber , above 5 the value go from green to dark green . Similarly, values below 5 go from amber to red

image
image1748×1075 131 KB

2

Hi @rajatsaxena wellcome to Dash Community.

I think you need to have the colored arrows and use conditional formatting.

see: Special characters like emoji, stars, checkmarks, circles in this link:

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

Other alternative is to set the backgroud color to indicate the color value and a text indicating the value like:

**style{‘backgroundcolor’:‘green’, ‘color’:‘white’}

3

Hey thank you for this. I was looking at conditional formatting but that doesn’t seem to solve what I want to achieve. Since the coloring of the arrows has to be done using probably a gradient scale, I’m thinking one way of this might be adding the arrow icon as a column to the dataframe and then formatting it. Maybe using fontawesome arrows might help?

4

My suggestion is using emojis like :arrow_down: and :arrow_up: as described in the link and then a background color and padding to colored around the arrow.
Or directly shown the texts ‘very low’,‘low’,‘medium’,‘high’,‘very high’ with the Respective Background color.
Another way could be using images, I do not know if it is possible in tables, I used this solution with a marquee:
You can see how it shows the different market up an down here:
https://companyanalysis.herokuapp.com/

5

Hey @Eduardo, thank you for the guidance, let me give this a shot!

1 Like