A hyper link in DataTable cell content?

Dash Python
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