DataTable column clickalbe to link to url

hi! i’ve gone through several forum posts including https://community.plot.ly/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 https://github.com/plotly/dash-recipes/blob/master/dash-html-table-hyperlinks.py
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.

1 Like

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?

three reasons why you should buy plotly pro: support open source, get great support, host your plots and dashboards online