✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🏦 Standard & Poor's chooses Dash Enterprise for ESG analysis. Learn why, sign up for the June 23 Webinar here!

Datatable Markdown Link Trouble

Hi all,

I’m fairly new to Dash but have been thoroughly enjoying it. I’ve seen that dash recently enabled markdown to display clickable hyperlinks in a dash data table, but after implementing it on my dashboard, my links still are not clickable. I’ve already reviewed git issue 606 and the recent markdown update. Can anyone who’s successfully used markdown to display links in their table tell where I’m going wrong? Or can anyone post a successful example of using markdown to display a hyperlink until the documentation is more thorough? Thanks so much in advance.


def gen_table(df):   
df = df.to_dict('records')                 
    tbl = dash_table.DataTable(id = 'hashtags',
        style_data={'whiteSpace': 'normal',
                    'height':'auto'},
        style_table={'overflowX': 'scroll',
                     'textOverflow':'ellipsis',                    
                      },
        data=df,

#link is column of links that show up as normal text instead of hyperlinks

        columns=[{'name': 'Comment', 'id':'msg_cleaned'}, {name': 'link', id':'link','type':'text','presentation':'markdown'}],       
        style_cell_conditional=[ if': {'column_id': 'msg_cleaned'},
                                  'width': '400px'},                                
                                {'if': {'column_id': 'link'},
                                  'width': '100px'}
                                ],       
        filter_action = 'native',
        sort_action = 'native',
        sort_mode = 'multi',
        fixed_rows = {'headers':True}
    )
    return tbl

In case anyone comes along with a similar question, here’s how I fixed it after some digging:

all markdown links must be formatted as such: string to be clicked

Here’s how I turned my dataframe column into a dash table of clickable links:


def gen_table(dict):             
    df = pd.DataFrame(dict)
    
    #format dataframe column of urls so that it displays as hyperlink
    def display_links(df):
        links = df['link'].to_list()
        rows = []
        for x in links:
            link = '[Link](' +str(x) + ')'
            rows.append(link)
        return rows
    
    df['link'] = display_links(df)
    
    #turn df back into dictionary 
    dict= df.to_dict('records')

#Create Table
    tbl = dash_table.DataTable(
        id = 'hashtag_data',
        style_data={'whiteSpace': 'normal',
                    'height':'auto'},
        style_table={'overflowX': 'scroll',
                     'textOverflow':'ellipsis',
                      'maxHeight': '800px',
                      'paddingTop': '2px'
                      },
        data=dict,
        columns=[{'name': 'Date', 'id':'date'}, {'name': 'Comment', 'id':'msg_cleaned'}, {'name': 'All Hashtags', 'id':'hashtags'}, {'name': 'Link', 'id':'Link','type':'text','presentation':'markdown'}],
        filter_action = 'native',
        sort_action = 'native',
        sort_mode = 'multi',
        fixed_rows = {'headers':True}
    )
    return tbl
3 Likes

I realize I tried to display the syntax to get the hyperlink but it was changed to show a hyperlink. In order to format a link in a data table, it needs to be formatted like so:

link = '[Word or phrase you want to be highlighted to direct to site when clicked](' +str(URL) + ')'