Markdown Component
The Markdown component is included with Dash AG Grid, but by default the grid does not allow raw HTML to reduce the risk of XSS attacks.. For more
information, see this community forum post on writing secure Dash apps
The first example does not have dangerously_allow_code enabled, so the links which are raw html do not render. The second example has dangerously_allow_code=True.
Note - it is also possible to safely render HTML using the cell renderer component.
The images in these examples are loaded from a remote source the link is formatted like this:
""
They can also be loaded locally using:
f"})"
Or if you are using a multi page app
f"})"
import dash_ag_grid as dag
from dash import Dash, html, dcc
app = Dash(__name__)
columnDefs = [
{"headerName": "Make", "field": "make", "sortable": True},
{"headerName": "Model", "field": "model"},
{"headerName": "Price", "field": "price"},
{"headerName": "Link", "field": "link", "cellRenderer": "markdown"},
{"headerName": "Image", "field": "image", "cellRenderer": "markdown"},
]
"""
Note that here, images are loaded from a remote source. They can also be loaded locally using:
f"})"
as the cell value.
"""
rain = ""
sun = ""
rowData = [
{
"make": "Toyota",
"model": "Celica",
"price": 35000,
"link": "[Example](#)",
"image": f"{rain} {rain} {rain} {rain} {rain}"
},
{
"make": "Ford",
"model": "Mondeo",
"price": 32000,
"link": "[Example](#)",
"image": sun,
},
{
"make": "Porsche",
"model": "Boxster",
"price": 72000,
"link": "[Example](#)",
"image": rain
},
]
app.layout = html.Div(
[
dcc.Markdown(
"Images, links, and other special cell values can be formatted in Markdown by specifying the `cellRenderer` property to be `'markdown'` in the column definition."
),
dag.AgGrid(
id="cell-renderer-table-4",
columnSize="sizeToFit",
columnDefs=columnDefs,
rowData=rowData,
),
]
)
if __name__ == "__main__":
app.run(debug=True)
Images, links, and other special cell values can be formatted in Markdown by specifying the cellRenderer property to be 'markdown' in the column definition.