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

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

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


Solution 1:[1]

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 :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 mattBurnett