Expand All

  Getting Started

  Interfacing

  Features

  Row Models

  Themes

  Components

  Examples

Misc

Github stars make projects look great. Please help, donate a star, it's free.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Getting Started

Download ag-Grid

Bower
bower install ag-grid
bower install ag-grid-react
NPM
npm install ag-grid
npm install ag-grid-react
Github
Download ag-grid from Github
Download ag-grid-react from Github

Using ReactJS with ag-Grid introduces a dependency on React. For this reason:

  • You need to include the additional project ag-grid-react, which has the React dependency.
  • You cannot use the bundled version of ag-Grid. You must use the CommonJS distribution.

You have the option (but not forced) of using React Components internally in the grid for rendering, editing and filtering. The example has to applications as follows:

  • Standard - the standard is shown below and demonstrates using React Components for renderers, editors and filters.
  • Large - the large uses only one simple React Component for rendering the entire grid and the grid has many rows and columns and fills the entire web page. This project is proof of concept that ag-Grid can manage large data when using React to render. If you are having performance issues in your React application, it's not because of ag-Grid.

ag-Grid React Features

Every feature of ag-Grid is available when using the ag-Grid React Component. The React Component wraps the functionality of ag-Grid, it doesn't duplicate, so there will be no difference between core ag-Grid and React ag-Grid when it comes to features.

Configuring AgGridReact Component

The root of the example application is MyApp.jsx. At the top of this file you can see the import the AgGridReact component as follows:

import {AgGridReact} from 'ag-grid-react';
After the import you can then reference the component inside your JSX definitions. See the render() function in MyApp.jsx, it has AgGridReact defined as follows (Make sure that you set the height for the parent element of ` `):
<AgGridReact

    // listen for events with React callbacks
    onRowSelected={this.onRowSelected.bind(this)}
    onCellClicked={this.onCellClicked.bind(this)}

    // binding to properties within React State or Props
    showToolPanel={this.state.showToolPanel}
    quickFilterText={this.state.quickFilterText}
    icons={this.state.icons}

    // column definitions and row data are immutable, the grid
    // will update when these lists change
    columnDefs={this.state.columnDefs}
    rowData={this.state.rowData}

    // or provide props the old way with no binding
    rowSelection="multiple"
    enableSorting="true"
    enableFilter="true"
    rowHeight="22"
/>

Loading CSS

You need 1) the core ag-Grid css and 2) a theme. These are stored in css files packaged in the core ag-Grid. To access them, first up we need to define an alias to use inside webpack.config.js:

alias: {
    "ag-grid-root" : __dirname + "/node_modules/ag-grid"
}
Once this is done, we can then access the two css files that we need as follows:
import 'ag-grid-root/dist/styles/ag-grid.css';
import 'ag-grid-root/dist/styles/theme-fresh.css';
You will also need to configure CSS loaders for Webpack.

Applying Theme

You need to set a theme for the grid. You do this by giving the grid a CSS class, one of ag-fresh, ag-blue or ag-dark. You must have the CSS loaded as specified above for this to work.

// a parent container of the grid, you could put this on your body tag
// if you only every wanted to use one style of grid

// HTML
<div class="ag-fresh">
    ...

// OR JSX
<div className="ag-fresh">
    ...

    // then later, use the grid
    <AgGridReact
        ...

Grid API

When the grid is initialised, it will fire the gridReady event. If you want to use the API of the grid, you should put an onGridReady(params) callback onto the grid and grab the api from the params. You can then call this api at a later stage to interact with the grid (on top of the interaction that can be done by setting and changing the props).

// provide gridReady callback to the grid
<AgGridReact
    onGridReady={this.onGridReady.bind(this)}
    .../>

// in onGridReady, store the api for later use
onGridReady(params) {
    this.api = params.api;
    this.columnApi = params.columnApi;
}

// use the api some point later!
somePointLater() {
    this.api.selectAll();
    this.columnApi.setColumnVisible('country', visible);
}

The api and columnApi are also stored inside the React backing object of the grid. So you can also look up the backing object via React and access the api and columnApi that way.