How to dynamically update the overlayNoRowsTemplate in AG Grid?

Question

In AG Grid I am able to specify a custom template for the no rows overlay:

<AgGridReact 
    ...
    overlayNoRowsTemplate={'My funky message about no rows'}
/>

But I would like to dynamically change this, especially when an error occurs. For example:

• Unable to connect to server.
• No rows to show due to error xyz.

Is it possible to dynamically change the overlayNoRowsTemplate?

Answer 1

Pass a state variable to the template:

const [message, setMessage] = useState('My funky message about no rows');

 <AgGridReact
    // ...
    overlayNoRowsTemplate={message}
  >
</AgGridReact>

Change it based on a button click:

const onBtShowLoading = useCallback(() => {
  setMessage('unable to connect to server')
}, [])

See this implemented in the following plunkr.