React Data Grid: Get Started with AG Grid
import React, { useState } from 'react';
import { render } from 'react-dom';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
const App = () => {
const [rowData] = useState([
{make: "Toyota", model: "Celica", price: 35000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxster", price: 72000}
]);
const [columnDefs] = useState([
{ field: 'make' },
{ field: 'model' },
{ field: 'price' }
])
return (
<div className="ag-theme-alpine" style={{height: 400, width: 600}}>
<AgGridReact
rowData={rowData}
columnDefs={columnDefs}>
</AgGridReact>
</div>
);
};
render(<App />, document.getElementById('root'));
<div id="root"></div>
Please refer to our Compatibility Chart for Supported Versions of React & AG Grid.
Getting Started with Community Video
In this video we detail the steps to get an application working with React and AG Grid Community. We show how to set up Rows and Columns, set some Grid Properties, use the Grid's API and listen to Grid events.
Getting Started with Enterprise Video
The video then follows showing how to get started with AG Grid Enterprise. Please take a look at Enterprise, you don't need a license to trial AG Grid Enterprise, you only need to get in touch if you decide to use it in your project.
Getting Started with AG Grid Community
Below we provide code for a simple AG Grid React application. To get this working locally, create a new React application as follows:
npx create-react-app hello
cd hello
npm install --save ag-grid-community
npm install --save ag-grid-react
npm start
If everything goes well, npm start
has started the web server and conveniently opened a browser
pointing to localhost:3000.
Grid Dependencies
Note the package.json
has the following dependencies:
"dependencies": {
"ag-grid-community": "29.2.0",
"ag-grid-react": "29.2.0",
...
ag-grid-community
is the core logic of the Grid, and ag-grid-react
is the React Rendering Engine.
Both are needed for the grid to work with React and their versions must match.
Copy in Application Code
Copy the content below into the file App.js
:
import React, { useState, useRef, useEffect, useMemo, useCallback} from 'react';
import { render } from 'react-dom';
import { AgGridReact } from 'ag-grid-react'; // the AG Grid React Component
import 'ag-grid-community/styles/ag-grid.css'; // Core grid CSS, always needed
import 'ag-grid-community/styles/ag-theme-alpine.css'; // Optional theme CSS
const App = () => {
const gridRef = useRef(); // Optional - for accessing Grid's API
const [rowData, setRowData] = useState(); // Set rowData to Array of Objects, one Object per Row
// Each Column Definition results in one Column.
const [columnDefs, setColumnDefs] = useState([
{field: 'make', filter: true},
{field: 'model', filter: true},
{field: 'price'}
]);
// DefaultColDef sets props common to all Columns
const defaultColDef = useMemo( ()=> ({
sortable: true
}));
// Example of consuming Grid Event
const cellClickedListener = useCallback( event => {
console.log('cellClicked', event);
}, []);
// Example load data from server
useEffect(() => {
fetch('https://www.ag-grid.com/example-assets/row-data.json')
.then(result => result.json())
.then(rowData => setRowData(rowData))
}, []);
// Example using Grid's API
const buttonListener = useCallback( e => {
gridRef.current.api.deselectAll();
}, []);
return (
<div>
{/* Example using Grid's API */}
<button onClick={buttonListener}>Push Me</button>
{/* On div wrapping Grid a) specify theme CSS Class Class and b) sets Grid size */}
<div className="ag-theme-alpine" style={{width: 500, height: 500}}>
<AgGridReact
ref={gridRef} // Ref for accessing Grid's API
rowData={rowData} // Row Data for Rows
columnDefs={columnDefs} // Column Defs for Columns
defaultColDef={defaultColDef} // Default Column Properties
animateRows={true} // Optional - set to 'true' to have rows animate when sorted
rowSelection='multiple' // Options - allows click selection of rows
onCellClicked={cellClickedListener} // Optional - registering for Grid Event
/>
</div>
</div>
);
};
export default App;

We will now break this file down and explain the different parts...
Grid CSS and Themes
Two CSS files were loaded as follows:
import 'ag-grid-community/styles/ag-grid.css'; // Core grid CSS, always needed
import 'ag-grid-community/styles/ag-theme-alpine.css'; // Optional theme CSS
The first ag-grid.css
is always needed. It's the core structural CSS needed by the grid. Without this, the Grid will not work.
The second ag-theme-alpine.css
is the chosen Grid Theme. This is then subsequently applied to the Grid by including the Theme's CSS Class in the Grid's parent DIV className="ag-theme-alpine"
.
<div className="ag-theme-alpine" style={{width: 500, height: 500}}>
You can select from any of the Grid Provided Themes. If you don't like the provided themes you can Customise the Provided Theme or do not use a Theme and style the grid yourself from scratch.
The dimension of the Grid is also set on the parent DIV via style={{width: 500, height: 500}}
. The grid will fill 100% in both directions, so size it's parent element to the required dimensions.
Setting Row Data
The Grid is provided Row Data via the rowData
Grid Property. This is wired up using React useState()
hook and loading the data from the server.
const [rowData, setRowData] = useState(); // Set rowData to Array of Objects, one Object per Row
...
// Example load data from server
useEffect(() => {
fetch('https://www.ag-grid.com/example-assets/row-data.json')
.then(result => result.json())
.then(rowData => setRowData(rowData))
}, []);
...
<AgGridReact
rowData={rowData} // Row Data for Rows
...
/>
Setting Column Definitions
Columns are defined by setting Column definitions. Each Column Definition defines one Column. Properties can be set for all Columns using the Default Column Definition.
// Each Column Definition results in one Column.
const [columnDefs, setColumnDefs] = useState([
{field: 'make', filter: true},
{field: 'model', filter: true},
{field: 'price'}
]);
// DefaultColDef sets props common to all Columns
const defaultColDef = useMemo( ()=> ({
sortable: true
}));
...
<AgGridReact
columnDefs={columnDefs} // Column Defs for Columns
defaultColDef={defaultColDef} // Default Column Properties
...
/>
Accessing the Grid's API
const gridRef = useRef(); // Optional - for accessing Grid's API
// Example using Grid's API
const buttonListener = useCallback( e => {
gridRef.current.api.deselectAll();
}, []);
<AgGridReact
ref={gridRef} // Ref for accessing Grid's API
/>
Consuming Grid Events
Listen to Grid Events by adding a callback to the appropriate on[eventName]
property.
This example demonstrates consuming the cellClicked
event.
<AgGridReact
onCellClicked={cellClickedListener} // Optional - registering for Grid Event
...
/>
Grid Properties
Set other Grid Options by adding parameters to <AgGridReact/>
component.
This example demonstrates setting animateRows
and rowSelection
.
<AgGridReact
animateRows={true} // Optional - set to 'true' to have rows animate when sorted
rowSelection='multiple' // Options - allows click selection of rows
...
/>
Getting Started with AG Grid Enterprise
We would love for you to try out AG Grid Enterprise. There is no cost to trial. You only need to get in touch if you want to start using AG Grid Enterprise in a project intended for production.
The following steps continues from above and installs AG Grid Enterprise.
Install Dependency
In addition to ag-grid-community
and ag-grid-react
, AG Grid Enterprise also needs
ag-grid-enterprise
.
npm install --save ag-grid-enterprise
The package.json
should now contain the following dependencies:
"dependencies": {
"ag-grid-community": "29.2.0",
"ag-grid-enterprise": "29.2.0",
"ag-grid-react": "29.2.0",
...
ag-grid-enterprise
contains the Enterprise features only, it does not contain the core grid,
hence you still need ag-grid-community
and ag-grid-react
. Versions of all three must match.
Import Enterprise
Import AG Grid Enterprise intro your application as follows:
import 'ag-grid-enterprise';
And that is all, you use the same <AgGridReact/>
component, except this time it comes installed
with all the Enterprise features.
For example, you can now Row Group (an Enterprise Feature) by a particular Column by
setting rowGroup=true
on the Column Definition.
// Each Column Definition results in one Column.
const [columnDefs, setColumnDefs] = useState([
{field: 'make', rowGroup: true},
{field: 'model'},
{field: 'price'}
]);
AG Grid & React Compatibility Chart
React Version | AG Grid Versions |
---|---|
15.x | 18 - 21.2.0 |
16.3+ / 17+ | 22+ |
18+ | 27.2.0+ |
- Get Started with AG Grid
- Getting Started with Community Video
- Getting Started with Enterprise Video
- Getting Started with AG Grid Community
- Copy in Application Code
- Importing JS & CSS, Setting Theme & Style
- Grid Options
- Creating New Grid Instance
- Setting Row Data
- Accessing Grid's API
- Consuming Grid Events
- Getting Started with AG Grid Enterprise
- Getting Started with Community Video
- Getting Started with Enterprise Video
- Getting Started with AG Grid Community
- Grid Dependencies
- Copy in Application Code
- Grid Module
- Grid CSS and Themes
- Setting Row Data
- Setting Column Definitions
- Accessing the Grid's API
- Consuming Grid Events
- Grid Properties
- Getting Started with AG Grid Enterprise
- Install Dependency
- Import Enterprise
- Getting Started with Community Video
- Getting Started with Enterprise Video
- Getting Started with AG Grid Community
- Grid Dependencies
- Copy in Application Code
- Grid CSS and Themes
- Setting Row Data
- Setting Column Definitions
- Accessing the Grid's API
- Consuming Grid Events
- Grid Properties
- Getting Started with AG Grid Enterprise
- Install Dependency
- Import Enterprise
- AG Grid & React Compatibility Chart
- Getting Started with Community Video
- Getting Started with Enterprise Video
- Vue 2 vs Vue 3
- Getting Started with AG Grid Community
- Grid Dependencies
- Copy in Application Code
- Grid CSS and Themes
- Setting Row Data
- Setting Column Definitions
- Accessing the Grid's API
- Consuming Grid Events
- Grid Properties
- Getting Started with AG Grid Enterprise
- Install Dependency
- Import Enterprise