autoReset* migration from v7 to v8

[latobibor]

I have searched the docs and issues but I did not find the answer on how to migrate autoReset* functionality to v8.

In v7 this is how it looked:

autoResetGlobalFilter: myControlledBooleanVariable,
autoResetPage: myControlledBooleanVariable,
autoResetSortBy: myControlledBooleanVariable,
// ...

I used this functionality to reset sorting/filtering when a new item was added to the table (the latest items were at the start of the table) but I could also turn it off when the user changed an item they found with filters/sorting.

Now all there is:

autoResetPageIndex: true, // this is fine and works
autoResetExpanded: true, // it is not for me
autoResetAll: true, // according to the docs it "controls all other autoResets", but if there's only these two...

So I don't know if I am missing some thing, or should I need to write some code that checks if myControlledBooleanVariable and then it calls some reset functions?

[tukwan]

Has anyone figured out how to make autoResetSortBy work in v8?

[latobibor]

I have ended up writing my own "auto" reset.

  function resetSortingAndFilters() {
    table.resetGlobalFilter();
    table.resetSorting();
    table.setPageIndex(0);
  }

Where table is the return value of useReactTable().

[tukwan]

Yes, but what about the other way around? How to stop sorting from being reapplied after the table data updates (input cell fields)? With your approach, if I already have a column sorted and then reset it, the rows will become unsorted (and still shift positions).

https://stackoverflow.com/questions/62450548/how-to-prevent-react-table-sort-and-search-reset - but in v8

[latobibor]

Maybe out of frustration I have sacrificed that; it was a year ago. You have to ping someone from the collaborators to have the answer.

[mttigg]

I made a custom getSortedRowModel with a closure to handle not sorting on filter change. This use case is primarily for when a user has a table of items that are deletable. Without this a user removing an item inside of a grouping causes the grouping to shift which breaks the user experience.

// imorts

// created a wrapper function for a closure to store the details we need.
export const createGetSortedRowModel = () => {
  let filter = '';
  // right now we store the entire model, we could probably just store an array of ids instead
  let previousRowModel: any;

  return function getSortedRowModel<TData extends RowData>(): (
    table: Table<TData>,
  ) => () => RowModel<TData> {
    return table =>
      memo(
        () => [
          table.getState().sorting,
          // added in the filter so this gets invoked on filter change
          table.getState().globalFilter,
          table.getPreSortedRowModel(),
        ],
        (sorting, globalFilter, rowModel) => {
          if (!rowModel.rows.length || !sorting?.length) {
            previousRowModel = rowModel;
            return rowModel;
          }
          // default the previous
          if (!previousRowModel?.rows?.length) previousRowModel = rowModel;
          // when this is triggered by a filter change we default to the previous sorting model but using
          // the filter model as the source of truth for the items available
          if (
            filter !== JSON.stringify(globalFilter) &&
            previousRowModel.rows.length >= rowModel.rows.length
          ) {
            filter = JSON.stringify(table.getState().globalFilter);

            const newRowModel: RowModel<TData> = {
              rows: previousRowModel.rows.reduce(
                (acc: Row<TData>[], row: Row<TData>) => {
                  const existing = rowModel.rowsById[row.id];
                  if (existing) acc.push(existing);
                  return acc;
                },
                [] as Row<TData>[],
              ),
              flatRows: previousRowModel.rows.reduce(
                (acc: Row<TData>[], row: Row<TData>) => {
                  const existing = rowModel.rowsById[row.id];
                  if (existing) acc.push(existing);
                  return acc;
                },
                [] as Row<TData>[],
              ),
              rowsById: rowModel.rowsById,
            };
            previousRowModel = newRowModel;
            return newRowModel;
          }

         // rest of the sorting model from tanstack

          // we assign the row model so we can store it in the closure
          const newRowModel = {
            rows: sortData(rowModel.rows),
            flatRows: sortedFlatRows,
            rowsById: rowModel.rowsById,
          };
          previousRowModel = newRowModel;
          return newRowModel;
        },
        {
          key: process.env.NODE_ENV === 'development' && 'getSortedRowModel',
          debug: () => table.options.debugAll ?? table.options.debugTable,
          onChange: () => {
            table._autoResetPageIndex();
          },
        },
      );
  };
};