Ag-grid custom tooltip with functional component

Question

I am looking at ag-Grid's example on creating a custom tooltip.

import React, {Component} from 'react';

export default class CustomTooltip extends Component {
    getReactContainerClasses() {
        return ['custom-tooltip'];
    }

    render() {
        const data = this.props.api.getDisplayedRowAtIndex(this.props.rowIndex).data;
        return (
            <div className="custom-tooltip" style={{backgroundColor: this.props.color || 'white'}}>
                <p><span>{data.athlete}</span></p>
                <p><span>Country: </span> {data.country}</p>
                <p><span>Total: </span> {data.total}</p>
            </div>
        );
    }
}

According to ag-Grid's react component page, "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:"

How would I go about creating a custom tooltip using a functional component? I am not sure how I would provide an implementation of the getReactContainerClasses callback.

Paul Paul · Accepted Answer · 2020-02-15T01:06:32

You won't be able to have the public function getReactContainerClasses in a functional component, you'd need to write a class component. If you want to write a functional component, just set the CSS class directly on the container DOM element, similarly to their vanilla JS example. Below is a functional tooltip example which sets the class custom-tooltip.

import React, {Component} from 'react';

export const FunctionalCustomTooltip = (props) => {
    props.reactContainer.classList.add('custom-tooltip');

    const data = props.api.getDisplayedRowAtIndex(props.rowIndex).data;
    return (
        <div className="custom-tooltip" style={{backgroundColor: props.color || 'white'}}>
            <p><span>{data.athlete}</span></p>
            <p><span>Country: </span> {data.country}</p>
            <p><span>Total: </span> {data.total}</p>
        </div>
    );
};

Fully working example: https://plnkr.co/edit/WHEgtw0YVia1BVP4SVO8?p=preview

Ag-grid custom tooltip with functional component

1 Answers