title: How to capture the row hover event in ag-grid?
body: <p>I was going through the documentation of ag-grid and looks like there is no event to capture the row hover event for the grid. My requirement is to display the image on the first column when the user hovers on the row. It might be on any column of the row, not necessarily the first cell. I'm using a cell-renderer and cell-editor and performing certain actions. (For simplicity, I didn't post the cell editor code in the plunker link)How can I achieve this? </p>
  
  <p>Please see the plunkr example: <a href="https://plnkr.co/edit/NfuGp3iVheuCqglz" rel="noreferrer">https://plnkr.co/edit/NfuGp3iVheuCqglz</a></p>
  
  <p>app.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import 'ag-grid-community/dist/styles/ag-grid.css';
  import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
  import {KaboobMenuComponent} from './kaboob-menu.component';
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;ag-grid-angular
        #agGrid
        style="width: 100%; height: 100%;"
        id="myGrid"
        class="ag-theme-alpine"
        [columnDefs]="columnDefs"
        [defaultColDef]="defaultColDef"
        [rowData]="rowData"
        (gridReady)="onGridReady($event)"
         [frameworkComponents]="frameworkComponents"
      &gt;&lt;/ag-grid-angular&gt;
    `,
  })
  export class AppComponent {
    private gridApi;
    private gridColumnApi;
  
    private columnDefs;
    private defaultColDef;
    private rowData: [];
    public frameworkComponents;
  
    constructor(private http: HttpClient) {
      this.columnDefs = [
        {
          headerName: 'Participant',
          children: [
            {
          headerName: '',
          filter: false,
          sortable: false,
          editable: true,
          singleClickEdit: true,
          cellRenderer: 'kaboobRenderer',        
        },
            { field: 'athlete' },
            {
              field: 'age',
              maxWidth: 90,
            },
          ],
        },
        {
          headerName: 'Details',
          children: [
            { field: 'country' },
            {
              field: 'year',
              maxWidth: 90,
            },
            { field: 'date' },
            { field: 'sport' },
          ],
        }     
      ];
      this.defaultColDef = {
        flex: 1,
        minWidth: 150,
        resizable: true,
      };
      this.frameworkComponents = {
        kaboobRenderer: KaboobMenuComponent
      };
    }
  
    onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;
  
      this.http
        .get(
          'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/olympicWinners.json'
        )
        .subscribe(data =&gt; {
          this.rowData = data;
        });
    }
  }
  </code></pre>
  
  <p>kaboob-menu.component.ts (My Custom Renderer)</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-kaboob-menu',
    template: `&lt;img border="0" width="15" height="10" src="https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/images/smiley.png"/&gt;`,  
  })
  export class KaboobMenuComponent implements OnInit {
    params: any;
    rowData: any;
    display = true;
  
    constructor() { }
  
    agInit(params) {
      this.params = params;
      this.rowData = params.data;    
    }
  
    ngOnInit() {
    }
  
    onClick($event) {
      if (this.params.onClick instanceof Function) {
        const params = {
          event: $event,
          rowData: this.params.node.data
        };
        this.params.onClick(params);
      }
    }
  }
  </code></pre>
  
  <p>I'm using cellMouseOver event. But, this event is fired when we hover on the first column and not on any other columns. I want to capture the row hover event.
  <br/>
  <br/>
  Any direction would be appreciated. Thanks in advance!!</p>