DataTable with icons

datatable_icons.py

"""
See other MWEs for images and text icons here: https://github.com/plotly/dash-table/pull/916

Css in assets folder:  (not tested yet maybe move the body font-size somewhere else since it will affect the entire app like this)

.cell-markdown > p {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}

body {
    font-size: 15pt;
}

"""

from dash import Dash, html, dash_table
import pandas as pd


FONT_AWESOME = "https://use.fontawesome.com/releases/v5.10.2/css/all.css"

clouds = '<i class="fa fa-cloud" style="color: grey;"></i>'
rain = '<i class="fa fa-cloud-rain"></i>'
sun = '<i class="fa fa-sun" style="color: gold;"></i>'

app = Dash(__name__, external_stylesheets=[FONT_AWESOME])

df = pd.DataFrame(
    dict(
        [
            ("temperature", [13, 43, 50]),
            ("city", ["NYC", "Paris", "Seattle"]),
            ("icon", [sun, clouds, rain]),
        ]
    )
)

app.layout = html.Div(
    [
        dash_table.DataTable(
            css=[dict(selector="p", rule="margin: 0px;")],
            data=df.to_dict("records"),
            columns=[
                {"id": "city", "name": "City"},
                {"id": "temperature", "name": "Temperature"},
                {"id": "icon", "name": "", "presentation": "markdown"},
            ],
            markdown_options={"html": True},
            style_table={"width": 200},
        )
    ]
)

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