How to collapse other expanded rows in PrimeReact DataTable

Question

I am very new to react and wanted to handle row expand/collapse in a prime react data table. I am trying to keep only one row expanded at a time

const onRowToggle = ( e) => { setExpandedRows(e.data); }

I am using above line for that purpose. Please help!

Answer 1

If you want to have only one row expanded, then remove onRowToggle from your DataTable component and implement the following onRowExpand method

  onRowExpand(event) {
    setExpandedRows({ [event.data.id]: true });
  }