how to allow only table to expand one row at a time

[linaffilomania]

TanStack Table version

e.g. @tanstack/react-table": "^8.11.0

Framework/Library version

e.g. React 18.2.0

Describe the bug and the steps to reproduce it

how i can that just one expand will be open

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

.

Screenshots or Videos (Optional)

.

Do you intend to try to help solve this bug with your own PR?

None

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[Avi-E-Koenig]

this allows limiting main rows to only 1 open but allows normal expand logic in sub rows

        onClick: () => {
                      const state = table.getState();
                      const expanded = structuredClone(state.expanded) as Record<
                        string,
                        boolean
                      >;
                      if (row.id.includes('.')) {
                        expanded[row.id] = !row.getIsExpanded();
                        table.setExpanded(expanded);
                        return;
                      }

                      table.setExpanded(row.getIsExpanded()?{}:{ [row.id]: true });
                      // return row.getToggleExpandedHandler();
                    },

[KevinVandy]

This is what I do:

onClick: () => table.setExpanded({ [row.id]: !row.getIsExpanded() }), //only 1 detail panel open at a time

^Above advice is about the same and good too.

Let's leave issues for bugs and convert this into a discussion

[nikhil-bacancy]

is there a better way to handle it via overriding received states using some logic through table options i am using managed state of state: { expand: expandState }

https://tanstack.com/table/v8/docs/api/features/expanding#table-options

@tannerlinsley , @linaffilomania , @Darkmift @ecoleman @dmarkow

[esdebe]

This is what i do:

const [expanded, setExpanded] = useState<ExpandedState>({})

const table = useReactTable({
  data,
  columns,
  enableRowSelection: true,
  enableExpanding: true,
  getCoreRowModel: getCoreRowModel(),
  getExpandedRowModel: getExpandedRowModel(),
  getRowCanExpand: () => true,
  state: {
    expanded,
  },
  onExpandedChange: (newExpanded) => {
    const nextExpanded = typeof newExpanded === 'function' ? newExpanded({}) : newExpanded
    setExpanded(Object.keys(expanded)[0] === Object.keys(nextExpanded)[0] ? {} : nextExpanded)
  },
})

@nikhil-bacancy @linaffilomania

[Avi-E-Koenig]

This is useful if you want to manage the state out of the table scope.
otherwise you are just exposing this.