[Bug]: Expand all toggleBtn doesn't reflect a state change when using pagination

[esalas012]

Package

@carbon/react

Browser

Chrome

Package version

v1.6.0

React version

v17.0.2

Description

I am running into an issue using datatables, pagination and expand all feature(toggle btn). I recently added enableToggle and getExpandHeaderProps to the TableExpandHeader component . However, this doesn't seem to work well with pagination. If I expand all collapsed items and go to a different page, the togglebtn keeps the previous state but all the items are collapsed.

Reproduction/example

https://codesandbox.io/s/keen-wind-7694jj?file=/src/App.js

Steps to reproduce

Click on expand all (togglebtn) and then click on next page. You will notice that all the items are collapsed however, the toggleBtn kept the same state as before.

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems

[tay1orjones]

Thanks for reporting this, it looks like the internal "expand all" state of DataTable is stale when rows are updated.

For now a workaround I'd suggest is to place a key on the DataTable and regenerate it when the page is changed.