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 ? - ag-grid.com/javascript-grid-row-pinning — abd995

Teja MS Teja MS · Accepted Answer · 2021-02-07T12:13:45

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 Answers