Material-table: Sorting by column is lost when data is updated

[bertrandp]

Describe the bug
Updating the data of a table resets any sorting.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://stackblitz.com/edit/react-9qzndg
2. Sort a column
3. Click 'Get API data'
4. Observe the column losing its sorting

Expected behavior
I want the table to keep the sorting when updating the data.

Additional context
I think this behaviour was introduce at version 1.62.0 with this commit

[GordonSmith]

FYI I see the same thing but with a simple resize event...

[flora8984461]

Same issue here. Wondering if there is any update on this issue? Thank you!

[yoavz]

I'm also having this problem, +1

[JasonLunsford]

Definitely seeing this issue too. Running material-table v1.68.0. ANY updates that cause a component render (like updating state via useState hook) will trigger this defect.

[ablontech]

Same issue with v1.68.1

[andreaschiappacasse]

I also see this problem, especially annoying since it makes using sorting and selecting at the same time not usable when using state to track selection changes.

[CarterScadden]

Also having this problem

[bertrandp]

@mbrn what are your thoughts on this issue ?

[gtupak]

Hey guys I fixed this by using a workaround. Long story short, what I did was:

1. Save the tableRef of the MaterialTable component
2. Right before you update the data, check the tableRef.current.state. If the default sorting changed, save the orderBy and orderDirection values to a local ref.
3. Also if the default sorting changed, pass these values to the parent component via a callback. The parent should then update the columns array that it passes to the component containing the MaterialTable component, with the new sorting values. By updating I mean updating the state of the columns. For this, you will need to save the columns to the component's state.

I hope this helps anyone. I know it might be a bit confusing but I'll let you with this for now. Maybe I find some time to put an example together somewhere.

[diamondfish]

I also have this issue, it's very annoying. Downgrading until this is fixed. Hope to see a fix soon.

[Drast10]

Hey guys I fixed this by using a workaround. Long story short, what I did was:

1. Save the tableRef of the MaterialTable component
2. Right before you update the data, check the tableRef.current.state. If the default sorting changed, save the orderBy and orderDirection values to a local ref.
3. Also if the default sorting changed, pass these values to the parent component via a callback. The parent should then update the columns array that it passes to the component containing the MaterialTable component, with the new sorting values. By updating I mean updating the state of the columns. For this, you will need to save the columns to the component's state.

I hope this helps anyone. I know it might be a bit confusing but I'll let you with this for now. Maybe I find some time to put an example together somewhere.

@gtupak , do you have any example for it