from dash import Dash, html
import dash_ag_grid as dag
tooltip_image = "https://dash.plotly.com/assets/images/p ... _light.png"
grid = dag.AgGrid(
id = 'grid',
rowData = [{
'img_html': '

',
'tooltip':'Tooltip text'
}],
columnDefs=[
{
'field': 'img_html', 'headerName': 'Image', 'filter': False, 'cellRenderer': 'markdown',
"tooltipField": "tooltip",
"tooltipComponent": "DccMarkdown",
"tooltipComponentParams": {
"style": {
"padding": 200,
"backgroundImage": f"url('{tooltip_image}')",
"boxShadow": "var(--ag-card-shadow)",
},
},
},
],
columnSize = 'autoSize',
dangerously_allow_code=True
)
app = Dash(__name__, assets_folder='./assets',)
app.layout = [html.Div([grid]),]
if __name__ == '__main__':
app.run(debug=True)
Этот код Javascript находится в каталоге assets:
var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};
dagcomponentfuncs.DccMarkdown = function (props) {
return React.createElement(
window.dash_core_components.Markdown, {
children: props.value,
className: props.className,
style: props.style,
dangerously_allow_html : props.dangerously_allow_html | false,
link_target: props.link_target,
mathjax: props.mathjax
}
)
};