table icon indicating copy to clipboard operation
table copied to clipboard

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

Open linaffilomania opened this issue 1 year ago • 1 comments

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

  • [X] I agree to follow this project's Code of Conduct
  • [X] 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.

linaffilomania avatar May 12 '24 09:05 linaffilomania

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();
                    },

Avi-E-Koenig avatar May 12 '24 15:05 Avi-E-Koenig

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

KevinVandy avatar Jun 03 '24 20:06 KevinVandy