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!

Apostolos · Answer 1 · 2021-05-26T08:29:18.923

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

edited May 26 '21 at 08:29

answered May 26 '21 at 08:15

Apostolos

1

@MuditaPandey perfect! dont forget to accept answer if it helped you :) – Apostolos Jun 01 '21 at 13:22
1

it is working fine with expand but after expanding when i click the same one it is not collapsing back – Mudita Pandey Jul 27 '21 at 16:41
1

i guess you need this `onRowCollapse(event) { setExpandedRows({ [event.data.id]: false}); }` – Apostolos Jul 27 '21 at 18:01
if this is working, dont forget to accept answer. green tick, thank you – Apostolos Jul 29 '21 at 07:15
1

@Apostolos, Your suggested solution worked for me. This answer should be accepted. – Amit Aug 24 '22 at 02:05

1 Answers1