DataTable column clickalbe to link to url

hi! i’ve gone through several forum posts including https://community.plotly.com/t/display-tables-in-dash
and am wondering if anyone has tried to make a column value in each of the rows an href that’s clickable so that it links to a url??

i’d like to do something like this dash-recipes/dash-html-table-hyperlinks.py at master · plotly/dash-recipes · GitHub
but still want to use the awesome dt.DataTable for sorting, searching, and filtering.

something i am currently trying is clicking on a cell and opening a button that links to a url but it seems like too much of a hack and am thinking it will come back and bite me later on.

would appreciate any ideas, thank you!!

We haven’t supported this in the new version of our table (releasing soon), but we’d like to support it soon after launch.

2 Likes

awesome thank you @chriddyp!

@chriddyp, when do you expect to have this feature available in the Dash DataTable?

Thanks!

2 Likes

@chriddyp Is there a GH issue we can subscribe or even help on that ?

1 Like

Here’s the Github issue for this: https://github.com/plotly/dash-table/issues/222

1 Like

Hey, ya’ll what’s the status on this, can’t seem to get url hyperlinks into my datatable…

It would be really awesome if we could use Markdown inside data table cells, similar to the tooltip Markdown support right now.

This hack is one possible solution until the feature is supported natively by the dash-table component: Links in datatable - Multipage App

To make the entire cell clickable (rather than an anchor link), you could add a couple additional lines to the javascript (app-ui.js) mentioned in the post:

if (!window.dash_clientside) {
    window.dash_clientside = {};
}

const baseHref = "/route/to/";

// create the "ui" namespace within dash_clientside
window.dash_clientside.ui = { 
    // this function should be used in the callback whenever the table viewport has changed
    replaceWithLinks: function(trigger) {
        // find all dash-table cells that are in column 0
        let cells = document.getElementsByClassName("dash-cell column-0");

        cells.forEach((elem, index, array) => {
            // each cell element should be modified with a new link
            // elem.children[0].innerText contains the link information, which we append to a specified route on our server
            elem.children[0].innerHTML =
                '<a href="' +
                baseHref +
                elem.children[0].innerText +
                '">' +
                elem.children[0].innerText +
                "</a>";

            // NEW: update the table cell's .onclick behavior to navigate to the new location as well
            elem.onclick = function() {
                window.location.href = baseHref + elem.children[0].innerText;
            };
        });

        // arbitrary return.. callback needs a target
        return true;
    }
}

is this feature rolled out in new plotly release ???

May I know the status of this feature?

1 Like

Is this still a WIP? Looks like it was planned for a previous release but never was. Would just like a update on this feature.

1 Like

This is a super valuable feature I’ve been waiting for more than a year. I’d love to see this @chriddyp or to have some expectation.

Thank you!

2 Likes

Seems to work nicely. Thanks much. One wrinkle: navigating from a cell requires two clicks: the first selects the cell, that second follows the link.

Any way to combine the two clicks? Or just make it work with one?

Thanks

Just noticed the reply adding an onClick function to each element. Seems to work. Never mind.

Could you please elaborate on this, I followed the same steps but not able to replicate the link changes.

Any help will be appreciated?

Thanks

Hi
Starting the data-table version 4.6.0 there is the markdown presentation for columns, where you can create a link using markdown. Nice example is here:

1 Like