Allow HyperLinks in cells via either dash_html_components.A, plain HTML string, or a markdown string

[zshao]

Right now, the cells can only be plain text. It will be great to support either HTML String or dash_html_components.A

[zshao]

@chriddyp if you can point me to where to look at, I should be able to work out the code myself I think. Thanks!

[eddy-ojb]

I second this!

[eliasdabbas]

+1

[chriddyp]

if you can point me to where to look at, I should be able to work out the code myself I think. Thanks!

Thanks for offering to jump in! Before we start coding, we need to be very thoughful about our API design, as I see this type of feature as just one of the features that first-class data type support will offer. That is, we need an API that allows for different "cell-renderers" that correspond to different "data-types". In some cases, data types will have only a single cell-renderer (e.g. enum and dropdown) but in other cases, there might be multiple cell-renders for a single data type (string could be rendrered as text input or link). So in this case, would a link be just a new cell-renderer or would it be a data type of its own?

What we decide above will also impact other things like filtering and editing

• do we include the hyperlink in the filtering, do we render a special type of filter UI for hyperlinks?
• what does the editing experience look like for a link?

So, first we need to nail down data types and how the impact all of these other things (rendering, filtering, editing). That discussion will include things like support for hyperlinks. Then, once that API is nailed down, hopefully adding hyperlink support will fit in naturally.

I'm working on a design document for data types this week and I'll link this issue that discussion when I post it.

I hope that makes sense!

[Marc-Andre-Rivet]

Linking #236 for dcc.Link support.

[jscottNRG]

I'm also looking for this feature. Love the ability to have embedded links in a Dash table like shown in
this recipe and I'd like to use DataTable instead.

[jurezu]

Any updates on this issue?

[Coding-with-Adam]

Hi.
Any updates on this issue? I'm trying to add links into rows as well.

[Coding-with-Adam]

Hi.
Any updates on this issue? I'm trying to add links into rows as well.

[zhsee]

@chriddyp I wish to have this feature in my app. is it ready?

[wvwhome]

Hi, I just did this for my Excel spreadsheet cell using =HYPERLINK ... now I want to do the same for DataTable ... I don't want to lose DataTable functionality by rendering a regular HTML table.

[chirayu11]

@chriddyp any updates on this issue?

[sergeyfitts]

Hi, can we do it some other way now?
@zshao, If you somehow solved this problem, could you tell us how it can be implemented now?

[Zylatis]

Any ETA on this feature? Would be really handy!

[mazzma12]

+1 It would be a good user-friendly feature

[straumboi]

+1 waiting for this feature

[truongkhanhduy95]

+1 for this feature

[twoutrigger]

• 1 for this. Really enjoying Datatables btw

[ieipi]

+1 for this feature

[jaakash2004]

+1 for this feature

[interrogator]

Is something profoundly different between the dash table and the old html.Table, for which a href keyword argument could be provided? If @chriddyp could articulate why this is a tough issue to solve, and why the html.Table solution will/won't work, maybe someone else can solve it quickly? I'm happy to give it a go.

It's a real shame to have to still use html.Table for a year, just to get a simple hyperlink. I've seen solutions using client-side JS, but these are obviously hacks that I'd love to avoid...

[alexcjohnson]

Please follow #596 - our plan for this feature, at least in the short term, is to use markdown. We anticipate being able to get this into one of the next several releases. At some point we may consider other options to increase flexibility, but for a first implementation:

• HTML strings are cumbersome to use and present some security risks
• Arbitrary dash components present all sorts of consistency issues and other challenges if you really explore the implications. Not impossible but would be a very heavy lift, involving major changes in dash-renderer as well.

[interrogator]

Thanks for the update, really much appreciated.

IMO Markdown seems like a very reasonable approach, great since it'd easy allow text with only part being a link and so on. And I guess hooking up markdown rendering support is going to open up other possibilities too, so it's a good thing to at least explore.

However, since markdown support is a broader issue than just allowing hrefs in the table, I get a feeling like attaching this one to it will slow down the path to implementation of what I think is a pretty critical feature. This is a pity.

My user story:

My app is two pages, with a mainpage whose main feature is a table of datasets you can click to view. While I use the dash table everywhere for data exploration, I have to use the html.Table for the man page table, for the sole reason that it supports hyperlinks, which in my case is unavoidable. (Actually, I'd also be fine with support for a button component or something, which could occupy a cell. But an <a href=...> is more than enough tbh.
So yeah, my use case is just an href with text like 'Explore this dataset' --- it's nothing remotely complicated, and something supported by simple html tables without any plugins and so on.
Problem is, as I add more and more datasets, the search/filter/pagination benefits of dash table become more and more appealing, but without the option of hyperlinking, I'm stuck with the horrible client-side-rendering hack, or with having two brands of table within one app, with completely different creation logics.

I understand the issue of API consistency issues and security risks. However, I don't see how security could be any worse than one of the dozens of other implementations out there, such as bootstrap-table. If there really is a vulnerability (I can't imagine it), why not make a note of it in the docs, allow and move on? 😁

Also, any comment on what is wrong with the html.Table implementation? It just seems like enough users want this that even an interim solution would be valuable.

Thanks for your hard work, sorry for hasslin'

[alexcjohnson]

Markdown support actually won't be a very big lift. We already have it in dash-core-components, and in fact even in the dash_table for tooltips. There are just limited hours in a day but it's coming up soon.

