Hello!
I have a ag grid table with a column that contains links and text. When there is a link I want to allow user to click on it so that it opens on the next page. I am trying to use pandas data frame (first code snippet below) and tried cell render (second code snippet below) as well however both are not working. Can you please help me implement it?
"""Example app to show all features of Vizro."""
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)
# PAGE ----------------------------------------------------------------------->
page = vm.Page(
title="Page Title",
layout=vm.Layout(grid=[
[0]
]),
components=[
vm.AgGrid(figure=dash_ag_grid(link_options,
dashGridOptions={"pagination": True, "exportDataAsCsv": True},
),
)
],
)
dashboard = vm.Dashboard(pages=[page])
if __name__ == "__main__":
Vizro().build(dashboard).run()
JS code added as dashAgGridComponentFunctions.js in “assets” folder.
var dagcomponentfuncs = window.dashAgGridComponentFunctions || {};
dagcomponentfuncs.LinkCellRenderer = function (props) {
return React.createElement('a', { href: props.value, target: '_blank' }, props.value);
};
"""Example app to show all features of Vizro."""
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>'
# PAGE ----------------------------------------------------------------------->
page = vm.Page(
title="Page Title",
layout=vm.Layout(grid=[
[0]
]),
components=[
vm.AgGrid(figure=dash_ag_grid(link_options,
dashGridOptions={"pagination": True, "exportDataAsCsv": True},
columnDefs=[{"headerName": "Label", "field": "label"},
{"headerName": "Value", "field": "value",
"cellRenderer": "LinkCellRenderer"}]
),
)
],
)
dashboard = vm.Dashboard(pages=[page])
if __name__ == "__main__":
Vizro().build(dashboard).run()
Thanks!
This worked however the link opens on the same page. My main purpose of using “create_clickable_link” was to use target=“_blank” property and force the link to open in new window.
