Move a row to the top/bottom or at any index 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.

There is feature called **Row Pinning** in ag-Grid. Would that help ? - https://www.ag-grid.com/javascript-grid-row-pinning/ — abd995, Dec 09 '19 at 13:46

score 0 · Answer 1 · answered Feb 07 '21 at 12:13

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.

Move a row to the top/bottom or at any index ag-grid react

1 Answers1