dimanche 23 août 2020

React material table re-ordering itself when i click a button in custom column rendering

Here is my code. I have Collapsible list on click of an Icon Button. When i sort the table before hand, then click the button to expand the list, the table goes to unsorted state(previous order). I dont know why.

<MaterialTable
            columns={[
              { title: "Jenkins Master", field: "organization" },
              { title: "Status", field: "status" },
              {
                field:'admins',
                title:'admins',
                render:rowData=><>
                <ListItem style=>
                  <ListItemText style=>{rowData.admins[0]}</ListItemText>
                  {this.getState(rowData.organization) ? <IconButton style= onClick={()=>this.handleAdminExpand(rowData.organization)}><ExpandLess /></IconButton> : <><Chip label={"+"+(rowData.admins.length-1)}/><IconButton style= onClick={()=>this.handleAdminExpand(rowData.organization)}><ExpandMore /></IconButton></>}
                  </ListItem>
                  <Collapse in={this.getState(rowData.organization)} timeout="auto" unmountOnExit><List style=>{rowData.admins.slice(1,rowData.admins.length).map((item)=>
                  <ListItem key={item} style=>{item}</ListItem>)}
                  </List></Collapse></>
              },
              { title: "Used storage", field: "usedStorage" }
            ]}

and here is my handler method.

    handleAdminExpand(name){
  this.state.openRows.find(openRow => openRow ===name ) ? 
  this.setState({
    openRows: this.state.openRows.filter(openRow => openRow!==name)
  })
   :
  this.setState({
    openRows: this.state.openRows.concat([name])
  })
};

Any comments on this are greatly appreciated.




Aucun commentaire:

Enregistrer un commentaire