Overlay Component

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

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:

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