Get started with React Grid in 5 minutes

The fastest and most feature-rich React grid component from ag-Grid

React Grid Demo

We’re all familiar with the paradigm of a data grid — a component used for displaying tabular data in a series of rows and columns. Excel is probably the most common example of a data grid on Desktop. For a long time grids have been a part of native platforms SDKs and have recently made their way into web app UIs.

Because of the modern grids complexity and the costs of development most companies and software engineers choose 3rd party products. Luckily, there’s an abundance of data grids on the market available for free or as paid subscriptions. But how do you choose one?

Well, if a grid meets the requirements for features and performance, developers than look at the ease of integration and configuration. Extensive documentation that covers all features and provides elaborate examples makes the choice even easier.

Our React datagrid component is where you’ll find that all.

It’s based on the fastest and most feature rich grid out there — ag-Grid. The grid was specifically designed to handle enterprise level data volumes and is packed with features required by most use cases. We’ve also put extra efforts into the documentation to ensure that every little detail is covered.

The React grid UI interactions are based on familiar Excel functionality which makes it easy for your users to get started with the grid. Because of that mimicking the grid is also referred to as React DataGrid or React table component.

This article describes the React grid example and shows you how easy it is to integrate and configure it. It’s a 5 minute getting started guide with examples that you can copy/paste and hit the ground running. Once we’ve got our basic setup ready, I’ll show you a few features and configuration options that control them. Here’s a sneak peek of what the finished product will look like:

So let’s start the ball rolling!

Integration

ag-Grid and its React grid component are distributed as NPM packages, which means they’ll work with any common React project bundler setup. Integrating ag-Grid is a matter of simply importing AgGridReact class component and referencing <AgGridReact> in the container component’s template.

You can download the sample that we’ll be building in this article from github repository.

To speed up things, we are going to scaffold a react app with create-react-app CLI tool so that you don’t need to worry about bootstrapping or tooling setup. So let’s run the following commands in your terminal:

npx create-react-app my-react-app
cd my-app
npm start

If everything goes well, npm start has started the web server and conveniently opened a browser pointing to localhost:3000.

As a next step, let’s add the ag-Grid NPM packages. Run the following command in my-app (you may need a new instance of the terminal):

npm install --save ag-grid-community ag-grid-react react-dom-factories

We now have a fully bootstrapped React app with React Data Grid component ready for use.

Add AgGridReact to a template

To access the component, we’re importing AgGridReact:

import { AgGridReact } from 'ag-grid-react';

and a few style sheets with ag-Grid theming:

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';

We can now use AgGridReact directly in JSX markup of the App container component. Open src/App.js in your favorite text editor and add the AgGridReact component to the markup:

The JSX code above defines a wrapper DIV element which sets the grid dimensions and specifies the grid's theme by setting the className to ag-theme-balham. As you may have noticed, the CSS class matches the name of CSS file we imported earlier. The grid ships several different themes that can be further customized with exported SASS variables.

Define configuration

To instantiate the grid, you need to define two essential configuration properties — the column definitions and the data. In the markup above they are specified as columnDefs and rowData component properties. So let’s add these properties to the component’s state:

In our case, the column definitions contain three columns “Make”, “Model” and “Price”; each column entry specifies the header label and the data field to be displayed in the body of the table. The actual data is defined in the rowData as an array of objects. Notice that the fields of the objects match the field values in the columnDefs configuration object. That’s the way to bind configuration and data in ag-Grid.

So here is a complete src/App.js for you to copy and paste into your local project:

If you now run the example you should see the data shown:

And that’s it! You’ve just integrated our grid component into your React application. Let’s now see how easy it is to configure features in the grid.

Set data dynamically

In the real world, most of the time, we are dealing with data that resides on a remote server. So instead of hard coding a data set, we’ll need to update it dynamically. Thanks to React, implementing this is actually quite simple. We need to update a component property with data bound to AgGridReact. In our example it’s the rowData property in the component’s state. The actual data fetching is performed outside of the grid component.

So here’s an alternative setup:

In the code above we’re requesting the data with the Fetch API and dynamically updating the rowData property. React will synchronize the new value of the property to the grid and we should see the new dataset rendered in the grid. If, instead of initializing the rowData property with an empty array, you don’t specify it at all, the grid will show the Loading... text until you set the property with a value and the rows are updated.

Enabling features

Among the most common features of the modern grids are Sorting, Filtering and Pagination. They allow a user to zoom in on a particular set of records out of the entire dataset that a real-world application may have. Our React grid also provides rich inline editing experience so your users can update any record in a dataset with just a few clicks.

React Datagrid Sorting

Enabling sorting in ag-Grid is actually quite simple — all you need to do is set the enableSorting property to true on the AgGridReact component:

<AgGridReact
enableSorting={true}
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}>
</AgGridReact>

After adding the property, you should be able to sort the grid by clicking on the column headers. Doing so toggles through ascending, descending and no-sort states.

React Datagrid Filtering

As with sorting, enabling filtering is as easy as setting the enableFilter property to true:

<AgGridReact
enableFilter={true}
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}>
</AgGridReact>

With this property is set, the grid will display a small column menu icon when you hover over the header. Pressing it will display a popup with filtering UI which lets you choose the kind of filter and the text that you want to filter by.

This filtering UI and logic can easily be customized to implement your use case.

React Datagrid Pagination

To enable pagination in our React grid, all you need to do is set the pagination property to true on the AgGridReact component.:

<AgGridReact
pagination={true}
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}>
</AgGridReact>

After adding the property, you should be able to move through the pages by using the controls at the bottom of the grid:

By default the grid uses the pages size of 100 records, but it can easily be changed through configuration options.

React Datagrid Editable Cells

To make the React grid editable you just need to specify editable=true for a particular column definition. All records in this column will become editable. For example, to enable inline editing of a car’s price, we need to make the following changes:

this.state = {
columnDefs: [
{headerName: 'Make', field: 'make'},
{headerName: 'Model', field: 'model'},
{headerName: 'Price', field: 'price', editable: true}
],
...
}

And we are now able to edit the price:

ag-Grid comes with a bunch of built-in cell editors but if required you can easily create your own to suit your business needs.


Build Your Own React App With ag-Grid!

I hope that the examples above clearly demonstrated how easy it is to integrate and configure our React grid.

Now take the next step and start using ag-Grid in your project!

You’ll see it for yourself how fast and extensible the grid is and what makes it the best React datagrid in the world.

Join the millions of developers and thousands of companies who use ag-Grid to provide the best possible experience to their users.


Learn more about ag-Grid and React

The latest update of the grid is out now.

Learn more about Version 18 of ag-Grid.