Overview

When using useExpanded on a table whose data can change, which rows are expanded is recorded by row index rather than by some unique identifier for the row. This means if a row is expanded but then the data changes and a new row is added before it, the same index is still expanded but this is a different row in terms of data.

Sandbox example

https://codesandbox.io/s/silly-silence-dyf64

Steps To Reproduce

1. Go to the above sandbox
2. Expand any of the initial 5 rows
3. Check the checkbox, which adds 5 more rows at the start
4. See that a different row (same index as before, but different data) is now expanded, and the row you initially expanded is not
5. Expand one of rows 6 to 10, note some data in it
6. Uncheck the checkbox, which removes those first 5 rows again
7. See that the now you had expanded while still present is no longer expanded

Expected behavior

The row by data that I expanded is still expanded after adding/removing data.

Suggested implementation

Of course by default identifying rows by index is the only thing which makes sense. But I would have thought most sets of data have some kind of unique identifier available, and using one wouldn't be very alien to developers used to React, since we use them all the time for the key prop. Adding a way to hint to react-table which field of each entry in data can be used as a unique identifier, and then using this for things like the store of which rows are expanded, ought to solve the problem.