A hyper link in DataTable cell content?

Dash Python
1

Hi Community,
Is there an easy way to have a link in the DataTable cell of certain column?
I have not seen an example of such, reference only mentions markdown for tooltips so the only way I think of atm is to conditionally style when mouse hovers over a cell and create a call back to do the job. But this approach seems quite complicated to the problem I’m trying to resolve.

Can cell content be markdown?

Thank you,
Szymon

2

I am not sure if you can do it with DataTable, but i recently submitted a pull request to DashTabulator which makes this kind of use case possible. The concept is that you define a JavaScript asset that defines how to render the cell. For a link, it would be something like,

window.myNamespace = Object.assign({}, window.myNamespace, {
    tabulator: {
        toLink: function (cell, formatterParams, onRendered) {
            const value = cell._cell.value
            return "<a href=" + value + ">" + value + "</a>";
        }
    }
});

This function is then passed to the DashTabulator component using the following syntax,

import dash_tabulator
import dash
import dash_html_components as html
from dash_extensions.javascript import Namespace

# The namespace here must match the name space of the JavaScript asset.
ns = Namespace("myNamespace", "tabulator")
# Setup some data
columns = [
    {"title": "Name", "field": "name", "width": 150, "headerFilter": True, "editor": "input"},
    {"title": "Link", "field": "link", "hozAlign": "center", "formatter": ns("toLink")}
]
data = [
    {"id": 1, "name": "Oli Bob", "link": "https://www.google.com/"},
    {"id": 2, "name": "Mary May", "link": "https://stackoverflow.com/"},
]
# Create example app.
external_stylesheets = ['https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    dash_tabulator.DashTabulator(id='tabulator', columns=columns, data=data),
])

if __name__ == '__main__':
    app.run_server(debug=False, port=7777)

EDIT: The solution of @Eduardo is much simpler and most likely what you are looking for. That being said, the approach above generalizes to all kind of components (buttons, images, icon, etc.), so it might be useful for more complicated use cases :slight_smile:

1 Like
3

Hi spkunc,

You need to add in the table column: ‘presentation’:‘markdown’ and the cell column must have this format:

['Description of the link']("url Link")

The table will show only the labels between brackets.

the ]( must be together without any space.

5 Likes
4

Hi Eduardo,

Thanks you for your suggestion. It works!

Szymon

5

Glad to hear that, and wellcome to the Community. :grinning: