Prevent re-sort on data change or while row is being edited

Question

On react-table when the table is sorted and data changes, the table can either reset (go to default sort state) or re-sort (by putting the edited row in the correct place and keeping the column sort selection)

This is handled by autoResetSortBy: Boolean

Is there a way to simply keep the table in an out of order state once data is edited? If a user is editing multiple values in a row, the row might jump around if they edit the cell the table is sorted by. I wish to have the table keep the row in place at least while it's being edited

https://codesandbox.io/s/practical-napier-ksgfx

Sort by name column
edit the name cell in one of the rows, then click on another cell within the same row
the row will jump to another place because the table was re-sorted

user_16824901 · Answer

A bit late to the game, but I'm posting a response now in the hope that it helps others.

Here is a link with a good answer: https://react-table.tanstack.com/docs/faq#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes

TLDR: add these to your useTable args list:

        autoResetPage: false, 
        autoResetExpanded: false,
        autoResetGroupBy: false,
        autoResetSelectedRows: false,
        autoResetSortBy: false,
        autoResetFilters: false,
        autoResetRowState: false,

Hope this helps :)

Prevent re-sort on data change or while row is being edited

1 Answers