Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Request: Implement Uncontrolled State Behavior for Expanded Rows #5836

Open
2 tasks done
SailorStat opened this issue Dec 18, 2024 · 0 comments
Open
2 tasks done

Request: Implement Uncontrolled State Behavior for Expanded Rows #5836

SailorStat opened this issue Dec 18, 2024 · 0 comments

Comments

@SailorStat
Copy link

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant