You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hello, my work recently switched to using tanstack react-table and overall it's been working pretty well for our needs. Recently I ran into an issue with the RowExpanding feature and wanted to throw this in here because it confused and frustrated me.
Basically, the issue I was running into was trying to set the expanded state to an initial value so that some rows are expanded on first render. However, the expanded state was being reset to {} and it took me a while to figure out why as I couldn't find anything on the documentation about this. Here's an example similar to what I had setup:
Table setup:
React.useEffect(() => {
// logic to set initialExpanded here
}, [deps]);
const [expanded, setExpanded] = useState<ExpandedState>(initialExpanded);
const table = useReactTable({
// other options...
state: {
expanded
},
onExpandedChange: setExpanded
getSubRows: row => row.subRows,
getCoreRowModel: getCoreRowModel(),
getExpandedRowModel: getExpandedRowModel(),
enabledExpanding: true
});
While debugging I saw that my initial state would look something like this:
{
row-two: true,
row-three: true
}
Which in theory should mean that row one is collapsed while rows two and three are expanded. However while debugging I discovered that my initial expanded state was being set to {} after having the expected value. I discovered this portion of code in the tanstack table github repo that would make it so that if autoResetExpanded isn't specified it will basically default to true. So explicitly setting the autoResetExpanded to false fixed my issue and it's working great now.
tl;dr
Documentation needs to be clearer about autoResetExpanded basically defaulting to true. Either that or any flags that aren't explicitly specified should default to false on the table side of things; that's what I was expecting at least.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hello, my work recently switched to using tanstack react-table and overall it's been working pretty well for our needs. Recently I ran into an issue with the
RowExpanding
feature and wanted to throw this in here because it confused and frustrated me.Basically, the issue I was running into was trying to set the
expanded
state to an initial value so that some rows are expanded on first render. However, theexpanded
state was being reset to{}
and it took me a while to figure out why as I couldn't find anything on the documentation about this. Here's an example similar to what I had setup:Table setup:
While debugging I saw that my initial state would look something like this:
Which in theory should mean that row one is collapsed while rows two and three are expanded. However while debugging I discovered that my initial expanded state was being set to
{}
after having the expected value. I discovered this portion of code in the tanstack table github repo that would make it so that ifautoResetExpanded
isn't specified it will basically default to true. So explicitly setting theautoResetExpanded
to false fixed my issue and it's working great now.tl;dr
Documentation needs to be clearer about
autoResetExpanded
basically defaulting to true. Either that or any flags that aren't explicitly specified should default to false on the table side of things; that's what I was expecting at least.Beta Was this translation helpful? Give feedback.
All reactions