How to collapse other expanded rows in PrimeReact DataTable

UI Components for React
Post Reply
MelissaJones
Posts: 1
Joined: 24 May 2021, 12:37

24 May 2021, 12:39

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!
onevanilla

kevinquinn1918
Posts: 9
Joined: 26 Aug 2020, 14:14

31 May 2021, 16:37

I'm sure there is a better way to do this, but here's how I'm doing it:

Code: Select all

const onRowToggle = (e) => {
    const oldSelections= expandedRows ===null ? [] : Object.keys(expandedRows)
    const newSelections=e.data===null ? [] : Object.keys(e.data)
    const justSelected=newSelections.filter(item=>!oldSelections.includes(item))
    setExpandedRows({[justSelected]:true});
  };
I couldn't find an easier way to determine what the new selected row is, so I found what was previously selected and what is currently selected and filtered out the different row. In the first two lines, if you don't check for null, there will be an error.

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests