Help - Expand a row while collapse other

[sundsx]

Hi to all, im stuck here: : onExpandedChange: setExpanded.

I 'v set:
const [expanded, setExpanded] = React.useState({});

Table option:
data,
columns,
enableExpanding: true,
enableExpandAll: false,
state: {
expanded,
},
expanded: expanded,
onExpandedChange: setExpanded,
// here i want to provide a function to set state, but onExpandedChange don't pass usefull information//
getSubRows: row => row.subRows,
debugTable: true,

as documentation:
onExpandedChange?: OnChangeFn
"This function is called when the expanded table state changes. If a function is provided, you will be responsible for managing this state on your own. "

my goal is to have only one row expanded at time. Please help me

[lizhongyue248]

Did you find a solution?

[lizhongyue248]

This is my method:

  const [expanded, setExpanded] = React.useState<ExpandedState>({})
  const handleOnExpandedChange = (state: ExpandedState) => {
    setExpanded(state)
  }
  const table = useReactTable({
      // ......

    state: {
      // ....
      expanded
    },
   // ......
    onExpandedChange: (updaterOrValue) => {
      if (typeof updaterOrValue === "function") {
        handleOnExpandedChange(updaterOrValue(rowSelection));
      } else {
        handleOnExpandedChange(updaterOrValue);
      }
    },
   // ......

[lizhongyue248]

And if you want to close current row, you can modify to this

  const handleOnExpandedChange = (state: ExpandedState) => {
    const keys = Object.keys(expanded)
    const newKeys = Object.keys(state)
    if (keys.length === 1 && newKeys.length === 1 && keys[0] === newKeys[0]) {
        setExpanded({})
        return
    }
    setExpanded(state)
  }

[sundsx]

Now this method is well documented. Was added some week ago Il giorno ven 5 apr 2024 alle 16:05 中月不吃辣 ***@***.***> ha scritto:

…

And if you want to close current row, you can modify to this const handleOnExpandedChange = (state: ExpandedState) => { const keys = Object.keys(expanded) const newKeys = Object.keys(state) if (keys.length === 1 && newKeys.length === 1 && keys[0] === newKeys[0]) { setExpanded({}) return } setExpanded(state) } — Reply to this email directly, view it on GitHub <#5267 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AANCK6EDHLFTL675AIQPKJ3Y32VUBAVCNFSM6AAAAABBUMYMTCVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TAMRSGE2DS> . You are receiving this because you authored the thread.Message ID: ***@***.***>