Changing filters resets pagination

package.json

@@ -43,6 +43,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.7.2",
+    "@babel/plugin-transform-runtime": "^7.8.3",
     "@babel/preset-env": "^7.7.1",
     "@babel/preset-react": "^7.7.0",
     "@babel/runtime": "^7.7.2",
@@ -50,6 +51,7 @@
     "@testing-library/dom": "^6.10.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
+    "@testing-library/react-hooks": "^3.2.1",
     "babel-eslint": "9.x",
     "babel-jest": "^24.9.0",
     "core-js": "3.4.1",
@@ -80,6 +82,7 @@
     "prop-types": "^15.5.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-test-renderer": "^16.13.0",
     "rollup": "^1.27.3",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.1.0",
@@ -88,7 +91,6 @@
     "rollup-plugin-size": "^0.2.1",
     "rollup-plugin-size-snapshot": "^0.10.0",
     "rollup-plugin-terser": "^5.1.2",
-    "@babel/plugin-transform-runtime": "^7.8.3",
     "serve": "^11.2.0"
   }
 }

src/plugin-hooks/tests/usePagination.test.js

@@ -1,7 +1,9 @@
 import React from 'react'
+import { renderHook, act } from '@testing-library/react-hooks'
 import { render, fireEvent } from '../../../test-utils/react-testing'
 import { useTable } from '../../hooks/useTable'
 import { usePagination } from '../usePagination'
+import { useFilters } from '../useFilters'
 
 const data = [...new Array(1000)].map((d, i) => ({
   firstName: `tanner ${i + 1}`,
@@ -12,6 +14,43 @@ const data = [...new Array(1000)].map((d, i) => ({
   progress: 50,
 }))
 
+const columns = [
+  {
+    Header: 'Name',
+    columns: [
+      {
+        Header: 'First Name',
+        accessor: 'firstName',
+      },
+      {
+        Header: 'Last Name',
+        accessor: 'lastName',
+      },
+    ],
+  },
+  {
+    Header: 'Info',
+    columns: [
+      {
+        Header: 'Age',
+        accessor: 'age',
+      },
+      {
+        Header: 'Visits',
+        accessor: 'visits',
+      },
+      {
+        Header: 'Status',
+        accessor: 'status',
+      },
+      {
+        Header: 'Profile Progress',
+        accessor: 'progress',
+      },
+    ],
+  },
+]
+
 function Table({ columns, data }) {
   const {
     getTableProps,
@@ -114,46 +153,6 @@ function Table({ columns, data }) {
 }
 
 function App() {
-  const columns = React.useMemo(
-    () => [
-      {
-        Header: 'Name',
-        columns: [
-          {
-            Header: 'First Name',
-            accessor: 'firstName',
-          },
-          {
-            Header: 'Last Name',
-            accessor: 'lastName',
-          },
-        ],
-      },
-      {
-        Header: 'Info',
-        columns: [
-          {
-            Header: 'Age',
-            accessor: 'age',
-          },
-          {
-            Header: 'Visits',
-            accessor: 'visits',
-          },
-          {
-            Header: 'Status',
-            accessor: 'status',
-          },
-          {
-            Header: 'Profile Progress',
-            accessor: 'progress',
-          },
-        ],
-      },
-    ],
-    []
-  )
-
   return <Table columns={columns} data={data} />
 }
 
@@ -185,3 +184,53 @@ test('renders a paginated table', () => {
       .reverse()[0].children[0].textContent
   ).toEqual('tanner 30')
 })
+
+describe('usePagination', () => {
+  test('renders a paginated table', () => {
+    const rendered = render(<App />)
+
+    expect(rendered.queryAllByRole('cell')[0].textContent).toEqual('tanner 21')
+
+    fireEvent.click(rendered.getByText('>'))
+    expect(rendered.queryAllByRole('cell')[0].textContent).toEqual('tanner 31')
+
+    fireEvent.click(rendered.getByText('>'))
+    expect(rendered.queryAllByRole('cell')[0].textContent).toEqual('tanner 41')
+
+    fireEvent.click(rendered.getByText('>>'))
+    expect(rendered.queryAllByRole('cell')[0].textContent).toEqual('tanner 991')
+
+    fireEvent.click(rendered.getByText('<<'))
+    expect(rendered.queryAllByRole('cell')[0].textContent).toEqual('tanner 1')
+
+    fireEvent.change(rendered.getByTestId('page-size-select'), {
+      target: { value: 30 },
+    })
+
+    expect(
+      rendered
+        .queryAllByRole('row')
+        .slice(2)
+        .reverse()[0].children[0].textContent
+    ).toEqual('tanner 30')
+  })
+
+  test('changing filters resets pagination', async () => {
+    const { result } = renderHook(() =>
+      useTable(
+        {
+          columns,
+          data,
+        },
+        useFilters,
+        usePagination
+      )
+    )
+
+    act(() => result.current.nextPage())
+    act(() => result.current.nextPage())
+    expect(result.current.state.pageIndex).toEqual(2)
+    act(() => result.current.visibleColumns[0].setFilter('tanner'))
+    expect(result.current.state.pageIndex).toEqual(0)
+  })
+})

src/plugin-hooks/usePagination.js

@@ -89,10 +89,6 @@ function useInstance(instance) {
     dispatch,
     data,
     manualPagination,
-    manualGlobalFilter,
-    manualFilters,
-    manualGroupBy,
-    manualSortBy,
   } = instance
 
   ensurePluginOrder(
@@ -105,15 +101,16 @@ function useInstance(instance) {
 
   useMountedLayoutEffect(() => {
     if (getAutoResetPage()) {
+      console.log('reset')
       dispatch({ type: actions.resetPage })
     }
   }, [
     dispatch,
     manualPagination ? null : data,
-    manualGlobalFilter ? null : globalFilter,
+    globalFilter,
-    manualFilters ? null : filters,
+    filters,
-    manualGroupBy ? null : groupBy,
+    groupBy,
-    manualSortBy ? null : sortBy,
+    sortBy,
   ])
 
   const pageCount = manualPagination