✊🏿 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!

Clickable Link - Dash DataTable

Hello,

I have a column in my DataTable that is a URL. I would like these URLs to be clickable and it will open in a new tab.

I have read a number of posts that try to achieve this but I tried it with no luck. Could someone help, please!?

Thank you,

Hi @riskfree

You can use markdown for that, set the column as:

columns=[{"name": "my_link", "id": "my_link", 'type': 'text', 'presentation':'markdown'}

And each element of the column has to have the markdown format for links, that is the label you want to show in brackets and the url in parenthesis (no space between them):

[Duck Duck Go](https://duckduckgo.com)

I copy the same code here that also uses markdown to show the result:
Duck Duck Go

HI @Eduardo,

I’m passing the column names as part of a callback into the column property of the data table using this piece of code:

 search_table_columns = [
        {"name": i, "id": i}
        for i in search_table.loc[
            :,
            [
                "Company Name",
                "Company Type",
                "Sector",
                "CEO",
                "State",
                "Country",
                "Website",
            ],
        ]
    ]

Where do I pass this line that you mentioned?:

columns=[{"name": "my_link", "id": "my_link", 'type': 'text', 'presentation':'markdown'}

Which is the column that you want to use as a link?

The column is Website

I see :upside_down_face:, try this:

 search_table_columns = [
        {"name": i, "id": i}
        for i in search_table.loc[
            :,
            [
                "Company Name",
                "Company Type",
                "Sector",
                "CEO",
                "State",
                "Country",
            ],
        ], {"name": "website", "id": "website", 'type': 'text', 'presentation':'markdown'}
    ]

Sorry one change :grinning:

The idea is that you have to have a dictionary for each column like:

[{"name":"columna1", "id":"columna1"}, {"name":"columna2", "id":"columna2"}, {"name":"columna3", "id":"columna3"}, {"name":"columna4", "id":"columna4"}, {"name":"columna5", "id":"columna5"}] 

hmm, it’s giving me “Too many indexers error”

edit - code is working now but working on getting the text to show rather than the URL. There is some padding underneath the cell, however, making it look weird.

@Eduardo I got it to work but the formatting is off like in the picture

I tried setting the alignment like this:

style_cell_conditional=[
                        {
                            "if": {"column_id": "Company Name"},
                            "width": "20%",
                            "text-align": "left",
                        },
                        {
                            "if": {"column_id": "Website"},
                            'text-align':'right'
                        }
                    ],

but it didn’t work. :frowning:

Sorry, I do not know why its not working :woozy_face:

But the links are working? :thinking:

Yes the links are working great - thanks very much. Ah… so close to getting it nicely done

Glad to know is working.

Place a new question to sove that issue. :grinning: