Vizro AgGrid - how to create clickable link in my ag grid table

Dash Python
2

Hi @sumitmehta12

You can use the markdown component to display the links. Try running this:


import pandas as pd
from dash import html
from typing import Literal

import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
from vizro.models.types import capture
from vizro.tables import dash_ag_grid

# GLOBALS --------------------------------------------------------------------->
DROPDOWN_LINK_OPTIONS = [
    {
        "label": "Google",
        "value": "https://google.com",
    },
    {
        "label": "Vizro GitHub",
        "value": "https://github.com/mckinsey/vizro",
    },
    {
        "label": "Vizro Docs",
        "value": "https://vizro.readthedocs.io/",
    },
]

# incorporating data frame
link_options = pd.DataFrame()
link_options = link_options._append(DROPDOWN_LINK_OPTIONS, ignore_index=True)


# convert link value to a clickable link
def create_clickable_link(row):
    return f'<a href="{row["value"]}" target="_blank">{row["value"]}</a>'


link_options['value'] = link_options.apply(create_clickable_link, axis=1)

columnDefs = [
    {"field": "label"},
    {"field": "value", "cellRenderer": "markdown"}
]

# PAGE ----------------------------------------------------------------------->
page = vm.Page(
    title="Page Title",
    layout=vm.Layout(grid=[
        [0]
    ]),
    components=[
        vm.AgGrid(
            figure=dash_ag_grid(
                link_options,
                columnDefs=columnDefs,
                dashGridOptions={"pagination": True, "exportDataAsCsv": True},
                dangerously_allow_code=True
            ),
        )
    ],
)

dashboard = vm.Dashboard(pages=[page])

Vizro().build(dashboard).run()

image
image918×604 28.9 KB

Note that you can avoid having to set dangerously_allow_code=True if you format the links as markdown links. See more info here: