Get started with React Grid in 5 minutes

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

Max Koretskyi
Aug 7, 2018 · 7 min read
Image for post
Image for post
eveReact Grid Demo
Image for post
Image for post

Integration

npx create-react-app my-react-app
cd my-app
npm start
npm install --save ag-grid-community ag-grid-react react-dom-factories

Add AgGridReact to a template

import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';

Define configuration

Image for post
Image for post

Set data dynamically

Enabling features

React Datagrid Sorting

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

React Datagrid Filtering

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

React Datagrid Pagination

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

React Datagrid Editable Cells

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

Build Your Own React App With ag-Grid!

Learn more about ag-Grid and React

ag-Grid

We are ag-Grid and our mission is to build the best…

Max Koretskyi

Written by

Founder of inDepth.dev community. Passionate about Mentorship, TechEd and WebDev. Angular & React contributor.

ag-Grid

ag-Grid

We are ag-Grid and our mission is to build the best datagrid in the world

Max Koretskyi

Written by

Founder of inDepth.dev community. Passionate about Mentorship, TechEd and WebDev. Angular & React contributor.

ag-Grid

ag-Grid

We are ag-Grid and our mission is to build the best datagrid in the world

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store