Clickable Hyperlinks in Plotly Dash DataTable

Question

There are several similar questions out there that I will reference in this, but I have a Dash DataTable with a column that I would like to make a clickable hyperlink. The table essentially looks like so:

Date                        Ticket ID           Work Order           Link (s)
2018-08-30 22:52:25         1444008             119846184            google.com/woNum=119846184
2021-09-29 13:33:49         1724734             122445397, 122441551 google.com/woNum=122445397, google.com/woNum=122441551

Without the hyperlinks, I am creating the table through a Pandas dataframe and the Data and Column references for Dash DataTable like this:

# works fine
searchFrame = searchFrame.drop(columns=['ContentNoStop'])
columns = [{'name': col, 'id': col} for col in searchFrame.columns]

The links are created via:

woLink = r'http://corp.com/uniqueid='

df['WO Link'] = df['Work Order'].str.replace('(\d+)', rf'{woLink}\1')

crLink = r'http://corp.com/uniqueid='
        
df['Ticket Link'] = crLink + df['Ticket ID'].astype(str)

Now, following this question from Plotly forums, I edited to fit mine:

columns = [
        {'name': col, 'id': col} 
for col in searchFrame.loc[
                :,
                [
                'Reported Date', 'Site','Ticket ID', 'Ticket Link', 'Work Order',\
                'Score', 'Level', 'First', 'Last', 'Department',  \
                'Detection', 'Code', 'Content', 'Description', 'Owner', 'Owner Group', 'Document ID'
                ], { "name": "WO Link", "id": "WO Link", 'type': 'text', "presentation" :'markdown' }
            ],
        ]

Directly copying that code throws a Syntax Error: Invalid Syntax. So, I edited to:

columns = [
        {'name': col, 'id': col} 
for col in searchFrame.loc[
                :,
                [
                'Reported Date', 'Site','Ticket ID', 'Ticket Link', 'Work Order',\
                'Score', 'Level', 'First', 'Last', 'Department',  \
                'Detection', 'Code', 'Content', 'Description', 'Owner', 'Owner Group', 'Document ID'
                ], { "name": "WO Link", "id": "WO Link", 'type': 'text', "presentation" :'markdown' }
            ]]

However, this throws a raise IndexingError("Too many indexers") pandas.core.indexing.IndexingError: Too many indexers

Using this SO question, I did the following which also threw the Too many indexers. The other answer on that question I tried as well (below) threw TypeError: unhashable type: 'slice'

idx = pd.IndexSlice
columns = [
                {'name': col, 'id': col} 
for col in searchFrame.loc[idx[
                :,
                [
                'Reported Date', 'Site','Ticket ID', 'Ticket Link', 'Work Order',\
                'Score', 'Level', 'First', 'Last', 'Department',  \
                'Detection', 'Code', 'Content', 'Description', 'Owner', 'Owner Group', 'Document ID'
                ], { "name": "WO Link", "id": "WO Link", 'type': 'text', "presentation" :'markdown' }
            ], :]
        ]

columns = [
        {'name': col, 'id': col} 
for col in searchFrame.loc(axis=0)[
                :,
                [
                'Reported Date', 'Site','Ticket ID', 'Ticket Link', 'Work Order',\
                'Score', 'Level', 'First', 'Last', 'Department',  \
                'Detection', 'Code', 'Content', 'Description', 'Owner', 'Owner Group', 'Document ID'
                ], { "name": "WO Link", "id": "WO Link", 'type': 'text', "presentation" :'markdown' }
            ]]

What am I doing wrong here? I feel like it should not be super complicated to create links for these. Also, you will be my forever hero if you can accommodate for multiple links in some rows.

user_11989081 · Answer

If you make sure that the links are in Markdown format the solution suggested in the Plotly Dash community forum should work:

import dash
import dash_html_components as html
import dash_table
import pandas as pd

df = pd.DataFrame({
    'Date': ['2018-08-30 22:52:25', '2021-09-29 13:33:49'],
    'Ticket ID': [1444008, 1724734],
    'Work Order': ['119846184', '122445397'],
    'Link(s)': ['[Google](https://www.google.com)', '[Twitter](https://www.twitter.com), [Facebook](https://www.facebook.com)'],
})

app = dash.Dash()

app.layout = html.Div(children=[

    dash_table.DataTable(
        data=df.to_dict(orient='records'),
        columns=[{'id': x, 'name': x, 'presentation': 'markdown'} if x == 'Link(s)' else {'id': x, 'name': x} for x in df.columns],
        style_table={'position': 'relative', 'top': '5vh', 'left': '5vw', 'width': '60vw'}
    ),

])

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

Clickable Hyperlinks in Plotly Dash DataTable

1 Answers