How do I render a hyperlink in a Dash table? (DataTable or dbc Table)

Question

I'm currently working on a Dash frontend interface (python), where I'm loading data from a Pandas dataframe into a table.

My question is: How do I render a hyperlink in a table? I would be interested for solutions with both Dash's DataTable component, but also with dbc Table (Dash Bootstrap Components) which I'm using in my implementation.

Below you can find the simplified and summarized code how I load the dataframe into the dbc Table component. Basically, when the user clicks on the search button, the query in the State is used as a parameter for a POST request. The response JSON is mapped and here I try to render a hyperlink - so far without success.

import dash_bootstrap_components as dbc
import pandas as pd
from dash import html, Input, Output, State
from app import app, backend_api


layout = html.Div(
    dbc.Button("Search", id='search-button'),
    dbc.Table(id="table"),
)


@app.callback(
    Output(component_id='table', component_property='children'),
    Input(component_id='search-button', component_property='n_clicks'),
    State(component_id='query', component_property='value'),
    State('session', 'data'),
)
def search(n_clicks, query, session):
    if not is_token_valid(token):
        return None
    response_json = backend_api.post_json_secure("/api/search/search/", token=token, payload=query)
    json_mapped = map_json(response_json)
    data = pd.json_normalize(json_mapped)
    table = dbc.Table.from_dataframe(data, striped=False, bordered=False, hover=False)
    return table


def map_json(json):
    # misc processing and try to render hyperlink
    mapped = ({
        "Column A": item["value_a"],
        "Column B": item["value_b"],
        "Column C": item["value_c"],
        "Link": create_link(item["link"]),
    } for item in json)
    return mapped


def create_link(url):
    # url is for example https://www.google.com
    # return url  # doesn't work
    # return f'<a href="{url}"/>  # doesn't work either
    # how do I create a hyperlink here?

This is the result for now - as you can see there is only text in the Link column - I'd rather want a real hyperlink here.

Does this answer your question? [Clickable Hyperlinks in Plotly Dash DataTable](https://stackoverflow.com/questions/70205486/clickable-hyperlinks-in-plotly-dash-datatable) — felice, Jun 21 '22 at 13:13

gru · Accepted Answer · 2022-02-15T10:44:29.200

Solution with dbc Table (Dash Bootstrap Components)

def create_link(url):
    return html.A(html.P('Link'), href=url)
    # alternatively use dcc.Link instead of html.A to prevent page refresh

Solution with Dash's DataTable component

Here you have to use "presentation": "markdown" in the column configuration:

# example with only one column and row
data_table = dash_table.DataTable(
    id="table",
    columns=[{"name": "link", "id": "column_link", "presentation": "markdown"}],
    data=[{"html": '<a href="https://www.google.com">Link</a>'}], 
    markdown_options={"html": True},
)

How do I render a hyperlink in a Dash table? (DataTable or dbc Table)

1 Answers1

Solution with dbc Table (Dash Bootstrap Components)

Solution with Dash's DataTable component

Result: