Markdown Component
About Markdown
You can use the Markdown component that is included with Dash AG Grid to format and style text content in cells.
Dash uses the CommonMark specification of Markdown. Check out their 60 Second Markdown Tutorial if this is your first introduction to Markdown.
To reduce the risk of XSS attacks, the grid does not allow raw HTML by default. For more information, see this community forum post on writing secure Dash apps
Tip: It is also possible to safely render HTML using the cell renderer component.
Images
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"})"
Links
By default, links in Markdown format will open the link in the same tab. To open a link in
in a new tab, include {"linkTarget":"_blank"} in the column definition.
Example with HTML Rendering Disabled
In this example, dangerously_allow_code is not enabled. As a result, raw HTML links do not render.
```python
import dash_ag_grid as dag
from dash import Dash, html, dcc
app = Dash()
columnDefs = [
{"field": "make"},
{"field": "link", "headerName": "Link opens same tab"},
{"field": "link", "headerName": "Link opens new tab", "linkTarget":"_blank"},
{"field": "image"},
]
"""
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** in bold",
"link": "[Example](#)",
"image": f"{rain} {rain} {rain} {rain} {rain}"
},
{
"make": "_Ford_ in italics",
"link": "[Google](https://google.com)",
"image": sun,
},
{
"make": "***Porsche*** in both",
"link": 'html Link',
"image": rain
},
]
app.layout = html.Div([
dag.AgGrid(
id="cell-renderer-grid-4",
columnSize="sizeToFit",
columnDefs=columnDefs,
defaultColDef={"cellRenderer": "markdown"},
rowData=rowData,
),
])
if __name__ == "__main__":
app.run(debug=True)
```
Example with HTML Rendering Enabled
In this example, dangerously_allow_code=True is enabled, allowing HTML to render within the Markdown component.
```python
import dash_ag_grid as dag
from dash import Dash, html, dcc
app = Dash(__name__)
columnDefs = [
{"field": "make"},
{"field": "link", "headerName": "Link opens new tab", "linkTarget":"_blank"},
{"field": "image"},
]
rain = ""
sun = ""
rowData = [
{
"make": "**Toyota** in bold",
"link": "[Example](#)",
"image": f"{rain} {rain} {rain} {rain} {rain}"
},
{
"make": "_Ford_ in italics",
"link": "[Google](https://google.com)",
"image": sun,
},
{
"make": "***Porsche*** in both",
"link": 'Link to new tab',
"image": rain
},
]
app.layout = html.Div([
dag.AgGrid(
id="cell-renderer-grid-5",
columnSize="sizeToFit",
columnDefs=columnDefs,
defaultColDef={"cellRenderer": "markdown"},
rowData=rowData,
dangerously_allow_code=True
),
])
if __name__ == "__main__":
app.run(debug=True)
```