Clickable Link - Dash DataTable

Dash Python
1

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,

2

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

3

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'}
4

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

5

The column is Website

6

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:

7

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"}]
8

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.

9

@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:

10

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

But the links are working? :thinking:

11

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

12

Glad to know is working.

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

13

Using markdown is creating a Paragraph in the table cell, disturbing the whole layout as asked here

Any way to avoid additional Paragraph?

14

maybe you can try my open source components library feffery-antd-componentsļ¼ˆGitHub - CNFeffery/feffery-antd-components: Dash + Antd = šŸ˜ ļ¼‰ļ¼Œyou can use the ā€œlinkā€ mode in AntdTable:

image
image1566Ɨ1062 64.1 KB

15
1 Like