Material-table: Button onclick method invocation in a custom column makes the table to re-order itself from sorted state.

[darkraken007]

Hi,

I have a custom column, where i have a button to call a method. the method update the state details which saves rowkey of the clicked button.

How to reproduce.

1. sort the data.
2. click on the button in third column.
3. table re-order itself to old state.

Things i did.

1. disabled sorting for button column.
2. disabled clicking for button column.

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

Issue here is the handleAdminExpand method. If i empty it, the table doesnt re-order itself.

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 idea why this is happening?

[darkraken007]

Its basically any state update is causing this issue. I temporarily solved this issue by moving Admin Expand Component as Seperate Component and state associated with also moved.

[JasonLunsford]

+1 - this is also happening to in our Material Table implementations (v1.68). ANY state change in the component that houses the Material Table component will cause the table to "reset" the sorting, even if the data that feeds the table has NOT changed.

[dimitri-HR]

+1... happening to me as well...
I have pagination on the table...
So when the users click on a column to sort and then go to the next page and on that page click on the 'action' button in the row (in my case it brings up the Modal but also saves the row id to the local state).

Then the sorting is reset, users are back to page #1 and already lost the row they just clicked.
Not sure how to solve it...
Maybe I can save the 'sorted' column name to the local state and then inject this info into my columns on every re-render?
But then the pagination may not work still...

[birniefoxford]

Using version 1.68, we had a similar issue to @dimitri-HR , along these lines:

• select a column to sort by
• move to next page in pagination
• selected sort column is abandoned and table returns to default sorting

It seems to be fixed after we set

defaultSort: "asc"

on one of our columns, which we hadn't been doing before.

[Krunal91]

@birniefoxford It only works when you sort on the column where you added defaultSort.

This is helpful: https://github.com/mbrn/material-table/issues/2252

Downgrading to version below 1.62 fixes the problem