Primeng: DataTable expanded rows collapse when source updated

[johnhwright]

I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
http://embed.plnkr.co/NPbi6pd1uCBFTUgYRGvU/

Current behavior
If you update the items in an array to point towards new items* any expanded rows are collapsed and the column values don't update (Note that paging/sorting at this point will actually cause the values to be refreshed and display correctly).

I'm wondering if this has something to do with the rowTrackBy function, as removing that function allows the values to now be updated (without having to page), but any expanded rows still collapse. I have a large dataset and there are certain actions that makes an http request and receives the updated version of the table which I want to display, but I also need any currently expanded rows to remain expanded.

*Just to be clear, I'm talking about setting the reference at that index to point to a different object: this.source[0] = { id: 1, etc... } ; Not just changing the property value of one of the items,

Expected behavior
I expect any expanded rows to stay expanded when the source is updated.

Minimal reproduction of the problem with instructions
See plnkr

• Angular version: 4.1.X
  

• PrimeNG version: 4.0.X

• Browser: all
  

• Language: all

[chrisdl]

I was having this issue as well. Heres my workaround, hopefully it is useful while we all wait for the real solve.

preserveExpandedRows(datatableRef, id, tableData): void {
    try {
        const expandedIds = datatableRef.expandedRows.map(x => x[id]);
        datatableRef.expandedRows = tableData.filter(x => expandedIds.includes(x[id]));
    } catch (error) {
        if (error.name !== 'TypeError') throw error;
    }
}

// Wherever you are subscribing to getting the new data as you are updating the data also do this.
preserveExpandedRows(this.datatable, 'id', newTableData);

We look out for the expandedRows property not existing and ignore that error. Meaning if there are no expandedRows just fail and ignore that specific error. If there are expanded rows, grab something unique about them and find the new objects on the incoming table data to populate the expandedRows with them instead.

Hope that helps as a band-aid for now.

[pantonis]

Any news on this bug?

[Shiiboun]

I am runing into the same error. Any updates would be nice.

[pantonis]

I found the cause of the issue. It is not actually a code bug but rather a problematic design and implementation of expand functionality.

findExpandedRowIndex(row: any): number {
        let index = -1;
        if(this.expandedRows) {
            for(let i = 0; i < this.expandedRows.length; i++) {
                if(this.expandedRows[i] == row) {
                    index = i;
                    break;
                }
            }
        }
        return index;
    }

In the code above object equality check is done which fails when update of the data (new reference) is added to the table. This has as a result to always return false since new object is not the same as the old one.
In most grids out there who support this functionality, when expandable rows is used you have to pass a column id (primeNg datatable calls this dataKey) in order to perform the check on the actual value of the row instead of the reference.

[patriknil90]

So, could it be possible to use the dataKey property to also check expanded rows in the future for datatables (I think it now only checks for selected rows)?

[pantonis]

I think we could @cagataycivici what do you say?

[cagataycivici]

p-dataTable is deprecated and will be removed in favor of the new p-table (aka TurboTable) of 5.1.0 so closing the issue. Please try the new p-table once 5.1.0 is released.