The example below demonstrates how to provide a custom loading message to the grid. In the example:
CustomLoadingOverlay
component is defined in the dashAgGridComponentFunctions.js
file in the assets
folder.loadingOverlayComponent
property.loadingOverlayComponentParams
property.import dash_ag_grid as dag
from dash import Dash, html, dcc
columnDefs = [
{
"headerName": "Stock Ticker",
"field": "ticker",
},
{
"headerName": "Company",
"field": "company",
},
{
"headerName": "Last Close Price",
"field": "price",
"valueFormatter": {"function": """d3.format("($,.2f")(params.value)"""},
},
]
grid = dag.AgGrid(
id="custom-loading-overlay",
columnDefs=columnDefs,
columnSize="sizeToFit",
dashGridOptions={
"loadingOverlayComponent": "CustomLoadingOverlay",
"loadingOverlayComponentParams": {
"loadingMessage": "One moment please...",
"color": "red",
},
},
)
app = Dash(__name__)
app.layout = html.Div(
[dcc.Markdown("Example of custom loading overlay"), grid]
)
if __name__ == "__main__":
app.run(debug=True)
"""
Put the following in the dashAgGridComponentFunctions.js file in the assets folder
-----------
var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};
dagcomponentfuncs.CustomLoadingOverlay = function (props) {
return React.createElement(
'div',
{
style: {
border: '1pt solid grey',
color: props.color || 'grey',
padding: 10,
},
},
props.loadingMessage
);
};
"""
Example of custom loading overlay
The example below demonstrates how to provide a custom no rows message to the grid. In the example:
CustomNoRowsOverlay
component is defined in the dashAgGridComponentFunctions.js
file in the assets
folder.noRowsOverlayComponent
property.noRowsOverlayComponentParams
property.import dash_ag_grid as dag
from dash import Dash, html, dcc
columnDefs = [
{
"headerName": "Stock Ticker",
"field": "ticker",
},
{
"headerName": "Company",
"field": "company",
},
{
"headerName": "Last Close Price",
"field": "price",
"valueFormatter": {"function": """d3.format("($,.2f")(params.value)"""},
},
]
grid = dag.AgGrid(
id="no-rows-overlay",
columnDefs=columnDefs,
columnSize="sizeToFit",
rowData=[],
dashGridOptions={
"noRowsOverlayComponent": "CustomNoRowsOverlay",
"noRowsOverlayComponentParams": {
"message": "TaskAPI is not available now, please check again later",
"fontSize": 12,
},
},
)
app = Dash(__name__)
app.layout = html.Div(
[dcc.Markdown("Example of custom no rows overlay"), grid],
style={"margin": 20},
)
if __name__ == "__main__":
app.run(debug=True)
"""
Put the following in the dashAgGridComponentFunctions.js file in the assets folder
-----------
var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};
dagcomponentfuncs.CustomNoRowsOverlay = function (props) {
return React.createElement(
'div',
{
style: {
border: '1pt solid grey',
color: 'grey',
padding: 10,
fontSize: props.fontSize
},
},
props.message
);
};
"""
Example of custom no rows overlay