Set dataframe to table in dash table python and formatting color if Negative value is red color and the Positive value is green

Question:

this is my code

import dash_bootstrap_components as dbc
import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash import dash_table
df = pd.DataFrame(
    {
        ("USDT", "1D"): {
            "Arthur Dent": 6.0,
            "Ford Prefect": 4.0,
            "Zaphod Beeblebrox": 1.0,
            "Trillian Astra": 3.0,
        },
        ("USDT", "7D"): {
            "Arthur Dent": 2.0,
            "Ford Prefect": 2.0,
            "Zaphod Beeblebrox": 0.7,
            "Trillian Astra": 1.9,
        },
        ("USDT", "1M"): {
            "Arthur Dent": 2.0,
            "Ford Prefect": 2.0,
            "Zaphod Beeblebrox": 0.7,
            "Trillian Astra": 1.9,
        },
        ("USDC", "1D"): {
            "Arthur Dent": 6.0,
            "Ford Prefect": 4.0,
            "Zaphod Beeblebrox": 1.0,
            "Trillian Astra": 3.0,
        },
        ("USDC", "7D"): {
            "Arthur Dent": 2.0,
            "Ford Prefect": 2.0,
            "Zaphod Beeblebrox": 0.7,
            "Trillian Astra": 1.9,
        },
        ("USDC", "1M"): {
            "Arthur Dent": 2.0,
            "Ford Prefect": 2.0,
            "Zaphod Beeblebrox": -0.7,
            "Trillian Astra": 1.9,
        },
         ("BUSD", "1D"): {
            "Arthur Dent": 6.0,
            "Ford Prefect": 4.0,
            "Zaphod Beeblebrox": 1.0,
            "Trillian Astra": -3.7,
        },
        ("BUSD", "7D"): {
            "Arthur Dent": 2.0,
            "Ford Prefect": 2.0,
            "Zaphod Beeblebrox": 0.7,
            "Trillian Astra": 1.9,
        },
        ("BUSD", "1M"): {
            "Arthur Dent": 2.0,
            "Ford Prefect": 2.0,
            "Zaphod Beeblebrox": 0.7,
            "Trillian Astra": 1.9,
        },
        ("TOTAL", "1D"): {
            "Arthur Dent": 6.0,
            "Ford Prefect": 4.0,
            "Zaphod Beeblebrox": 1.0,
            "Trillian Astra": 3.0,
        },
        ("TOTAL", "7D"): {
            "Arthur Dent": 2.0,
            "Ford Prefect": 2.0,
            "Zaphod Beeblebrox": 0.7,
            "Trillian Astra": 1.9,
        },
        ("TOTAL", "1M"): {
            "Arthur Dent": 2.0,
            "Ford Prefect": 2.0,
            "Zaphod Beeblebrox": 0.7,
            "Trillian Astra": 1.9,
        },
    }
)
df.index.set_names("Name", inplace=True)
app = dash.Dash(__name__)
app.layout = html.Div([
    dbc.Table.from_dataframe(
    df, striped=True, bordered=True, hover=True, index=True
)
])

if __name__ == "__main__":
    app.run_server(debug=False, dev_tools_hot_reload=True)

This is the result I got
[![enter image description here][1]][1]
but i want the result to be a table in dash so i can build a website which has the condition like in this picture

i tried setting to table in dash python but when i deploy to localhost it gets close together i want the distance to separate

enter image description here

Asked By: Đỗ Văn Thắng

||
Source

Answers:

Plotly recently release dash_ag_grid and I think use it could solve your problem:

import dash_ag_grid as dag
import dash
from dash import html, dcc

