# Datatable Markdown Link Trouble

**URL:** https://community.plotly.com/t/datatable-markdown-link-trouble/36458
**Category:** Dash Python
**Created:** [March 20, 2020, 4:47pm UTC](https://community.plotly.com/t/datatable-markdown-link-trouble/36458 "2020-03-20T16:47:52Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![atarullo](https://avatars.discourse-cdn.com/v4/letter/a/c68b51/32.png) [@atarullo](https://community.plotly.com/u/atarullo)
#### Post date: [March 20, 2020, 4:47pm UTC](https://community.plotly.com/t/datatable-markdown-link-trouble/36458/1 "2020-03-20T16:47:52Z")

</div>

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](https://github.com/plotly/dash-table/pull/606) and [the recent markdown update](https://community.plotly.com/t/dash-table-datatable-embedded-links/36372/4). 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.

```auto

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

```

---

<div class="post-metadata">

### Author: ![atarullo](https://avatars.discourse-cdn.com/v4/letter/a/c68b51/32.png) [@atarullo](https://community.plotly.com/u/atarullo)
#### Post date: [March 20, 2020, 7:05pm UTC](https://community.plotly.com/t/datatable-markdown-link-trouble/36458/2 "2020-03-20T19:05:29Z")

</div>

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:

```auto

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

```

---

<div class="post-metadata">

### Author: ![atarullo](https://avatars.discourse-cdn.com/v4/letter/a/c68b51/32.png) [@atarullo](https://community.plotly.com/u/atarullo)
#### Post date: [August 11, 2020, 6:59pm UTC](https://community.plotly.com/t/datatable-markdown-link-trouble/36458/3 "2020-08-11T18:59:02Z")

</div>

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:

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

```