Request: Implement Uncontrolled State Behavior for Expanded Rows

[SailorStat]

TanStack Table version

8.20.6

Framework/Library version

18.3.1

Describe the bug and the steps to reproduce it

Description

Hello! I'm a big fan of react-table and its flexibility. However, I've noticed that the current behavior for handling expanded rows doesn't fully align with the concept of uncontrolled state, which I believe could be improved.

Current Behavior

When using the onExpandedChange callback with manualExpanding: false, the expanded state of rows does not update automatically, even though the callback is triggered with the new state. This behavior is different from how uncontrolled components typically work in React.

For example, consider a simple <input> element:

<input onChange={console.log} />

In this case, the input value changes as the user types, and the onChange callback logs the new value. However, the component itself remains uncontrolled, meaning I don't need to manually manage the input's state.

Expected Behavior

Similarly, when using react-table with onExpandedChange, I would expect the expanded state of rows to update automatically, just like the uncontrolled <input> element. This would allow me to observe changes to the expanded state without needing to manually manage it.

Here's an example of my current setup:

const table = useReactTable({
  data,
  columns,
  manualExpanding: false,
  onExpandedChange: console.log,
  getSubRows: row => row.subRows,
  getRowCanExpand: row => Array.isArray(row.subRows),
  getCoreRowModel: getCoreRowModel(),
  getExpandedRowModel: getExpandedRowModel(),
});

In this case, I see the console.log output from onExpandedChange, but the expanded state of the rows does not update.

Suggested Solution

It would be great if react-table could automatically update the expanded state of rows when manualExpanding: false and onExpandedChange is provided, similar to how uncontrolled components work in React. This would make the library more intuitive and consistent with React's principles.

Reproduction

I've reproduced this behavior using the Expanding Example from the documentation.

Thank you for considering this request! I believe this change would make react-table even more powerful and user-friendly.

Feel free to adjust the wording or add any additional details as needed. This issue should clearly communicate the problem and suggest a solution, making it easier for the maintainers to understand and address the request.

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://tanstack.com/table/v8/docs/framework/react/examples/expanding

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

None

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[Finkes]

I fully agree with @SailorStat and would like to go even one step further:
In my opinion this should become the default behaviour for any state/callback pair in tanstack table.

In my case I want to watch for events in onRowSelectionChange however this forces me manage the rowSelectionState manually. I have big tables (> 1000 rows) and the performance of a controlled selection is way worse than using the uncontrolled version.