Dash DataTable: Embedding markdown links is broken

Dash Python
1

markdown link embedding resolves to http://127.0.0.1:8050/www.google.com. please fix it, who got this problem too?

try yourself:

import dash
from dash_html_components import Div
from dash_table import DataTable

from pandas import DataFrame

def f(row):
    l = "[{0}]({0})".format(row["url"])
    return l

d = {
    'id': [1,2,3,4,5,6],
    'url': [
        'www.google.com',
        'dash.plot.ly',
        'plot.ly',
        'community.plot.ly',
        'altavista.com',
        'yahoo.com'
    ]
}
df = DataFrame(data=d)
df["link"] = df.apply(f, axis=1)
print(df)

app = dash.Dash(__name__)

app.layout = Div([
    DataTable(
        columns=[
            dict(name='id', id='id', type='text'),
            dict(name='link', id='url', type='text', presentation='input'),
            dict(name='link', id='link', type='text', presentation='markdown'),
        ],
        data=df.to_dict('records')
    ),
])

app.run_server(debug=True)

.
.
another mvp, broken too?

import dash
import dash_html_components as html
import pandas as pd

df = pd.DataFrame({
    'id': ['a', 'b', 'c', 'd'],
    'col1': [1, 2, 3, 4]
})

def Table(dataframe):
    rows = []
    for i in range(len(dataframe)):
        row = []
        for col in dataframe.columns:
            value = dataframe.iloc[i][col]
            # update this depending on which
            # columns you want to show links for
            # and what you want those links to be
            if col == 'id':
                cell = html.Td(html.A(href='www.google.com', children=value))
            else:
                cell = html.Td(children=value)
            row.append(cell)
        rows.append(html.Tr(row))
    return html.Table(
        # Header
        [html.Tr([html.Th(col) for col in dataframe.columns])] +

        rows
    )

app = dash.Dash()
app.css.append_css({'external_url': 'https://codepen.io/chriddyp/pen/dZVMbK.css'})

app.layout = html.Div(children=[
    Table(df)
])

if __name__ == '__main__':
    app.run_server(debug=True)

from dash-recipes/dash-html-table-hyperlinks.py at master · plotly/dash-recipes · GitHub

2

SOLUTIN:
Must prefix url with protocol http…

3

Good find! The issue here is that without the prefix we don’t know if this is a relative URL or an absolute URL. This is the native behaviour of A links in the browser.

4

Hello,

I would like to point out something that may not be obvious from the above (as it wasn’t to me at first).

If you are embedding say an email link in a table, something like:
html.A(“email_person”, href = “mailto:email@email_host.com”)

This won’t work and neither will:

“%s”.format(“mailto:email@email_host.com”)(“email_person”)

But:

“%s”.format(“mailto://email@email_host.com”)(“email_person”)

and then continue with presentation: markdown as before.

Hope this helps someone! Also Dash is great so thanks for the fab work.