Adding markdown image in dashtable

Dash Python
1

Hello,

I would like to create a dashtable with one of the columns haveing a markdown image like it is in the image:

image

I have tried using the presentation of the column as markdown and type as text but this brings errors when the text is in this format:

<span style="background-color:#5DCBEF"> ⬤ </span>

Does anyone know how else i can put the colored dot inside a dashtable cell?

2

Hi @tanya

Currently this is not possible, but good news: This will be in the next release of Dash :confetti_ball:

See this pull request for more details and examples.

Change Color of Icons with Conditional Formatting
Formatting text with html
image

import dash
import dash_html_components as html
import dash_table
import pandas as pd


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

dot = '<i class="fa fa-circle" ></i>'

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

df = pd.DataFrame(
    dict(
        [
            (
                "flight",
                [
                    "American Airlines <em>AA125</em>",
                    "Air Canada <em>AC1538</em>",
                    "Alaska Airlines <em>AS649</em>",
                    "British Airways <em>BA145</em>",
                ],
            ),
            ("status", ["On Time", "Canceled", "Delayed", "On Time"]),
            ("icon", [dot, dot, dot, dot]),
        ]
    )
)

app.layout = html.Div(
    [
        dash_table.DataTable(
            css=[dict(selector="p", rule="margin: 0px;")],
            data=df.to_dict("records"),
            columns=[
                {"id": "flight", "name": "Flight", "presentation": "markdown"},
                {"id": "status", "name": "Status"},
                {"id": "icon", "name": "", "presentation": "markdown"},
            ],
            markdown_options={"html": True},
            style_table={"width": 200},
            style_data_conditional=[
                {
                    "if": {
                        "filter_query": '{status} = "Canceled"',
                        "column_id": "icon",
                    },
                    "color": "tomato",
                },
                {
                    "if": {"filter_query": '{status} = "Delayed"', "column_id": "icon"},
                    "color": "gold",
                },
                {
                    "if": {"filter_query": '{status} = "On Time"', "column_id": "icon"},
                    "color": "green",
                },
            ],
        )
    ]
)

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

Hi @tanya

You also can use emojis to do that.

See this example using a box image to simulate a checkbox:

4

Hi @Eduardo, thanks. I used emojis but i could not customize them to the color i wanted. Do you know if that is possible?

5

Hey @tanya

I do not know if it is possible. :thinking:
You have different color options but limited:
image

Another alternative is taking the white circle or the white medium square and combine with background color. :woozy_face: