React-table: Expand groups by default

Created on 3 Jun 2020 · 5Comments · Source: tannerlinsley/react-table

Hi @tannerlinsley,

react-table is great! I have been using it in various projects. On one of my projects I have a initialstate.groupby and no ability to ungroup. I would however like to have the rows expanded by default.

I was reading an earlier post: https://github.com/tannerlinsley/react-table/issues/1494 but cannot figure out how to implement it.
I would be very grateful if you provide some pointers on this?

Thanks!

Mark

Source

mpriem

Most helpful comment

This worked for me, thanks for your help!

React.useMemo(() => toggleAllRowsExpanded(true), [toggleAllRowsExpanded]);

I found useEffect created a flicker, so I used useMemo instead.

nagiek on 16 Jun 2020

👍4

All 5 comments

@mpriem I've been experiencing the same issue. The expanded: true doesn't seem to work when you use both useGroupBy _and_ useExpanded. I traced this in the code to the fact that grouped rows don't have an 'original' property on them, where the code looks for the expanded attribute. This kind of makes sense because they're grouped rows, just not clear in the docs.

Anyways.. To fix this you have two options, you can create an 'expanded' object that has true for every row Id that is in your group. How do you know your row id? Well currently its the group by attribute followed by the pivot value. It's definitely not easy. The much easier way is to use some of the hooks that are present:

  const { 
//... other props from useTable
toggleAllRowsExpanded,
    isAllRowsExpanded
 } = useTable(/**/)
// run an effect that expands all the rows and keeps them that way. 
  useEffect(() => {
    toggleAllRowsExpanded(true);
  }, [isAllRowsExpanded]);

This isn't a perfect solution, but it got me what I needed. You can edit the dependencies or the interior of the useEffect to change the behavior as you see fit. Hope that helps!

mmacaula on 6 Jun 2020

👍2

Hey @mmacaula . Thanks for the response. I literally had the same solution in place. It works fine and also still have the ability to collapse rows. Thank again!

mpriem on 7 Jun 2020

This worked for me, thanks for your help!

React.useMemo(() => toggleAllRowsExpanded(true), [toggleAllRowsExpanded]);

I found useEffect created a flicker, so I used useMemo instead.

nagiek on 16 Jun 2020

👍4

I see a warning so I wonder if I am doing it wrong:
React Hook React.useEffect has a missing dependency: 'toggleAllRowsExpanded'. Either include it or remove the dependency array

Same error if I use React.useMemo

EDIT: I figured out that I needed to add those missing dependencies to the end of the hook:

React.useEffect(() => {
    toggleAllRowsExpanded(expandAllSubComponents) // NOTE expandAllSubComponents is a boolean I use to toggle open/closed
  }, [expandAllSubComponents, toggleAllRowsExpanded])