table
table copied to clipboard
how to allow only table to expand one row at a time
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.
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();
},
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