data = [{'Name':'Arthur Dent',
         'USDT_1D': 6,
         'USDT_7D': 2,
         'USDT_1M': 2,
         'USDC_1D':6,
         'USDC_7D':2,
         'USDC_1M':2,
         'BUSD_1D':6,
         'BUSD_7D':2,
         'BUSD_1M':2,
         'TOTAL_1D':6,
         'TOTAL_7D':2,
         'TOTAL_1M':2},
       {'Name':'Ford Prefect',
         'USDT_1D': 4,
         'USDT_7D': 2,
         'USDT_1M': 2,
         'USDC_1D':4,
         'USDC_7D':2,
         'USDC_1M':2,
         'BUSD_1D':4,
         'BUSD_7D':2,
         'BUSD_1M':2,
         'TOTAL_1D':4,
         'TOTAL_7D':2,
         'TOTAL_1M':2},
       {'Name':'Zaphod Beeblebrox',
         'USDT_1D': 1,
         'USDT_7D': 0.7,
         'USDT_1M': 0.7,
         'USDC_1D':1,
         'USDC_7D':0.7,
         'USDC_1M':-0.7,
         'BUSD_1D':1,
         'BUSD_7D':0.7,
         'BUSD_1M':0.7,
         'TOTAL_1D':1,
         'TOTAL_7D':0.7,
         'TOTAL_1M':0.7},
        {'Name':'Trillian Astra',
         'USDT_1D': 3,
         'USDT_7D': 1.9,
         'USDT_1M': 1.9,
         'USDC_1D':3,
         'USDC_7D':1.9,
         'USDC_1M':1.9,
         'BUSD_1D':-3.7,
         'BUSD_7D':1.9,
         'BUSD_1M':1.9,
         'TOTAL_1D':3,
         'TOTAL_7D':1.9,
         'TOTAL_1M':1.9}]

columnDefs = [
    {
        "headerName": "Name",
        "children": [
            {"field": "Name", "resizable": True}
        ],
    },
    {
        "headerName": "USDT",
        "children": [
            {"field": "USDT_1D", "resizable": True, "headerName": "1D"},
            {"field": "USDT_7D", "resizable": True, "headerName": "7D"},
            {"field": "USDT_1M", "resizable": True, "headerName": "1M"}
        ],
    },
    {
        "headerName": "USDC",
        "children": [
            {"field": "USDC_1D", "resizable": True, "headerName": "1D"},
            {"field": "USDC_7D", "resizable": True, "headerName": "7D"},
            {"field": "USDC_1M", "resizable": True, "headerName": "1M"}
        ],
    },
    {
        "headerName": "BUSD",
        "children": [
            {"field": "BUSD_1D", "resizable": True, "headerName": "1D"},
            {"field": "BUSD_7D", "resizable": True, "headerName": "7D"},
            {"field": "BUSD_1M", "resizable": True, "headerName": "1M"}
        ],
    },    
    {
        "headerName": "TOTAL",
        "children": [
            {"field": "TOTAL_1D", "resizable": True, "headerName": "1D"},
            {"field": "TOTAL_7D", "resizable": True, "headerName": "7D"},
            {"field": "TOTAL_1M", "resizable": True, "headerName": "1M"}
        ],
    }
]

defaultColDef = {"sortable": True, "filter": True, "editable": True}

app.layout = html.Div(
    [
        dag.AgGrid(
            className="ag-theme-alpine headers1",
            columnDefs=columnDefs,
            rowData=data,
            defaultColDef=defaultColDef,
            cellStyle={
                "styleConditions": [
                    {"condition": "value > 5", "style": {"backgroundColor": "green", "color": "white"}},
                    {"condition": "value < 5 && value >2", "style": {"backgroundColor": "lightgreen", "color": "white"}},
                    {"condition": "value <= (-0.7) && value >= (-1)", "style": {"backgroundColor": "red", "color": "white"}},
                    {"condition": "value < (-1)", "style": {"backgroundColor": "darkred", "color": "white"}}
                ]
            },
            columnSize="sizeToFit"
        )
    ]
)


if __name__ == "__main__":
    app.run_server(debug=False)

enter image description here

Answered By: hoa tran