将一行移动到顶部/底部或任何索引 ag-grid react

Question

I have been trying to move a particular row to the top of the grid, but unable to find any solution. There is a default feature (Dragging row) available in the grid, which is not needed in this case. I have added a button using cell renderer and clicking to that button, the row should move to the top .

{
    headerName: "", field: "move",
    cellRenderer: (params) => {
        let eGui = document.createElement('div');
        let imageElement = document.createElement("img");
        imageElement.src = moveTopIcon;
        eGui.appendChild(imageElement);
        eGui.addEventListener('click', e => {
            //code to move the row
        });
        return eGui;
    }
}

Here is the column definition where button is placed.

Answer 1

I'm not sure whether AG-Grid has some hook to do that;

But you can achieve using the following approach:

On Click of button : Get the item you have clicked using event handler & Modify the row Data such that it's in top (index =0) . Let me know if this helps.