React Data GridOverlay Component
Overlay components allow you to add your own overlays to AG Grid. Use these when the provided overlays do not meet your requirements.
Below is an example of overlay component with custom loadingMessage
param as a Hook:
export default props => {
return (
<div className="ag-custom-loading-cell" style={{paddingLeft: '10px', lineHeight: '25px'}}>
<i className="fas fa-spinner fa-pulse"></i> <span> {props.loadingMessage}</span>
</div>
);
};
const gridOptions: GridOptions = {
...
loadingOverlayComponent: CustomLoadingOverlay,
loadingOverlayComponentParams: {
loadingMessage: 'One moment please...',
},
}
And here is the same example as a Class-based Component:
export default class CustomLoadingOverlay extends Component {
render() {
return (
<div className="ag-overlay-loading-center" style={{backgroundColor: 'lightsteelblue', height: '9%'}}>
<i className="fas fa-hourglass-half"> {this.props.loadingMessage} </i>
</div>
);
}
}
const gridOptions: GridOptions = {
...
loadingOverlayComponent: CustomLoadingOverlay,
loadingOverlayComponentParams: {
loadingMessage: 'One moment please...',
},
}
Below is an example of a no rows overlay component with custom noRowsMessageFunc()
params as a Hook:
export default props => {
return (
<div className="ag-overlay-loading-center" style={{backgroundColor: 'lightcoral', height: '9%'}}>
<i className="far fa-frown"> {props.noRowsMessageFunc()}</i>
</div>
);
};
const gridOptions: GridOptions = {
...
noRowsOverlayComponent: CustomNoRowsOverlay,
noRowsOverlayComponentParams: {
noRowsMessageFunc: () => 'Sorry - no rows! at: ' + new Date(),
},
}
And here is the same example as a Class-based Component:
export default class CustomNoRowsOverlay extends Component {
render() {
return (
<div className="ag-overlay-loading-center" style={{backgroundColor: 'lightcoral', height: '9%'}}>
<i className="far fa-frown"> {this.props.noRowsMessageFunc()}</i>
</div>
);
}
}
const gridOptions: GridOptions = {
...
noRowsOverlayComponent: CustomNoRowsOverlay,
noRowsOverlayComponentParams: {
noRowsMessageFunc: () => 'Sorry - no rows! at: ' + new Date(),
},
}
The example below demonstrates how to provide custom overlay components to the grid. Notice the following:
- Custom Loading Overlay Renderer is supplied by name via
gridOptions.loadingOverlayComponent
. - Custom Loading Overlay Renderer Parameters are supplied using
gridOptions loadingOverlayComponentParams
. - Custom No Rows Overlay Renderer is supplied by name via
gridOptions.noRowsOverlayComponent
. - Custom No Rows Overlay Renderer Parameters are supplied using
gridOptions.noRowsOverlayComponentParams
.
Any valid React component can be an Overlay. When a custom Overlay Component is instantiated within both a template and the Grid API will be made available on props
:
ILoadingOverlayParams
Properties available on the ILoadingOverlayParams<TData = any, TContext = any>
interface.
| The grid api. | |
| The column api. | |
| Application context as set on gridOptions.context . |
INoRowsOverlayParams
Properties available on the INoRowsOverlayParams<TData = any, TContext = any>
interface.
| The grid api. | |
| The column api. | |
| Application context as set on gridOptions.context . |
See the section registering custom components for details on registering and using custom overlays.