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

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

@chriddyp

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

I second this!

+1

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!

Linking #236 for dcc.Link support.

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.

Any updates on this issue?

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

@chriddyp

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

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.

@chriddyp

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 :)

+1 for this feature

+1 for this (Python API)

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.

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.

@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?

@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

@wvwhome

@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.

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?

@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.

@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

@wvwhome

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.

Navigation Menu

Repository navigation

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

20 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

zshao commented on Nov 6, 2018

eddy-ojb commented on Nov 6, 2018

eliasdabbas commented on Nov 6, 2018

chriddyp commented on Nov 6, 2018

Marc-Andre-Rivet commented on Nov 9, 2018

chirayu11 commented on Nov 13, 2018

jscottNRG commented on Nov 29, 2018

jurezu commented on Apr 5, 2019

Coding-with-Adam commented on Apr 24, 2019

Coding-with-Adam commented on Apr 24, 2019

zhsee commented on May 14, 2019

wvwhome commented on May 24, 2019

20 remaining items

jwazne commented on Dec 9, 2019

ce603 commented on Dec 29, 2019

Zackhardtoname commented on Dec 29, 2019

schuler-d commented on Jan 11, 2020

chriddyp commented on Jan 13, 2020

wvwhome commented on Jan 15, 2020

yogesh-ezest commented on Feb 12, 2020

wvwhome commented on Feb 12, 2020

yogesh-ezest commented on Feb 12, 2020

gdhaaijer commented on Feb 15, 2020

yogesh-ezest commented on Mar 11, 2020

HiIamJeff commented on Jul 17, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions