[SOLVED] Filters and Sorting not retaining in AG GRID React on re-render

Filters and Sorting not retaining in AG GRID React on re-render

I can't copy the whole code here. So I have a react component in which I am using 2 blocks of code (dashboard and details). I am conditionally rendering both block. Block 1 contains an AG grid react. On right-clicking on a row and selecting an option I am displaying block 2 (details of the row) and hiding the block1.

`**dashboard.js**

<div>
    // block 1
    {isMainVisible && <div>
        <AgGridtable>
        </AgGridtable>
    </div>}

    // block2
    {!isMainVisible && <DetaildDashboard />}

    </div>

 **AgGridTable.js**

<div>
        <agGridReact>

        </agGridReact>
    </div>
    enter code here
</div>`

When i am switching to DetaildDashboard component i am setting the isMainVisible to false. And when i am switching back to MainDashboard the filters and sorts in AG grid react is not retaining.(Bacause the component is re rendering).

I am using Ag-grid-react 30.1.0 version. onUpdateState and initialState props in AgGridReact component seem to be not in version 30.1.0. And somehow the api.getFilterModel() is coming out to be undefined for me.

Solution

Instead of destroying and creating the grid again, how about hiding it using hidden attribute, if we do not destroy the table the filter and sort will remain untouched.

// block 1
<>
<div hidden={isMainVisible}>
    <AgGridtable>

    </AgGridtable>
</div>

// block2
{!isMainVisible && <DetaildDashboard />}

</>