How to overlay control on top of a row in ag-grid?

Question

I have a requirement to add a specific control on top of rows that contain data that matches specific criteria. Those criteria are missing required information that needs to be added with an inline editing feature. What we want is a navigation control that seats on top of the first matching row and that leads you to the next one by clicking on "next", which will make the grid scroll up to the next matching row which will display another control on top and above allowing to navigate to next matching row or go to previous.

So let's say we have a list of cars, and we want the user to navigate over the rows of cars that have a price lower or equals to 45k, you'll see something like:

On the next click you'll see something like:

I believe in order to have this feature, I would need a reference to the rows and inject a component in the DOM relative to each row on click. But I'm not sure how to do that. I've attempted to dynamically add the component to the native element of the first matching row like this:

  onGridReady(params) {
    this.api = params.api;
    this.columnApi = params.columnApi;

    params.api.forEachNode((node, index) => {
      if(node.data.price <= 45000) {
        this.matchingIndexes.push(index);
      }
    });

    let firstRowRef = this.gridElementRef.nativeElement.querySelectorAll(`[row-index="${this.matchingIndexes[0]}"]`)[1];
    
    const factory = this.factoryResolver.resolveComponentFactory(PagingOverlayComponent)
    const component = factory.create(firstRowRef.parentInjector)
    this.viewContainerRef.insert(component.hostView);
  }

I want to be able to insert the component somehow in relation to the row it has to be attached so I can position it over it. This is the farthest I have been able to go:

Any ideas on how can I achieve this?

Please find a working stackblitz here

Answer 1

We did something fairly similar to this for an application in our bank, but we are using AdapTable which is a component that sits on top of ag-Grid.

That has a search function which includes an option just to return all result sets. It also has api methods to jump to a cell and highlight a cell. So we created something very similar to this and each time you clicked the arrow we got AdapTable to highlight and jump to the relevant cell in ag-Grid.

It was quite easy to implement - a couple of hours at most - but as I say we used AdapTable and not ag-Grid directly and I don't know what that does internally to return the search result set to us.