From ef9951b255e265e7190905cd67daa6816aa9617c Mon Sep 17 00:00:00 2001
From: Sherfin Shamsudeen <sherfin@tooljet.io>
Date: Mon, 25 Oct 2021 14:00:52 +0530
Subject: [PATCH] Bugfix/table pageindex sync with total pages (#1263)

* Update table page data when page index is updated

* Pass pageIndex from useTable hook as lastActivePageIndex for pagination

* Goto last page in table whenever page count is less than current page index
---
 frontend/src/Editor/Components/Table/Pagination.jsx | 3 +++
 frontend/src/Editor/Components/Table/Table.jsx      | 6 +++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Editor/Components/Table/Pagination.jsx b/frontend/src/Editor/Components/Table/Pagination.jsx
index bc701d116a..dcf343ba25 100644
--- a/frontend/src/Editor/Components/Table/Pagination.jsx
+++ b/frontend/src/Editor/Components/Table/Pagination.jsx
@@ -21,7 +21,10 @@ export const Pagination = function Pagination({
       setPageCount(lastActivePageIndex);
     } else if (serverSide || lastActivePageIndex === 0) {
       setPageIndex(1);
+    } else {
+      gotoPage(lastActivePageIndex + 1);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [serverSide, lastActivePageIndex]);
 
   function gotoPage(page) {
diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index d152738372..1f22f8e8a6 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -756,6 +756,10 @@ export function Table({
     }
   }, [state.columnResizing.isResizingColumn]);
 
+  useEffect(() => {
+    if (pageCount <= pageIndex) gotoPage(pageCount - 1);
+  }, [pageCount]);
+
   return (
     <div
       data-disabled={parsedDisabledState}
@@ -891,7 +895,7 @@ export function Table({
             <div className="col">
               {(clientSidePagination || serverSidePagination) && (
                 <Pagination
-                  lastActivePageIndex={currentState.components[component.name]?.pageIndex ?? 1}
+                  lastActivePageIndex={pageIndex}
                   serverSide={serverSidePagination}
                   autoGotoPage={gotoPage}
                   autoCanNextPage={canNextPage}