Column Configuration

After importing AgGridReact you can then reference the component inside your JSX definitions. An example of the Grid Component can be seen below:

// Grid Definition <AgGridReact // listening for events onGridReady={this.onGridReady} // binding to array properties rowData={this.state.rowData} // no binding, just providing hard coded strings for the properties // boolean properties will default to true if provided (ie animateRows => animateRows="true") rowSelection="multiple" animateRows // setting grid wide date component dateComponentFramework={DateComponent} // setting default column properties defaultColDef={{ headerComponentFramework: SortableHeaderComponent, headerComponentParams: { menuIcon: 'fa-bars' } }}> // column definitions <AgGridColumn field="make"></AgGridColumn> </AgGridReact>>

Configuring the Columns

Columns can be defined in three ways: declaratively (i.e. via markup), via GridOptions or by binding to columnDefs on the AgGridReact component.

In all cases all column definition properties can be defined to make up a column definition.

Defining columns declaratively:

<AgGridReact rowData={this.state.rowData}> <AgGridColumn field="make"></AgGridColumn> <AgGridColumn field="model"></AgGridColumn> <AgGridColumn field="price"></AgGridColumn> </AgGridReact>

Defining columns via GridOptions:

constructor(props) { super(props); this.state = { gridOptions = { columnDefs: [ {make: "Toyota", model: "Celica", price: 35000}, {make: "Ford", model: "Mondeo", price: 32000}, {make: "Porsche", model: "Boxter", price: 72000} ] } }; } render() { return ( <AgGridReact gridOptions={this.state.gridOptions}></AgGridReact> ) }

Defining columns by binding to a property:

constructor(props) { super(props); this.state = { columnDefs: [ {make: "Toyota", model: "Celica", price: 35000}, {make: "Ford", model: "Mondeo", price: 32000}, {make: "Porsche", model: "Boxter", price: 72000} ] }; } render() { return ( <AgGridReact columnDefs={this.state.columnDefs}></AgGridReact> ) }

A full working Grid definition is shown below, illustrating various Grid & Column property definitions:

<AgGridReact // listening for events onGridReady={this.onGridReady} // binding to array properties rowData={this.state.rowData} // no binding, just providing hard coded strings for the properties // boolean properties will default to true if provided (ie animateRows => animateRows="true") rowSelection="multiple" animateRows // setting grid wide date component dateComponentFramework={DateComponent} // setting default column properties defaultColDef={{ sortable: true, filter: true, headerComponentFramework: SortableHeaderComponent, headerComponentParams: { menuIcon: 'fa-bars' } }}> <AgGridColumn headerName="#" width={30} checkboxSelection suppressMenu pinned></AgGridColumn> <AgGridColumn headerName="Employee" headerGroupComponentFramework={HeaderGroupComponent}> <AgGridColumn field="name" cellEditorFramework={NameCellEditor}></AgGridColumn> <AgGridColumn field="country" filterParams={{cellRenderer: CountryCellRenderer, cellHeight:20}}> </AgGridColumn> </AgGridColumn> </AgGridReact>

Working Examples

You can find fully working examples at our ag Grid React Example.