Overlay Component

Provided Overlays

The grid shows built-in overlays when data is loading or being exported and when there is no data or no rows match the current filter.

Loading

The loading overlay is displayed when the grid property loading is set to True and takes precedence over the other provided overlays.

Show or hide the loading overlay.
- True: the loading overlay is shown.
- False: the loading overlay is hidden.
- undefined: the grid will automatically show the loading overlay until rowData and columnDefs are provided. (Client Side Row Model only)

dag.AgGrid(
    dashGridOptions={"loading": True} #or False
)

This example shows the loading overlay since the rowData and columnDefs are not defined.

from dash import Dash, html
import dash_ag_grid as dag

app = Dash()

app.layout = html.Div([
    dag.AgGrid(id="ag-grid-loading")
])

if __name__ == "__main__":
    app.run(debug=True)

No Rows

When there are no rows the grid automatically displays the no-rows overlay.

from dash import Dash, html
import dash_ag_grid as dag

app = Dash()

app.layout = html.Div([
    dag.AgGrid(
        id="ag-grid-no-rows",
        columnDefs=[{"field": "year"}, {"field": "country"}],
        rowData=[],
    )
])

if __name__ == "__main__":
    app.run(debug=True)

No Matching Rows

The no-matching-rows overlay is displayed when the grid has rows but none of the rows match the current filter criteria.

Exporting

The exporting overlay is displayed when data is being exported from the grid to CSV or Excel.

Customisation

The provided overlays can be customised to change their content or completely replaced with custom components. The grid still manages the timing of when the overlays are displayed based on grid state.

Text Customisation

Customise the text within the provided overlays via the overlayComponentParams grid option using the OverlayComponentUserParams interface.

Properties available on the OverlayComponentUserParams.

loading Parameters to customise the provided loading overlay.
noRows Parameters to customise the provided no-rows overlay.
noMatchingRows Parameters to customise the provided no-matching-rows overlay.
exporting Parameters to customise the provided exporting overlay.

This example shows the custom text when there is no row data:

from dash import Dash, html
import dash_ag_grid as dag

app = Dash()


overlayComponentParams = {
    'loading': { 'overlayText': 'Please wait while your data is loading...' },
    'noRows': { 'overlayText': 'This grid has no data!' },
    'noMatchingRows': { 'overlayText': 'Current Filter Matches No Rows' },
    'exporting': { 'overlayText': 'Exporting your data...' },
};


app.layout = html.Div([
    dag.AgGrid(
        id='ag-grid-text-customization',
        columnDefs=[{'field': 'year'}, {'field': 'country'}],
        rowData=[],
        dashGridOptions={"overlayComponentParams": overlayComponentParams}
    )
])

if __name__ == "__main__":
    app.run(debug=True)

Suppress Overlays

Each provided overlay can be suppressed via the suppressOverlays grid option which accepts a list of overlay types to suppress.

dag.AgGrid(
    dashGridOptions={
        'suppressOverlays': ['loading', 'noRows', 'noMatchingRows', 'exporting']
    } 
)

Custom Overlay Components

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()

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()

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