maxkoretskyi

let columnDefs = [
    {
        headerName: 'Athlete',
        field: 'athlete',
        tooltipField: 'athlete'
    },
    ...
]

maxkoretskyi

let columnDefs = [
        {
            headerName: 'Athlete', 
            field: 'athlete', 
            tooltipField: 'athlete'
        },
        ...
]

maxkoretskyi

let columnDefs = [
    {
        field: "age",
        width: 90,
        filter: 'agNumberColumnFilter',
        filterParams: {
            filterOptions: [
                'greaterThan',
                {
                    displayKey: 'greaterThanWithNulls',

maxkoretskyi

let columnDefs = [
    {
        field: "age",
        width: 90,
        filter: 'agNumberColumnFilter',
        filterParams: {
            filterOptions: [
                'lessThan',
                'greaterThan'
            ]

maxkoretskyi

let gridOptions = {
    loadingCellRenderer: 'customLoadingCellRenderer',
    components: {
        customLoadingCellRenderer: CustomLoadingCellRenderer,
    },
    ...
}

maxkoretskyi

class CustomLoadingCellRenderer {
    init(params) {
        const text = 'One moment please...';
        this.eGui = document.createElement('div');
        this.eGui.innerHTML =
            '<div class="ag-custom-loading-cell">' +
            '   <i class="fas fa-spinner fa-pulse"></i> <span>' + text + ' </span>' +
            '</div>';
    }

maxkoretskyi

class CustomLoadingCellRenderer {
    init(params) {
        this.eGui = document.createElement('div');
        this.eGui.innerHTML =
            '<div class="ag-custom-loading-cell" style="padding-left: 10px; line-height: 25px;">' +
            '   <i class="fas fa-spinner fa-pulse"></i> <span>' + params.loadingMessage + ' </span>' +
            '</div>';
    }
    
    getGui() {

maxkoretskyi

let gridOptions = {
    defaultColDef: {
        ...
        tooltipComponent: 'customTooltip'
    },
    components: {
        customTooltip: CustomTooltip,
    },
    ...
};

maxkoretskyi

class CustomTooltip {
    init(params) {
        var eGui = this.eGui = document.createElement('div');
        var color = params.color || 'white';
        var data = params.api.getRowNode(params.rowIndex).data;
        
        eGui.classList.add('custom-tooltip');
        eGui.style['background-color'] = color;
        eGui.innerHTML =
            '<p><span class"name">' + data.athlete + '</span></p>' +

maxkoretskyi

this._componentRef = this.createComponent();
this._agAwareComponent = this._componentRef.instance;
this._frameworkComponentInstance = this._componentRef.instance;
this._eGui = this._componentRef.location.nativeElement;