Ag-grid master detail prevent detail row from closing on data refresh

I'm currently doing a trial on AG-Grid master detail feature. Things are working fine but my data will be refreshed every 10 seconds. This caused the details to close when the data is refresh and I have to open the detail rows again.

Are there any options to save the state of the details that was opened?

Plunkr

Data is set to refresh every 5 seconds , expand the detail row and when the data refreshes the detail will be collapse. I've set rememberGroupStateWhenNewData : true

https://plnkr.co/edit/SgYD3vH8CXW9W9B8HD6N?p=preview

var gridOptions = {
rememberGroupStateWhenNewData:true,
columnDefs: columnDefs,
masterDetail: true,
detailCellRendererParams: {
    detailGridOptions: {
        rememberGroupStateWhenNewData:true,
        columnDefs: [
            {field: 'callId'},
            {field: 'direction'},
            {field: 'number'},
            {field: 'duration', valueFormatter: "x.toLocaleString() + 's'"},
            {field: 'switchCode'}
        ],
        onFirstDataRendered(params) {
            params.api.sizeColumnsToFit();
        }
    },
    getDetailRowData: function (params) {
        params.successCallback(params.data.callRecords);
    }
},
onFirstDataRendered(params) {
    params.api.sizeColumnsToFit();
}

};

Solution

The problem is that you're using api.setRowData to update the data.

https://www.ag-grid.com/javascript-grid-data-update/

This is the simplest of the update methods. When you call api.setRowData(newData), the grid discards all previous selections and filters, and completely overwrites the old data with the new. This was the first way the grid worked and is the most 'brute force' way.

Use this method if you want to load the grid with a brand new set of data.

This description does not match what you're trying to do, so you should use one of the other methods. Try api.updateRowData(transaction), there are plenty of examples for it in the demos.