✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Workaround to embed links in table (experiment) cells?

I’ve been loving the dash_table_experiments, and I’m looking for one last feature to make it fully match my use case: embedding links in cells. I know there’s been a lot of work to enable components as cells, and that it’s dependent on work being done on a render component prop, but I’m wondering if there’s any workaround I could potentially use now to dynamically populate cells with links.

For example, when I run the following, I (predictably) get Error loading layout because Objects are not valid as a React child (found: object with keys {type, namespace, props}).:

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import pandas as pd

import dash
import dash_table_experiments as dt
import dash_html_components as html


app = dash.Dash()
app.css.append_css({"external_url":
                    "https://codepen.io/chriddyp/pen/bWLwgP.css"})

def main():
    df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv')

    links = [html.A('Navigate to "/{}"'.format(a), href='/{}'.format(a))
             for a in range(df.shape[0])]
    df['links'] = pd.Series(links, index=df.index)

    return dt.DataTable(rows=df.to_dict('records'),
                        columns=df.columns,
                        filterable=True,
                        sortable=True,
                        selected_row_indices=[],
                        )

app.layout = html.Div(main(), style={
                 'width': '100%',
                 'maxWidth': '1200px',
                 'margin': '0 auto'
                })


if __name__ == '__main__':
    app.run_server(debug=True)

How might I find a workaround to put links in cells?

There isn’t a workaround in the dash-table-experiments repo. However, you could just render the table as an html.Table and then you can embed html.A within the table cells.

That’s fair. I’ve been making good use of the sorting and filtering of the table experiments, but I could make do with the HTML tables for now.

Thanks for the response and all the hard work :slightly_smiling_face:

I have tried using dcc.markdown, html.Link, and there is no way to embed links. Neither the conditional cells someone else suggested with specific versions of the components (I did not get them to work).

I am currently using the html.Table(), however, my tables are quite long and I miss the headers…Filter is also quite useful now that I’ve tried it a lot.

It is a pity there is no solution for embedding links. The dash table experiments is so awesome and I would really love using it now. I am sorry I can’t use it this time, but I need to provide a link in the cells (so the user can navigate to other tables).

I noticed the previous posts were from August. Is there any news?
Thank you so much for all the work and patience!

Hey, I don’t know if this would help, but I may be close to find a workaround with the link within in a table with the Tooltip propertie…

Here is a picture example :

However, I can’t figure a way to display the tooltip once I unhover the cell. So the tooltip disappear and I can’t click on the link.

Is there any way to displayed a bit longer, even when the mouse move “from” the cell “to” the tooltip itself?

2 Likes

One hack I found for this is to use dcc.Location. In my case, I had a multi-page app and in one of the pages I used pseudo GET parameters (so for example, if you went to my-app/app1/my-param, app1 would be rendered using my-param as the value in an input). What I did is create a callback that takes the clicked cell in the table as input, and outputs the pathname of the location component. If the user clicked a cell in the column with the “links”, the callback took the cell ID and changed the pathname to the corresponding address, which triggers an app reload.

I don’t know if this would work for external addresses though. Being able to add links to the tables (or even better, markup as in the tooltips) would be a great addition to the table and the only thing missing for me right now after the last release fixed filtering a lot.

Hi @qdumont did you figure out how to insert links in the DashDatatable? There are many new functionalities but still not this important one.

By the way, could you show me how you managed to create it in the tooltip?

Thanks.

Do you get any solution for this?

No answers so far. :frowning:

Locking this answer since it’s about dash-table-experiments, an experimental project that we no longer maintain. Now we maintain dash-table, and embedding links inside cells is possible with the new markdown presentation option - dash_table.DataTable Embedded Links.