Default expand subRows

[beneschjozsef]

I found two types of default expanding: all rows or rows on the first level. How can I default expand rows which is in the subRows. I would like to default expand the first and the second level (first subRows) rows and expand=false on the other subRows levels.

[beneschjozsef]

This is the example what I found:

//expand first 2 rows by default
<MaterialReactTable
  data={data}
  columns={columns}
  initialState={{
    expanded: {
      1: true,
      2: true,
    },
  }}
/>

In the expanded property i would like to set something like this:

expanded: { 0: true, 1: true, subRows: { 0: true } }

[KevinVandy]

This question inspired me to whip up a quick example. You just need to map through your data and find all of the row ids that you want to be expanded by default.

Full example here: https://www.material-react-table.com/docs/guides/expanding-sub-rows#expand-root-rows-only-by-default

const initialExpandedRootRows = useMemo<MRT_ExpandedState>(
    () =>
      data
        .map((originalRow) => originalRow.id) //get all the root row ids, use recursion for additional levels
        .reduce((a, v) => ({ ...a, [v]: true }), {}), //convert to an object with all the ids as keys and `true` as values
    [],
  );

  return (
    <MaterialReactTable
      columns={columns}
      data={data}
      enableExpanding
      getRowId={(originalRow) => originalRow.id}
      initialState={{ expanded: initialExpandedRootRows }} //only expand the root rows by default
    />
  );

[beneschjozsef]

Your tool is awesome and Thank you for your reply.

You linked this topic:
Expand Root Rows Only By Default

And there is another what I read:
Expand All Rows By Default 

BUT I would like to ‘Expand Root Rows And The First SubRows By Default’

Can you help to solve in this situation?: ‘Expand Root Rows And The First SubRows By Default’

Sorry if my before description wasn't clear.

[KevinVandy]

You just need another.map added that adds subrows ids, right?

[beneschjozsef]

Unfortunately not . I tried this:

initialState={{
        columnPinning: { left: ['name'] },
        expanded: { 0: true, subRows: { 1: true } }
      }}

And this:

initialState={{
        columnPinning: { left: ['name'] },
        expanded: { 0: true, 1: true }
      }}

Just the 0: true working (just the root rows are opened) and the first subRows are stay closed.
Any idea if this feature should work at all?

[KevinVandy]

That's not what I was suggesting at all, and what you have won't work at all,

more like this:

 const initialExpandedRows = useMemo<MRT_ExpandedState>(() => {
    const rootRowIds = data.map((originalRow) => originalRow.id);
    const secondLevelRowIds = data
      .map((originalRow) => originalRow.subRows)
      .map((subRows) => subRows?.map((subRow) => subRow.id))
      .flat(1)
      .filter(Boolean) as string[];
    return [...rootRowIds, ...secondLevelRowIds].reduce(
      (a, v) => ({ ...a, [v]: true }),
      {},
    );
  }, []);

All that matters is that you find the row ids that you want to be expanded.

[beneschjozsefzoltan]

Finally I figured out what was my mistake. I forget to add these property:
getRowId={(originalRow) => originalRow.id}
Without this line the id property in the row wasn't recognised.

Thank you for your help!