Approach to temporary freeze sorting (but, still, updating data)

[lorenzosfarra]

Hi,

I would like to ask your opinion on the best approach to create the following scenario:

1. I have my data coming from a server (socket), with a JS data parser that prepares the data for react-table
2. I am using the following params for the useTable hook:

useTable(
        {
            columns,
            data: data,
            defaultColumn: MatchesDefaultColumn, // Be sure to pass the defaultColumn option
            filterTypes: MatchesfilterTypes,
            initialState: INITIAL_STATE,
            sortType: (a, b, columnId, desc) => {
                return mySortLogicHere(....) ? 1 : -1
            }
        },
        useGlobalFilter,
        useFilters,
        useSortBy,
        usePagination,
        useFlexLayout
    );

And everything seems to work fine: I have my data updated when something new comes, and my table gets re-ordered according to the sorting algorithm.
All good.

Now, my client has a specific feature request: I have to "freeze" the rows re-ordering for 15 seconds, but I still need to update the rendered data in the existing rows.
So basically the re-ordering has to happen every X>=15s.

Ex.:

Let's say that at T0 I have the following scenario, in which I am ordering (DESC) the rows based on their value:

ID	VAL
row 1	20
row 2	10
row 3	8
....

After 5 seconds, at T1 (< T0 + 15s), I receive new data from the server: the value of row 2 is now 25, so is larger than row 1. For the sorting algorithm, now the table becomes:

ID	VAL
row 2	25
row 1	20
row 3	8
....

But what I would like to have (because of the 15 seconds rule) is:

ID	VAL
row 1	20
row 2	25
row 3	8

T2 comes, 15 seconds are now passed from T0. A re-render is required, and now my table should be:

ID	VAL
row 2	25
row 1	20
row 3	8
....

Do you have an idea on how to approach this problem?

Thanks!