Overlay Component

The example below demonstrates how to provide a custom loading message to the grid. In the example:

The CustomLoadingOverlay component is defined in the dashAgGridComponentFunctions.js file in the assets folder.
The component is supplied by name via loadingOverlayComponent property.
The additional parameters (for text color and the message) are supplied using theloadingOverlayComponentParams 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

Custom No Rows Overlay

The example below demonstrates how to provide a custom no rows message to the grid. In the example:

The CustomNoRowsOverlay component is defined in the dashAgGridComponentFunctions.js file in the assets folder.
The component is supplied by name via the noRowsOverlayComponent property.
The additional parameters (for text color and the message) are supplied using 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