# Adding markdown image in dashtable

**URL:** <https://community.plotly.com/t/adding-markdown-image-in-dashtable/53894>\
**Category:** Dash Python\
**Created:** [June 15, 2021, 11:24am UTC](https://community.plotly.com/t/adding-markdown-image-in-dashtable/53894 "2021-06-15T11:24:38Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tanya](https://avatars.discourse-cdn.com/v4/letter/t/35a633/32.png) [@tanya](https://community.plotly.com/u/tanya)\
**Post date:** [June 15, 2021, 11:24am UTC](https://community.plotly.com/t/adding-markdown-image-in-dashtable/53894/1 "2021-06-15T11:24:38Z")

</div>

Hello,

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

![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/6/622b89f1ebb29be5e2fce760c90c2e35b22a60a7.png)

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:

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

```

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

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [June 28, 2021, 5:37pm UTC](https://community.plotly.com/t/adding-markdown-image-in-dashtable/53894/2 "2021-06-28T17:37:32Z")

</div>

Hi @tanya

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

See [this pull request](https://github.com/plotly/dash-table/pull/916) for more details and examples.

* * *

* * *

**Change Color of Icons with Conditional Formatting  
Formatting text with html**  
 ![image](https://user-images.githubusercontent.com/72614349/123659461-90b30280-d7e7-11eb-92b7-f0cdef697c73.png)

```auto
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)

```

---

<div class="post-metadata">

**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [June 28, 2021, 6:29pm UTC](https://community.plotly.com/t/adding-markdown-image-in-dashtable/53894/3 "2021-06-28T18:29:45Z")

</div>

Hi @tanya

You also can use emojis to do that.

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

> [@Add Checkbox in a Dash Datatable](https://community.plotly.com/t/add-checkbox-in-a-dash-datatable/52600):
>
> Hi all, I made some changes to the code to use checkboxes into a datatable that I think is easy to understand. First example adds a first column with empty checkbox and when the user select/unselect any box it shows the selected/unselected information for that row and change the figure (emoji). Note that if the user select anything outside the boxes nothing hapens. First show the table with unselected checkboxes: Then some box rows has been selected by the user: And fi…

---

<div class="post-metadata">

**Author:** ![tanya](https://avatars.discourse-cdn.com/v4/letter/t/35a633/32.png) [@tanya](https://community.plotly.com/u/tanya)\
**Post date:** [July 6, 2021, 9:46am UTC](https://community.plotly.com/t/adding-markdown-image-in-dashtable/53894/4 "2021-07-06T09:46:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [July 6, 2021, 1:40pm UTC](https://community.plotly.com/t/adding-markdown-image-in-dashtable/53894/5 "2021-07-06T13:40:55Z")

</div>

Hey @tanya

I do not know if it is possible. 🤔  
You have different color options but limited:  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/7/7094709b693fa99f8ac787bd8fc3517066352281.png)

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