✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

How to work with multiple links using dcc.link

I have a Pandas DataFrame with two colomns and about 50 rows, one column has the name of a web page and the other has the href of that web.
I want to pass with a callback this columns to a dcc.link element to show something like this:

Title Link
Document and Entity Information http://www.sec.gov/Archives/edgar/data/1675149
Statement of Operations (unaudited) http://www.sec.gov/Archives/edgar/data/1675149
Statement Comprehensive Income… http://www.sec.gov/Archives/edgar/data/1675149
Consolidated Balance Sheet http://www.sec.gov/Archives/edgar/data/1675149
Statement of Consolidated Cash Flows http://www.sec.gov/Archives/edgar/data/1675149

but I cant figure out how to do it.
Thanks in advance for your help.
Eduardo

Hi @Eduardo

Can you say more about what you want to do with this info once it’s in dcc.Link?
If you just want the columns and links to be displayed so someone can click on the link, you could put it in a datatable.

Hi Ann Mary,
Thanks for your quick answer.
Yes the idea is to display it in a datatable, but I dont understand how to do it with dcc.link.
If I list the columns as datatable columns, I do not have the links.
I tryed to pass the column as a list to the “href” values in the dcc.link and it receives an error like expected str not list.
Thanks.

Check out this post: Datatable Markdown Link Trouble
It looks like it might work for you.

1 Like

Thanks again Ann Mary,
You are right, this is what I was looking for !!!
but stil have problem to get the link to work properly.
I cant understand why.
It`s funny, in the table it shows each line like:
link= [Document and Entity Information]
(‘http://www.sec.gov/Archives/edgar/data/1675149/000156459020005759/R1.htm’)

but when I copy the row here to show the result, it shows in the way that I really like:

link = Document and Entity Information

Thank you for your help.
dont worry, I will try to solve it analyzing the link you provided in details.

Gracias, Eduardo.

Glad it worked - and thanks to @atarullo for the solution.

You may want to check if you have 'presentation':'markdown' in the column definition with the links.

1 Like

Thanks, I just came back to share that I found that the problem was related with ‘presentation’:‘markdown’.

Muchas gracias. :slightly_smiling_face: :raised_hand_with_fingers_splayed:
Eduardo

1 Like

Hi Ann Mary,

Final question, I am working in my browser using “http://127.0.0.1:8050/
now the links works like I wanted, but when I clicked it opens the link with the “http://127.0.0.1:8050/” at the begining, like:
http://127.0.0.1:8050/‘http://www.sec.gov/Archives/edgar/data/1675149/000156459020005759/R2.htm’
The same hapened when I ask to open in a new window with the right button of the mouse.
Is there any way to go directly to the link?

That’s odd - I haven’t seen that before.

Check out this tiny example. It goes directly to the web page when I click on the links:

import dash
import dash_table

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    id='table',
    columns=[{"name": "Link", "id": "Link", "presentation":"markdown"}] ,
    data=[{'Link': '[Markdown Guide](https://www.markdownguide.org)'},
          {'Link': '[SEC document](https://www.sec.gov/Archives/edgar/data/1675149/000156459020005759/R2.htm)'}]
)

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

Hi,
Your example worked perfect.
I tryed changing ‘like =’ for ‘like’ :
also added { and }, but nothing happens.
Dont warry, You helped me a lot.

Thanks.