Styling React Components in ag-Grid

By default user supplied React components will be wrapped in a div but it is possible to have your component wrapped in a container of your choice (i.e. a 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>Hello World</span></div>

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

<AgGridReact onGridReady={this.onGridReady} rowData={this.state.rowData} componentWrappingElement='span'> </AgGridReact>

Doing this would result in the following being rendered:

<span class="ag-react-container"><span>Hello World</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>