[ENT-10467] Fix: Pagination Issue in LearnerActivityTable (#1547)

* fix: fix pagination issue for learner activity table

* fix: added autoResetPage option for DataTable

---------

Co-authored-by: irfanuddinahmad <[email protected]>

Author: mahamakifdar19

src/components/Admin/index.jsx

@@ -163,7 +163,7 @@ class Admin extends React.Component {
           defaultMessage: 'Top Active Learners',
           description: 'Report subtitle for learners active in the past week',
         }),
-        component: <LearnerActivityTable id="learners-active-week" activity="active_past_week" />,
+        component: <LearnerActivityTable key="learners-active-week" id="learners-active-week" activity="active_past_week" />,
         csvFetchMethod: () => (
           EnterpriseDataApiService.fetchCourseEnrollments(
             enterpriseId,
@@ -184,7 +184,7 @@ class Admin extends React.Component {
           defaultMessage: 'Not Active in Past Week',
           description: 'Report subtitle for learners inactive in the past week',
         }),
-        component: <LearnerActivityTable id="learners-inactive-week" activity="inactive_past_week" />,
+        component: <LearnerActivityTable key="learners-inactive-week" id="learners-inactive-week" activity="inactive_past_week" />,
         csvFetchMethod: () => (
           EnterpriseDataApiService.fetchCourseEnrollments(
             enterpriseId,
@@ -205,7 +205,7 @@ class Admin extends React.Component {
           defaultMessage: 'Not Active in Past Month',
           description: 'Report subtitle for learners inactive in the past month',
         }),
-        component: <LearnerActivityTable id="learners-inactive-month" activity="inactive_past_month" />,
+        component: <LearnerActivityTable key="learners-inactive-month" id="learners-inactive-month" activity="inactive_past_month" />,
         csvFetchMethod: () => (
           EnterpriseDataApiService.fetchCourseEnrollments(
             enterpriseId,

src/components/AdminV2/index.jsx

@@ -192,7 +192,7 @@ const Admin = ({
           defaultMessage: 'Top Active Learners',
           description: 'Report subtitle for learners active in the past week',
         }),
-        component: <LearnerActivityTable id="learners-active-week" activity="active_past_week" />,
+        component: <LearnerActivityTable key="learners-active-week" id="learners-active-week" activity="active_past_week" />,
         csvFetchMethod: () => (
           EnterpriseDataApiService.fetchCourseEnrollments(
             enterpriseId,
@@ -213,7 +213,7 @@ const Admin = ({
           defaultMessage: 'Not Active in Past Week',
           description: 'Report subtitle for learners inactive in the past week',
         }),
-        component: <LearnerActivityTable id="learners-inactive-week" activity="inactive_past_week" />,
+        component: <LearnerActivityTable key="learners-inactive-week" id="learners-inactive-week" activity="inactive_past_week" />,
         csvFetchMethod: () => (
           EnterpriseDataApiService.fetchCourseEnrollments(
             enterpriseId,
@@ -234,7 +234,7 @@ const Admin = ({
           defaultMessage: 'Not Active in Past Month',
           description: 'Report subtitle for learners inactive in the past month',
         }),
-        component: <LearnerActivityTable id="learners-inactive-month" activity="inactive_past_month" />,
+        component: <LearnerActivityTable key="learners-inactive-month" id="learners-inactive-month" activity="inactive_past_month" />,
         csvFetchMethod: () => (
           EnterpriseDataApiService.fetchCourseEnrollments(
             enterpriseId,

src/components/LearnerActivityTable/index.jsx

@@ -183,6 +183,9 @@ const LearnerActivityTable = ({ id, enterpriseId, activity }) => {
       FilterStatusComponent={FilterStatus}
       defaultColumnValues={{ Filter: TextFilter }}
       columns={columns}
+      initialTableOptions={{
+        autoResetPage: true,
+      }}
       initialState={{
         pageIndex: currentPageFromUrl, // Use page from URL
         pageSize: PAGE_SIZE,