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??
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.
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;
}
}
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: