Hyperlink inside Dash datatable - where can I find an example

Dash Python
1

I want to replace the values in a particular datatable column with hyperlinks - e.g. “abc” should be a hyperlink to “abc.com”. Where can I find an example? Thanks.

2

Hi @maklai, I think these two posts should be able to answer your question:

Clickable link - Dash DataTable
Clickable Hyperlinks in Dash DataTable

1 Like
3

Thanks. I already had the table column dict including {‘type’: ‘text’, ‘presentation’: ‘markdown’}, but it turned out that my markdown needed fixing.

1 Like
4

For anyone using Dash AG Grid, you can also use a cell renderer:

1 Like
5

Hello, Can you also guide me how to use the cell renderer with django dash. Am able to make the Dash ag grid table column hyperlinked as a standalone dash app, but need to implement the same in a django dash project. Thanks In Advance

6

I switched to Dash Ag Grid and it works fine with the column “cellRenderer” set to “markdown”, but when I append ‘{:target=“_blank”}’ to the markdown to make sure the url is opened in a new tab, I see {:target=“_blank”} after the url label and the url does not open in a new tab.

My markdown is: ‘label{:target=“_blank”}’ - label in square brackets, url in parentheses, then {:target=“_blank”}

First I need to make that work, and then actually I want the url to open in a named tab, so clicking repeatedly for the same url does not open multiple identical tabs, but goes to one tab corresponding to that url.

7

Hello @maklai,

You might find it easier to create your own component (cellRenderer), where you can pass the link and the onclick perform a window.open(url, Target, options).

8

Thanks. I was just watching a YouTube video called “Dash Ag Grid - Adding Custom Components” from a channel called “Charming Data”.

2 Likes
9

Hi @maklai

To make a link that opens a new tab, you need to put "linkTarget": "_blank" in the column definitions. Here’s a complete minimal example – and it also shows how to format text, code and images with markdown too.

It’s standard that each time you click a link it will open a new tab. If you want to only open a new tab if one with the same link is not already opened, that may be possible, but as @jinnyzor mentioned, it would need a custom component.


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

app = dash.Dash(__name__)

columnDefs = [
    {
        "field": "make",
        "sortable": True,
        "cellRenderer": "markdown",
    },
    {"field": "model", "cellRenderer": "markdown"},
    {"field": "link", "cellRenderer": "markdown", "linkTarget": "_blank"},
    {"field": "image", "cellRenderer": "markdown"},
]

rain = "![alt text: rain](https://www.ag-grid.com/example-assets/weather/rain.png)"
sun = "![alt text: sun](https://www.ag-grid.com/example-assets/weather/sun.png)"


rowData = [
    {
        "make": "*Toyota* in italics",
        "model": "`code snippet`",
        "link": "**[Bold link](#)**",
        "image": f"{rain} {rain} {rain} {rain} {rain}",
    },
    {
        "make": "**Ford** in bold",
        "model": "Mondeo",
        "link": "[Google](https://www.google.com/)",
        "image": f"{sun} {sun} {sun} {sun}",
    },
    {
        "make": "***Porsche*** in both",
        "model": "model",
        "link": "[Plotly](https://dash.plotly.com/)",
        "image": rain,
    },
]


app.layout = html.Div(
    [
        dcc.Markdown("This grid has Markdown links with  linkTarget='_blank'"),
        dag.AgGrid(
            columnSize="sizeToFit",
            columnDefs=columnDefs,
            rowData=rowData,
        ),
    ]
)


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