question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

state 'expanded' set in useControlledState prevents toggling

See original GitHub issue

Describe the bug Version: 7.0.0-beta.27

I implemented a tree table and it should be initially expanded to a specific path. When setting the expand state with the useControlledState option, it’s not possible to collapse or expand the rows anymore. As an alternative I tried to use the initialState.expanded option, but the initial state resets, when the data is updated.

To Reproduce Steps to reproduce the behavior:

I replicated both of the problems in a codesandbox

useControlledState example: https://codesandbox.io/s/sparkling-dust-cc8ny (App.js, line:37-46, 59)

  • Add useControlledState option to Table options and set the expanded state.

initialState example: https://codesandbox.io/s/busy-cherry-mvlhj (App.js, line: 48, 153-161)

  • Add initialState: { expanded: ["0", "0.0"] } to table options
  • Add a timeout to simulate data loading

Expected behavior It should be possible to initially expand rows and still be able to expand/collapse them.

Desktop (please complete the following information):

  • OS: iOS
  • Browser: chrome
  • Version 78.0.3904.108

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6

github_iconTop GitHub Comments

1reaction
qapla47commented, Sep 11, 2020

I’m also having issues with this. If I use the useControlledState option for expanded rows, I can persist the expanded state when the data updates, but have to wait for a re-render (as documented) for the expansion to happen rather than having the toggle action trigger the re-render. Using websockets for data updates, redux/reselect for state management, and react-table v7.3.2 with filtering / sorting / expanding rows / subComponents / editable cells all enabled. When new data comes in, I don’t want the current sort / filter / expanded rows to reset, only the applicable data to be updated.

Is there an actual working example of the FAQ referenced being implemented? It doesn’t appear to work at present.

1reaction
brotherkocommented, Sep 11, 2020

Is it possible to have useControlledState to control the “expanded” key and toggling both working together? Once I set the expanded key in ControlledState then those toggling doesn’t work just like @Lukas742 mentioned. Is it expected?

Read more comments on GitHub >

github_iconTop Results From Across the Web

state 'expanded' set in useControlledState prevents toggling
I implemented a tree table and it should be initially expanded to a specific path. When setting the expand state with the useControlledState...
Read more >
How can I make transient/one-off state changes to a React ...
My use case is changing the data in the table with some client-side JS filtering. The problem is, the table uses internal state...
Read more >
FAQ | React Table - TanStack
It's important that the state override is done within a useMemo call to prevent the state variable from changing on every render.
Read more >
How to Write UI components with optionally controlled state
A part of screen that is displayed differently based on some value (state) and offers a set of interactions for changing that value....
Read more >
react-table - UNPKG
- Normalized all "toggle" actions to use an optional `value` property to set the value instead of toggle. Previously properties like `selected`, `groupBy`,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found