Applications can display an overlay on demand regardless of grid state. This is achieved by providing an active overlay which can be one of the provided overlays or be a custom overlay component.
'use client';
import React, { StrictMode, useState } from "react";
import { createRoot } from "react-dom/client";
import {
ClientSideRowModelModule,
enableDevValidations,
} from "ag-grid-community";
import type { ColDef } from "ag-grid-community";
import { AgGridProvider, AgGridReact } from "ag-grid-react";
import type { CustomParams } from "./customOverlay";
import { CustomOverlay } from "./customOverlay";
import "./styles.css";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
const modules = [ClientSideRowModelModule];
interface IAthlete {
athlete: string;
country: string;
}
const columnDefs: ColDef[] = [
{ field: "athlete", flex: 1 },
{ field: "country", flex: 1 },
];
const rowData: IAthlete[] = [
{ athlete: "Michael Phelps", country: "United States" },
{ athlete: "Natalie Coughlin", country: "United States" },
{ athlete: "Aleksey Nemov", country: "Russia" },
{ athlete: "Alicia Coutts", country: "Australia" },
];
const GridExample = () => {
const [activeOverlay, setActiveOverlay] = useState<any>(() => CustomOverlay);
const [activeOverlayParams, setActiveOverlayParams] = useState<CustomParams>({
count: 1,
});
return (
<AgGridProvider modules={modules}>
<div className="example-wrapper">
<div className="button-row">
<button onClick={() => setActiveOverlay(() => CustomOverlay)}>
Show custom overlay
</button>
<button onClick={() => setActiveOverlay(undefined)}>
Hide custom overlay
</button>
<button
onClick={() =>
setActiveOverlayParams((prev) => ({ count: prev.count + 1 }))
}
>
Increment Param
</button>
</div>
<div className="grid-wrapper">
<AgGridReact<IAthlete>
rowData={rowData}
columnDefs={columnDefs}
activeOverlay={activeOverlay}
activeOverlayParams={activeOverlayParams}
/>
</div>
</div>
</AgGridProvider>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<GridExample />
</StrictMode>,
);
.example-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.button-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 12px;
}
.button-row button {
padding: 4px 12px;
}
.grid-wrapper {
flex: 1 1 0;
min-height: 0;
}
.my-custom-overlay {
padding: 16px;
font-size: 32px;
background: rgba(0, 0, 0, 0.1);
border-radius: 20px;
}
import React from "react";
import type { CustomOverlayProps } from "ag-grid-react";
export interface CustomParams {
count: number;
}
export const CustomOverlay = (props: CustomOverlayProps & CustomParams) => {
return <div className="my-custom-overlay">Custom Overlay: {props.count}</div>;
};
Display an Active Overlay Copy Link
To display an overlay on demand set the activeOverlay / activeOverlayParams grid option. To clear the overlay set activeOverlay = undefined.
Display an overlay on demand. If provided takes precedence over the grid provided overlays. agLoadingOverlay, agNoRowsOverlay, agNoMatchingRowsOverlay, agExportingOverlay components map. undefined to clear. |
Custom parameters to be supplied to the activeOverlay component in addition to IOverlayParams. Updating the params will trigger a refresh of the active overlay. |
The example below demonstrates using the grid provided overlays as an active overlay. Note the following:
- activeOverlays take precedence over the provided loading overlay.
- activeOverlay can be displayed no matter what the grid state, i.e showing the no-rows overlay even when there are rows.
- StatusOverlay is registered in the components map and shown by setting
activateOverlay = "statusOverlay"to the key used.
'use client';
import React, { StrictMode, useMemo, useState } from "react";
import { createRoot } from "react-dom/client";
import {
ClientSideRowModelModule,
enableDevValidations,
} from "ag-grid-community";
import type { ColDef } from "ag-grid-community";
import { AgGridProvider, AgGridReact } from "ag-grid-react";
import StatusOverlay from "./statusOverlay";
import "./styles.css";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
const modules = [ClientSideRowModelModule];
interface IAthlete {
athlete: string;
country: string;
}
const columnDefs: ColDef[] = [
{ field: "athlete", flex: 1 },
{ field: "country", flex: 1 },
];
const rowData: IAthlete[] = [
{ athlete: "Michael Phelps", country: "United States" },
{ athlete: "Natalie Coughlin", country: "United States" },
];
const GridExample = () => {
const components = useMemo(() => ({ statusOverlay: StatusOverlay }), []);
const [activeOverlay, setActiveOverlay] = useState<string | undefined>();
const [loading, setLoading] = useState<boolean | undefined>(undefined);
const setNoRowsOverlay = () => {
setActiveOverlay("agNoRowsOverlay");
};
const setCustomOverlay = () => {
setActiveOverlay("statusOverlay");
};
const clearOverlay = () => {
setActiveOverlay(undefined);
};
const onLoadingToggle = (event: React.ChangeEvent<HTMLInputElement>) => {
setLoading(event.target.checked ? true : undefined);
};
return (
<AgGridProvider modules={modules}>
<div className="example-wrapper">
<div className="button-row">
<label className="toggle loading-toggle">
<input
type="checkbox"
checked={loading === true}
onChange={onLoadingToggle}
/>{" "}
Loading
</label>
<button onClick={setNoRowsOverlay}>
activeOverlay = agNoRowsOverlay
</button>
<button onClick={setCustomOverlay}>
activeOverlay = CustomOverlay
</button>
<button onClick={clearOverlay}>Hide activeOverlay</button>
</div>
<div className="grid-wrapper">
<AgGridReact
rowData={rowData}
columnDefs={columnDefs}
components={components}
loading={loading}
activeOverlay={activeOverlay}
/>
</div>
</div>
</AgGridProvider>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<GridExample />
</StrictMode>,
);
.example-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.button-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 12px;
}
.button-row button {
padding: 4px 12px;
}
.button-row .loading-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
user-select: none;
}
.grid-wrapper {
flex: 1 1 0;
min-height: 0;
}
.status-overlay {
padding: 16px;
border-radius: 16px;
border: 3px solid pink;
font-size: 32px;
}
import React from "react";
const StatusOverlay = () => {
return <div className="status-overlay">Custom</div>;
};
export default StatusOverlay;