React Data GridProvided Overlays

The grid shows overlays to communicate the grid's current state to the user. When data is loading, when there is no data and when no rows match the current filter.

Loading Copy Link

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

No Rows Copy Link

When rowData is empty array [], the grid automatically displays the no-rows overlay.

No Matching Rows Copy Link

The no-matching-rows overlay is displayed when no rows match the current filter criteria.

Exporting Copy Link

The exporting overlay is displayed when data is being exported to CSV / Excel.

Example Copy Link

The following example demonstrates the loading, no rows and no matching rows overlays.

• Toggle the loading state to show/hide the loading overlay.
• Note that the loading overlay takes precedence over the other provided overlays if they are shown at the same time.
• Clear the row data to show the no rows overlay.
• Set Row Data and then Set Non Matching Filter to show the no matching rows overlay.
• Export the data to CSV

Customisation Copy Link

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 Copy Link

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

Error: Line 6: Unexpected identifier

To troubleshoot paste snippet here: 'https://esprima.org/demo/parse.html'

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

Custom Overlay Components Copy Link

Override the provided overlays by assigning a custom component to the matching key in the components map as described in Overriding Grid Components. Custom parameters can be supplied via the overlayComponentParams grid option.

const components = {
    agLoadingOverlay: CustomLoadingOverlay,
    agNoRowsOverlay: CustomNoRowsOverlay
};

<AgGridReact components={components} />

Overlay Component Selector Copy Link

Dynamically provide custom overlay components for each provided overlay via the overlayComponentSelector(params) callback. The params.overlayType property can be used to selectively override each overlay type. Custom parameters can be supplied via the params property alongside the custom component.

Returning undefined from the selector will fallback to the overlay specified in params.overlayType.

The component property also accepts the string keys of components registered via the components map.

const overlayComponentSelector = (params) => {
    if (params.overlayType === 'loading') {
        return {
            component: CustomLoadingOverlay,
            params: {
                loadingMessage: 'Please wait while data is loading...'
            }
        };
    }
    // return undefined to use the provided overlay for other overlay types
    return undefined;
};

<AgGridReact overlayComponentSelector={overlayComponentSelector} />

Combined Overlay Component Copy Link

Provide a custom component to overlayComponent to be used in place of all the provided overlays. The custom component receives a overlayType parameter which identifies which of the provided overlays should be displayed. This can be used to conditionally render different content based on the overlay type.

Custom parameters can be supplied to the overlay component via the overlayComponentParams grid option.

const overlayComponent = CustomOverlay;
const overlayComponentParams = {
    loadingMessage: 'Custom loading message',
    noRowsMessage: 'Custom no rows message'
};

<AgGridReact
    overlayComponent={overlayComponent}
    overlayComponentParams={overlayComponentParams}
/>

Suppress Overlays Copy Link

Each provided overlay can be suppressed via the suppressOverlays grid option. This option accepts an array of overlay types to suppress.

Legacy Customisation Copy Link

Previously, the loading and no-rows overlays were customised via: loadingOverlayComponent and noRowsOverlayComponent. This approach is now superseded by the overlayComponent but the properties remain for backwards compatibility and documentation is available here.