How insert img href inside a dash datatable

Dash Python
1

Hi.

I need to replace a URL column in dash datatable by a cliokable logo photo that redirects me to that URL. Can you advise on how to integrate a href image into dash datatable cell?

1 Like
2

There will be probably more knowledgeable people with respect to dash_table, but if you are looking for a simple table without all the shebangs, then you can consider dbc.Table() or html.Table() that allow you to compose your cells as you want (including a link as img). That’s what I did when I needed it.

Or you can try this approach with Markdown…

1 Like
3

@jlfsjunior has a great suggestion, but if you would also like to use the other advanced features of the DataTable, here is an example of how to add an image as a link in a DataTable using Markdown syntax .
The link needs to be formatted like this: [![alt text](image link)](web link)

Note that you can now also use raw HTML in markdown in a datatable. See more information in the announcement here

The advantage of using the markdown syntax is that it doesn’t have the security risks like raw HTML.


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

app = dash.Dash(__name__)

#Markdown format for image as a link: [![alt text](image link)](web link)
seattle = "[![Seattle](https://upload.wikimedia.org/wikipedia/commons/8/80/SeattleQueenAnne2021-2.png#thumbnail)](https://en.wikipedia.org/wiki/Seattle)"
montreal = "[![Montreal](https://upload.wikimedia.org/wikipedia/commons/d/d0/Montreal_August_2017_05.jpg#thumbnail)](https://en.wikipedia.org/wiki/Montreal)"
nyc = "[![New York City](https://upload.wikimedia.org/wikipedia/commons/f/f7/Lower_Manhattan_skyline_-_June_2017.jpg#thumbnail)](https://en.wikipedia.org/wiki/New_York_City)"

"""

Use css in the assets folder to set the image size, for example:

img[src*="#thumbnail"] {
   width:200px;
   height:100px;
}
"""




df = pd.DataFrame(
    dict(
        [
            ("temperature", [13, 43, 50]),
            ("city", ["NYC", "Montreal", "Seattle"]),
            ("image", [nyc, montreal, seattle]),
        ]
    )
)

app.layout = html.Div(
    [
        dash_table.DataTable(
            id="table-dropdown",
            data=df.to_dict("records"),
            columns=[
                {"id": "image", "name": "image", "presentation": "markdown"},
                {"id": "city", "name": "city"},
                {"id": "temperature", "name": "temperature"},
            ],
            style_cell_conditional=[{"if": {"column_id": "image"}, "width": "200px"},],
        )
    ]
)

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

Thank you @AnnMarieW This works perfectly.

1 Like
5

Thanks for the suggestions.

1 Like