DataTable column clickalbe to link to url

Dash Python
10

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;
    }
}