Also, any comment on what is wrong with the html.Table implementation?

I'm not sure what you mean by this, can you elaborate? Using dash_html_components you should be able to put whatever HTML elements you want in a table, but it won't - and can't - have all the interactive features of dash_table.

[interrogator]

I just meant, what stops the html.Table solution for HTML/href rendering from being used in dash_table as well. But if I understand correctly now, html.Table and dash_table are completely different designs.

But great to hear that there is already some markdown support. Making that more complete does seem like the best way to go.

[andre-c-andersen]

A year has passed since this feature request was raised. Can we at least have a temporary solution just for links? A workaround of some sort? As it stands we have to implement custom html tables, with the pain of implementing manual sorting and pagination because links are not supported. Sometimes productivity is more important than API purity.

[jwazne]

+1 waiting for this feature
Agreed with @AndreCAndersen about the priority of the link feature.

[chriddyp]

We are working on this feature as we speak in #606. It will likely be out by the end of the year. Thank you for your patience!

For future reference - If features like these are mission critical for your project, two sure-fire ways that you can get them shipped faster are: 1) Submit a pull request, 2) Fund or sponsor our open source development: https://plot.ly/products/consulting-and-oem/.

[jwazne]

Thank you @chriddyp .

For now I'm using the workaround described by brad here : https://community.plot.ly/t/links-in-datatable-multipage-app/26081/5

But if I could avoid any javascript in my app that will be better for me :)

[ce603]

+1 for this feature

[Zackhardtoname]

+1 for this (Python API)

[schuler-d]

+1 for this (Python API)

[chriddyp]

Closed in #606, this will be available via markdown strings in the next release (this week). Stay tuned to the community forum for the release announcement.

[wvwhome]

Hi, I just did this for my Excel spreadsheet cell using =HYPERLINK ... now I want to do the same for DataTable ... I don't want to lose DataTable functionality by rendering a regular HTML table.

dash_table 4.6.0 has this working now. Thanks! I'm using Markdown.

[yogesh-ezest]

@wvwhome How you achieved the hyperlink for all the values of column without reference of js. It will be good if shared the steps to achieve it?

[wvwhome]

@wvwhome How you achieved the hyperlink for all the values of column without reference of js. It will be good if shared the steps to achieve it?

Here's some code excerpts below for this datatable column:

    dash_table.DataTable(
                id='datatable-plants',
                export_format="csv",
                columns = [
                  .....
                        {"id": "latlon_link",
                         "name": ["", "Lat.-Long (Link for Google Maps)"],
                         "presentation": "markdown",
                        },

    .....

     #   Build link to Google Maps using Markdown
        df_plant_sort.at[my_index, 'latlon_link'] =  \
                    '['  +  df_plant_sort.at[my_index, 'lat']  +  ','  +  \
                            df_plant_sort.at[my_index, 'lon']  +   \
                    ']'  +  \
                    '('  +  df_plant_sort.at[my_index, 'latlon_link']  +  ')'

where latlon_link example is 
                       https://www.google.com/maps/place/41.44823,-72.834884

[yogesh-ezest]

@wvwhome Thanks for sharing. I was expecting to achieve this using using datatable properties(e,g style_header, style_cell). I tried using style_data_conditional but not able to achieve the link for that text. I don't want to add any url on that text. I just wanted that text should be clickable.

[gdhaaijer]

Slightly related, but "presentation": "markdown" appears to break style_data = {"textAlign": "right"}. After setting presentation to markdown the alignment of my cells went haywire, and as far as I can see there's no way to restore this. As per the CommonMark specs, alignment should work like this:

bla

However, formatting your cell data to include this will result in your table literally printing <p etc
(while it does parse the ()[] structure for hyperlinks). Now I'm guessing this has something to do with enabling inline HTML, as there is a specific dangerously_allow_html boolean for dcc.Markdown objects. However, as far as I can tell there's no way to enable HTML for markdown presentation of cell data. Am I missing something? Is this a bug?

[yogesh-ezest]

Closed in #606, this will be available via markdown strings in the next release (this week). Stay tuned to the community forum for the release announcement.

@chriddyp Yes I tried using markdown and I am successfully able to create link in cell. Now the problem is link is opening in the same tab, and I am loosing the my previous data.

Could you provide me the suggestions to how do I open the link in new tab using markdown? Or tell me the what workaround should be required for that, so I can do it at my end.

Thanks

[HiIamJeff]

Could you provide me the suggestions to how do I open the link in new tab using markdown? Or tell me the what workaround should be required for that, so I can do it at my end.

Wondering the same thing. Hope someone can help out and also provide how to link the dash_table.DataTable to the dataframe just like what @wvwhome did.

[ghost]

i consider feature broken until links without protocol prefix eg `http...' run out of the box.
broken: community.plotly.com/t/dash-datatable-embedding-markdown-links-is-broken/44966/2
ok: https://community.plotly.com/t/dash-datatable-embedding-markdown-links-is-broken/44966/2

mvp

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,],
    'url': [
        'www.google.com',
        'https://github.com/plotly/dash-table/issues/222',
        'community.plotly.com/t/dash-datatable-embedding-markdown-links-is-broken/44966/2',
        'https://community.plotly.com/t/dash-datatable-embedding-markdown-links-is-broken/44966/2',
    ]
}
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)