question: expanded groups by default

[smmoosavi]

I need all rows of the grouped table to be expanded by default.

    type D = { firstname: string; lastname: string; lang: string };
    const columns: Column<D>[] = useMemo(
      () => [
        { accessor: 'firstname', Header: 'First Name' },
        { accessor: 'lastname', Header: 'Last Name' },
        { accessor: 'lang', Header: 'Language' },
      ],
      [],
    );
    const data: D[] = useMemo(
      () => [
        { firstname: 'Dan', lastname: 'AB', lang: 'js' },
        { firstname: 'Bob', lastname: 'XY', lang: 'js' },
        { firstname: 'Linus', lastname: 'Tr', lang: 'c' },
      ],
      [],
    );
    const groupBy = useMemo(() => ['lang'], []);
    const table = useTable(
      {
        columns,
        data,
        initialState: { groupBy },
      },
      useGroupBy,
      useExpanded,
    );

[rantibi]

just do the following:

  useEffect(() => {
    toggleAllRowsExpanded();
  }, []);

[bzbetty]

Is there an equivalent answer for V8?

[KevinVandy]

Yes, you can simply set the expanded state to true and it will have all rows expanded.

So either initialState: { expanded: true} or if managing the state yourself, state: { expanded: true}

[bzbetty]

somehow i totally missed initialState, thanks!

[evbo]

Excellent blog on react-table in general, including initialState:
https://ncoughlin.com/tags/react-table/

I'd say these qualify as the unofficial docs of react-table ;)