In this article, we will show you how to set datasource to server side React AG Grid. Here, we will walk you through the process of setting up an external datasource to the server side AG Grid.

Here, we will add button to set the external datasource to the AG Grid on button click event.

Demo Application

Package Version

Steps to set datasource to server side React AG Grid

1. Add AG Grid in React component
2. Create server side AG Grid
3. Render the button to set the external datasource
4. Output

1. Add AG Grid in React component

Let’s create a react application using the create-react-app and implement AG Grid in React. Check the following article for more information.

How to implement AG Grid in React

2. Create server side AG Grid

In the next step, we need to implement the REST API to render the AG Grid. Refer to the following article to implement server side AG Grid.

Implement server side pagination in React AG Grid

3. Render the button to set the external datasource

Let’s add the button to set external datasource to React AG Grid on button click. Here, we’ll use the following JSON data to render in Grid. Ensure that the external data source is in the same format as the listed columns.

Now, we have to use the setDatasource() method to set the data dynamically on button click. Check the following code.

Invoke the above function on button click and you will notice that the grid will change.

4. Output

Run the application and check the output in the browser.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code