ag-Grid with React 15.x.x

Version 21.2.0 of AgGridReact is the last version that supports both React 15.x.x and React 16.x.x.

Version 22 onwards of AgGridReact will support React 16+ only.

Control React Components Container

By default user supplied React components will be rendered with a div container but it is possible to have your specify a container (i.e. a div, span etc), perhaps to override/control a third party component.

For example, assuming a user component as follows:

class CellRenderer extends Component { render() { return(

Age: {props.value}

) } }

The default behaviour will render the following within the grid:

<div class="ag-react-container"><span>Age: 24</span></div>

In order to override this default behaviour and can specify a componentWrappingElement:

<AgGridReact onGridReady={this.onGridReady} rowData={this.state.rowData} componentWrappingElement='span' ...other properties

Doing this would result in the following being rendered:

<span class="ag-react-container"><span>Age: 24</span></span >

If you wish to override the style of this div you can either provide an implementation of the ag-react-container class, or via the getReactContainerStyle or getReactContainerClasses callbacks on the React component:

export default class CustomTooltip extends Component { getReactContainerClasses() { return ['custom-tooltip']; } getReactContainerStyle() { return { display: 'inline-block', height: '100%' }; }

Would result in the following being rendered:

<div class="ag-react-container custom-tooltip" style="display: inline-block; height: 100%" > <span>Hello World</span> </div>