reactjssortingfilterpaginationreact-table

Why are react-table pagination, filter, and sort reset automatically when its (the react-table) data changes?

I added 4 custom columns to my table columns list using its Cell property; each of these columns in every row contains a checkbox that changes a specific property in the table's data state; its data state structure is something like so:

export type dataTypes = {
    id: number;
    getAccess: boolean;
    insertAccess: boolean;
    editAccess: boolean;
    deleteAccess: boolean;
}[];

I don't want react-table (v7.7.0) pagination to reset to its first page when the table's data state is modified by the checkboxes (also about the table's filter and sort).

Does anyone know about it?

Solution

  • I solved this problem by adding autoResetPage: false, autoResetFilters: false, and autoResetSortBy: false to useTable hook like so:

    const tableInstance = useTable({
        columns,
        data,
        autoResetPage: false,
        autoResetFilters: false,
        autoResetSortBy: false
    }, usePagination)