From 5db25cf0cde8cca5151c8a31d6f4f08ec160e021 Mon Sep 17 00:00:00 2001
From: Kartik Gupta <gupta.kartik18kg@gmail.com>
Date: Mon, 11 Nov 2024 11:25:24 +0530
Subject: [PATCH] table page index undefined and pagination button ui issues

---
 .../AppBuilder/Widgets/Table/Pagination.jsx    |  8 ++++----
 .../src/AppBuilder/Widgets/Table/Table.jsx     | 18 ++++++++++++++++--
 .../AppBuilder/_stores/slices/eventsSlice.js   |  2 +-
 frontend/src/_ui/AppButton/AppButton.scss      | 10 ++++++++++
 4 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/frontend/src/AppBuilder/Widgets/Table/Pagination.jsx b/frontend/src/AppBuilder/Widgets/Table/Pagination.jsx
index 3333e540cd..e53096dff6 100644
--- a/frontend/src/AppBuilder/Widgets/Table/Pagination.jsx
+++ b/frontend/src/AppBuilder/Widgets/Table/Pagination.jsx
@@ -67,7 +67,7 @@ export const Pagination = function Pagination({
         {!serverSide && tableWidth > 460 && (
           <ButtonSolid
             variant="ghostBlack"
-            className="tj-text-xsm"
+            className="tj-text-xsm table-pagination-btn"
             style={{
               minWidth: '28px',
               width: '28px',
@@ -92,7 +92,7 @@ export const Pagination = function Pagination({
         )}
         <ButtonSolid
           variant="ghostBlack"
-          className="tj-text-xsm"
+          className="tj-text-xsm table-pagination-btn"
           style={{
             minWidth: '28px',
             width: '28px',
@@ -144,7 +144,7 @@ export const Pagination = function Pagination({
       <div className="d-flex">
         <ButtonSolid
           variant="ghostBlack"
-          className="tj-text-xsm"
+          className="tj-text-xsm table-pagination-btn"
           style={{
             minWidth: '28px',
             width: '28px',
@@ -169,7 +169,7 @@ export const Pagination = function Pagination({
         {!serverSide && tableWidth > 460 && (
           <ButtonSolid
             variant="ghostBlack"
-            className="tj-text-xsm"
+            className="tj-text-xsm table-pagination-btn"
             style={{
               minWidth: '28px',
               width: '28px',
diff --git a/frontend/src/AppBuilder/Widgets/Table/Table.jsx b/frontend/src/AppBuilder/Widgets/Table/Table.jsx
index d6966192cb..1146765bd0 100644
--- a/frontend/src/AppBuilder/Widgets/Table/Table.jsx
+++ b/frontend/src/AppBuilder/Widgets/Table/Table.jsx
@@ -579,7 +579,22 @@ export const Table = React.memo(
           properties.autogenerateColumns ?? false,
           id
         );
-        useDynamicColumn && setGeneratedColumn(generatedColumnFromData);
+        if (useDynamicColumn) {
+          const dynamicColumnHasId = dynamicColumn && dynamicColumn.every((column) => 'id' in column);
+          if (!dynamicColumnHasId) {
+            // if dynamic columns do not have an id then we need to manually compare the generated columns with the columns in the state because the id that we generate for columns without id is a uuid and it will be different every time
+            const generatedColumnsWithoutIds = generatedColumnFromData.map(({ id, ...rest }) => ({
+              ...rest,
+            }));
+            const columnsFromStateWithoutIds = generatedColumn.map(({ id, ...rest }) => ({
+              ...rest,
+            }));
+            !isEqual(generatedColumnsWithoutIds, columnsFromStateWithoutIds) &&
+              setGeneratedColumn(generatedColumnFromData);
+            return;
+          }
+          setGeneratedColumn(generatedColumnFromData);
+        }
       }
     }, [tableData, JSON.stringify(dynamicColumn)]);
 
@@ -865,7 +880,6 @@ export const Table = React.memo(
           currentData: data,
           selectedRow: [],
           selectedRowId: null,
-          pageIndex: pageIndex + 1,
         });
         if (tableDetails.selectedRowId || !isEmpty(tableDetails.selectedRowDetails)) {
           toggleAllRowsSelected(false);
diff --git a/frontend/src/AppBuilder/_stores/slices/eventsSlice.js b/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
index 02ee8fc29c..6817e6aa39 100644
--- a/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
@@ -211,7 +211,7 @@ export const createEventsSlice = (set, get) => ({
         state.eventsSlice.module[moduleId].events = newEvents;
       });
     },
-    setTablePageIndex: (tableId, index) => {
+    setTablePageIndex: (tableId, index = 1) => {
       const { getExposedValueOfComponent } = get();
       if (_.isEmpty(tableId)) {
         console.log('No table is associated with this event.');
diff --git a/frontend/src/_ui/AppButton/AppButton.scss b/frontend/src/_ui/AppButton/AppButton.scss
index 15320ad44e..fd39d9e9c3 100644
--- a/frontend/src/_ui/AppButton/AppButton.scss
+++ b/frontend/src/_ui/AppButton/AppButton.scss
@@ -21,6 +21,16 @@
         align-items: center;
     }
 
+    &.table-pagination-btn{
+        &:disabled {
+            svg {
+                path {
+                    fill: var(--slate8) !important;
+                }
+            }
+        }
+    }
+
     &:disabled {
         background: var(--slate6) !important;
         color: var(--slate9) !important;