From c3d5a5bceace478ef22550f03f636f3865829195 Mon Sep 17 00:00:00 2001
From: Cyril Nxumalo <cnxumalo@2u.com>
Date: Mon, 16 Sep 2024 13:24:47 +0200
Subject: [PATCH] chore: Migrate deprecated Table to DataTable for
 CompletedLearnersTable

---
 .../Admin/CompletedLearnersTable.jsx          |  64 +++++
 .../CompletedLearnersTable.test.jsx           |  29 ++-
 src/components/Admin/EmailCell.jsx            |  16 ++
 src/components/Admin/EmailCell.test.jsx       |  42 ++++
 .../Admin/__snapshots__/Admin.test.jsx.snap   | 200 +++++++--------
 .../CompletedLearnersTable.test.jsx.snap      | 236 ++++++++++++++++++
 src/components/Admin/data/hooks/index.js      |  57 +----
 .../Admin/data/hooks/useGenericTableData.js   |  86 +++++++
 .../data/hooks/useGenericTableData.test.js    | 157 ++++++++++++
 .../data/hooks/useModuleActivityReport.js     |  55 ++++
 src/components/Admin/index.jsx                |   2 +-
 .../Admin/tabs/ModuleActivityReport.jsx       |   2 +-
 .../CompletedLearnersTable.test.jsx.snap      |  37 ---
 .../CompletedLearnersTable/index.jsx          |  49 ----
 src/eventTracking.js                          |   6 +
 15 files changed, 782 insertions(+), 256 deletions(-)
 create mode 100644 src/components/Admin/CompletedLearnersTable.jsx
 rename src/components/{CompletedLearnersTable => Admin}/CompletedLearnersTable.test.jsx (72%)
 create mode 100644 src/components/Admin/EmailCell.jsx
 create mode 100644 src/components/Admin/EmailCell.test.jsx
 create mode 100644 src/components/Admin/__snapshots__/CompletedLearnersTable.test.jsx.snap
 create mode 100644 src/components/Admin/data/hooks/useGenericTableData.js
 create mode 100644 src/components/Admin/data/hooks/useGenericTableData.test.js
 create mode 100644 src/components/Admin/data/hooks/useModuleActivityReport.js
 delete mode 100644 src/components/CompletedLearnersTable/__snapshots__/CompletedLearnersTable.test.jsx.snap
 delete mode 100644 src/components/CompletedLearnersTable/index.jsx

diff --git a/src/components/Admin/CompletedLearnersTable.jsx b/src/components/Admin/CompletedLearnersTable.jsx
new file mode 100644
index 0000000000..2842139bfc
--- /dev/null
+++ b/src/components/Admin/CompletedLearnersTable.jsx
@@ -0,0 +1,64 @@
+import React, { useMemo } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { DataTable } from '@openedx/paragon';
+import { useGenericTableData } from './data/hooks';
+import EnterpriseDataApiService from '../../data/services/EnterpriseDataApiService';
+import EmailCell from './EmailCell';
+
+const CompletedLearnersTable = (enterpriseId) => {
+  const intl = useIntl();
+  const {
+    isLoading,
+    tableData,
+    fetchTableData,
+  } = useGenericTableData(
+    enterpriseId,
+    'completed-learners',
+    EnterpriseDataApiService.fetchCompletedLearners,
+    useMemo(() => ({
+      userEmail: { key: 'user_email' },
+      completedCourses: { key: 'completed_courses' },
+    }), []),
+  );
+
+  return (
+    <DataTable
+      isSortable
+      manualSortBy
+      isPaginated
+      manualPagination
+      isLoading={isLoading}
+      columns={[
+        {
+          Header: intl.formatMessage({
+            id: 'admin.portal.lpr.completed.learners.table.user_email.column.heading',
+            defaultMessage: 'Email',
+            description: 'Column heading for the user email column in the completed learners table',
+          }),
+          accessor: 'userEmail',
+          Cell: EmailCell,
+        },
+        {
+          Header: intl.formatMessage({
+            id: 'admin.portal.lpr.completed.learners.table.completed_courses.column.heading',
+            defaultMessage: 'Total Course Completed Count',
+            description: 'Column heading for the completed courses column in the completed learners table',
+          }),
+          accessor: 'completedCourses',
+        },
+      ]}
+      initialState={{
+        pageIndex: 20,
+        pageSize: 0,
+        sortBy: [{ id: 'completedCourses', desc: true }],
+        selectedRowsOrdered: [],
+      }}
+      fetchData={fetchTableData}
+      data={tableData.results}
+      itemCount={tableData.itemCount}
+      pageCount={tableData.pageCount}
+    />
+  );
+};
+
+export default CompletedLearnersTable;
diff --git a/src/components/CompletedLearnersTable/CompletedLearnersTable.test.jsx b/src/components/Admin/CompletedLearnersTable.test.jsx
similarity index 72%
rename from src/components/CompletedLearnersTable/CompletedLearnersTable.test.jsx
rename to src/components/Admin/CompletedLearnersTable.test.jsx
index ece4178180..3a79c64fb8 100644
--- a/src/components/CompletedLearnersTable/CompletedLearnersTable.test.jsx
+++ b/src/components/Admin/CompletedLearnersTable.test.jsx
@@ -6,26 +6,20 @@ import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-redux';
 
-import CompletedLearnersTable from '.';
+import CompletedLearnersTable from './CompletedLearnersTable';
+import { useGenericTableData } from './data/hooks';
 
 const mockStore = configureMockStore([thunk]);
 const enterpriseId = 'test-enterprise';
+
+jest.mock('./data/hooks/useGenericTableData', () => (
+  jest.fn().mockReturnValue({})
+));
+
 const store = mockStore({
   portalConfiguration: {
     enterpriseId,
   },
-  table: {
-    'completed-learners': {
-      data: {
-        results: [],
-        current_page: 1,
-        num_pages: 1,
-      },
-      ordering: null,
-      loading: false,
-      error: null,
-    },
-  },
 });
 
 const CompletedLearnersWrapper = props => (
@@ -42,6 +36,15 @@ const CompletedLearnersWrapper = props => (
 
 describe('CompletedLearnersTable', () => {
   it('renders empty state correctly', () => {
+    useGenericTableData.mockReturnValue({
+      isLoading: false,
+      tableData: {
+        results: [],
+        itemCount: 0,
+        pageCount: 0,
+      },
+      fetchTableData: jest.fn(),
+    });
     const tree = renderer
       .create((
         <CompletedLearnersWrapper />
diff --git a/src/components/Admin/EmailCell.jsx b/src/components/Admin/EmailCell.jsx
new file mode 100644
index 0000000000..cf97e72ef3
--- /dev/null
+++ b/src/components/Admin/EmailCell.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const EmailCell = ({ row }) => (
+  <span data-hj-suppress>{row.original.userEmail}</span>
+);
+
+EmailCell.propTypes = {
+  row: PropTypes.shape({
+    original: PropTypes.shape({
+      userEmail: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
+
+export default EmailCell;
diff --git a/src/components/Admin/EmailCell.test.jsx b/src/components/Admin/EmailCell.test.jsx
new file mode 100644
index 0000000000..f2c69eda0d
--- /dev/null
+++ b/src/components/Admin/EmailCell.test.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import EmailCell from './EmailCell';
+
+describe('Email Component', () => {
+  it('should display the user email and suppress highlighting', () => {
+    const mockRow = {
+      original: {
+        userEmail: 'test@example.com',
+      },
+    };
+
+    render(
+      <EmailCell row={mockRow} />,
+    );
+
+    // Assert that the email is rendered correctly
+    const emailElement = screen.getByText('test@example.com');
+    expect(emailElement).toBeInTheDocument();
+
+    // Assert that data-hj-suppress is present to suppress highlighting
+    expect(emailElement).toHaveAttribute('data-hj-suppress');
+  });
+
+  it('should throw a prop-type warning if the email is not provided', () => {
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const invalidRow = {
+      original: {},
+    };
+
+    // Render with invalid props
+    render(<EmailCell row={invalidRow} />);
+
+    // Assert that a prop-types error has been logged
+    expect(consoleSpy).toHaveBeenCalled();
+
+    // Clean up the spy
+    consoleSpy.mockRestore();
+  });
+});
diff --git a/src/components/Admin/__snapshots__/Admin.test.jsx.snap b/src/components/Admin/__snapshots__/Admin.test.jsx.snap
index 93e82b2841..f7f4b78f98 100644
--- a/src/components/Admin/__snapshots__/Admin.test.jsx.snap
+++ b/src/components/Admin/__snapshots__/Admin.test.jsx.snap
@@ -1621,7 +1621,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
                         >
                           <label
                             className="pgn__form-label search-label mb-2"
-                            htmlFor="form-field17"
+                            htmlFor="form-field20"
                           >
                             Filter by course
                           </label>
@@ -1630,7 +1630,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
                           >
                             <select
                               className="form-control"
-                              id="form-field17"
+                              id="form-field20"
                               onBlur={[Function]}
                               onChange={[Function]}
                               value=""
@@ -1652,7 +1652,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
                         >
                           <label
                             className="pgn__form-label search-label mb-2 d-flex align-items-center"
-                            htmlFor="form-field18"
+                            htmlFor="form-field21"
                           >
                             <span>
                               Filter by start date
@@ -1688,7 +1688,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
                             <select
                               className="form-control"
                               disabled={true}
-                              id="form-field18"
+                              id="form-field21"
                               onBlur={[Function]}
                               onChange={[Function]}
                               value=""
@@ -1725,7 +1725,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
                           >
                             <label
                               className="m-0"
-                              htmlFor="pgn-searchfield-input-19"
+                              htmlFor="pgn-searchfield-input-22"
                             >
                               <span
                                 className="sr-only"
@@ -1737,7 +1737,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
                               className="form-control"
                               data-hj-suppress={true}
                               disabled={false}
-                              id="pgn-searchfield-input-19"
+                              id="pgn-searchfield-input-22"
                               name="searchfield-input"
                               onBlur={[Function]}
                               onChange={[Function]}
@@ -1811,7 +1811,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
                 >
                   <label
                     className="m-0"
-                    htmlFor="pgn-searchfield-input-20"
+                    htmlFor="pgn-searchfield-input-23"
                   >
                     <span
                       className="sr-only"
@@ -1822,7 +1822,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
                   <input
                     className="form-control"
                     disabled={false}
-                    id="pgn-searchfield-input-20"
+                    id="pgn-searchfield-input-23"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -3166,7 +3166,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                         >
                           <label
                             className="pgn__form-label search-label mb-2"
-                            htmlFor="form-field52"
+                            htmlFor="form-field60"
                           >
                             Filter by course
                           </label>
@@ -3175,7 +3175,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                           >
                             <select
                               className="form-control"
-                              id="form-field52"
+                              id="form-field60"
                               onBlur={[Function]}
                               onChange={[Function]}
                               value=""
@@ -3197,7 +3197,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                         >
                           <label
                             className="pgn__form-label search-label mb-2 d-flex align-items-center"
-                            htmlFor="form-field53"
+                            htmlFor="form-field61"
                           >
                             <span>
                               Filter by start date
@@ -3233,7 +3233,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                             <select
                               className="form-control"
                               disabled={true}
-                              id="form-field53"
+                              id="form-field61"
                               onBlur={[Function]}
                               onChange={[Function]}
                               value=""
@@ -3270,7 +3270,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                           >
                             <label
                               className="m-0"
-                              htmlFor="pgn-searchfield-input-54"
+                              htmlFor="pgn-searchfield-input-62"
                             >
                               <span
                                 className="sr-only"
@@ -3282,7 +3282,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                               className="form-control"
                               data-hj-suppress={true}
                               disabled={false}
-                              id="pgn-searchfield-input-54"
+                              id="pgn-searchfield-input-62"
                               name="searchfield-input"
                               onBlur={[Function]}
                               onChange={[Function]}
@@ -3356,7 +3356,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                 >
                   <label
                     className="m-0"
-                    htmlFor="pgn-searchfield-input-55"
+                    htmlFor="pgn-searchfield-input-63"
                   >
                     <span
                       className="sr-only"
@@ -3367,7 +3367,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   <input
                     className="form-control"
                     disabled={false}
-                    id="pgn-searchfield-input-55"
+                    id="pgn-searchfield-input-63"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -4711,7 +4711,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                         >
                           <label
                             className="pgn__form-label search-label mb-2"
-                            htmlFor="form-field59"
+                            htmlFor="form-field68"
                           >
                             Filter by course
                           </label>
@@ -4720,7 +4720,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                           >
                             <select
                               className="form-control"
-                              id="form-field59"
+                              id="form-field68"
                               onBlur={[Function]}
                               onChange={[Function]}
                               value=""
@@ -4742,7 +4742,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                         >
                           <label
                             className="pgn__form-label search-label mb-2 d-flex align-items-center"
-                            htmlFor="form-field60"
+                            htmlFor="form-field69"
                           >
                             <span>
                               Filter by start date
@@ -4778,7 +4778,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                             <select
                               className="form-control"
                               disabled={true}
-                              id="form-field60"
+                              id="form-field69"
                               onBlur={[Function]}
                               onChange={[Function]}
                               value=""
@@ -4815,7 +4815,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                           >
                             <label
                               className="m-0"
-                              htmlFor="pgn-searchfield-input-61"
+                              htmlFor="pgn-searchfield-input-70"
                             >
                               <span
                                 className="sr-only"
@@ -4827,7 +4827,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                               className="form-control"
                               data-hj-suppress={true}
                               disabled={false}
-                              id="pgn-searchfield-input-61"
+                              id="pgn-searchfield-input-70"
                               name="searchfield-input"
                               onBlur={[Function]}
                               onChange={[Function]}
@@ -4901,7 +4901,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                 >
                   <label
                     className="m-0"
-                    htmlFor="pgn-searchfield-input-62"
+                    htmlFor="pgn-searchfield-input-71"
                   >
                     <span
                       className="sr-only"
@@ -4912,7 +4912,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   <input
                     className="form-control"
                     disabled={false}
-                    id="pgn-searchfield-input-62"
+                    id="pgn-searchfield-input-71"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -6256,7 +6256,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                         >
                           <label
                             className="pgn__form-label search-label mb-2"
-                            htmlFor="form-field66"
+                            htmlFor="form-field76"
                           >
                             Filter by course
                           </label>
@@ -6265,7 +6265,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                           >
                             <select
                               className="form-control"
-                              id="form-field66"
+                              id="form-field76"
                               onBlur={[Function]}
                               onChange={[Function]}
                               value=""
@@ -6287,7 +6287,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                         >
                           <label
                             className="pgn__form-label search-label mb-2 d-flex align-items-center"
-                            htmlFor="form-field67"
+                            htmlFor="form-field77"
                           >
                             <span>
                               Filter by start date
@@ -6323,7 +6323,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                             <select
                               className="form-control"
                               disabled={true}
-                              id="form-field67"
+                              id="form-field77"
                               onBlur={[Function]}
                               onChange={[Function]}
                               value=""
@@ -6360,7 +6360,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                           >
                             <label
                               className="m-0"
-                              htmlFor="pgn-searchfield-input-68"
+                              htmlFor="pgn-searchfield-input-78"
                             >
                               <span
                                 className="sr-only"
@@ -6372,7 +6372,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                               className="form-control"
                               data-hj-suppress={true}
                               disabled={false}
-                              id="pgn-searchfield-input-68"
+                              id="pgn-searchfield-input-78"
                               name="searchfield-input"
                               onBlur={[Function]}
                               onChange={[Function]}
@@ -6446,7 +6446,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                 >
                   <label
                     className="m-0"
-                    htmlFor="pgn-searchfield-input-69"
+                    htmlFor="pgn-searchfield-input-79"
                   >
                     <span
                       className="sr-only"
@@ -6457,7 +6457,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                   <input
                     className="form-control"
                     disabled={false}
-                    id="pgn-searchfield-input-69"
+                    id="pgn-searchfield-input-79"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -7801,7 +7801,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                         >
                           <label
                             className="pgn__form-label search-label mb-2"
-                            htmlFor="form-field3"
+                            htmlFor="form-field4"
                           >
                             Filter by course
                           </label>
@@ -7810,7 +7810,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                           >
                             <select
                               className="form-control"
-                              id="form-field3"
+                              id="form-field4"
                               onBlur={[Function]}
                               onChange={[Function]}
                               value=""
@@ -7832,7 +7832,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                         >
                           <label
                             className="pgn__form-label search-label mb-2 d-flex align-items-center"
-                            htmlFor="form-field4"
+                            htmlFor="form-field5"
                           >
                             <span>
                               Filter by start date
@@ -7868,7 +7868,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                             <select
                               className="form-control"
                               disabled={true}
-                              id="form-field4"
+                              id="form-field5"
                               onBlur={[Function]}
                               onChange={[Function]}
                               value=""
@@ -7905,7 +7905,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                           >
                             <label
                               className="m-0"
-                              htmlFor="pgn-searchfield-input-5"
+                              htmlFor="pgn-searchfield-input-6"
                             >
                               <span
                                 className="sr-only"
@@ -7917,7 +7917,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                               className="form-control"
                               data-hj-suppress={true}
                               disabled={false}
-                              id="pgn-searchfield-input-5"
+                              id="pgn-searchfield-input-6"
                               name="searchfield-input"
                               onBlur={[Function]}
                               onChange={[Function]}
@@ -7991,7 +7991,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                 >
                   <label
                     className="m-0"
-                    htmlFor="pgn-searchfield-input-6"
+                    htmlFor="pgn-searchfield-input-7"
                   >
                     <span
                       className="sr-only"
@@ -8002,7 +8002,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                   <input
                     className="form-control"
                     disabled={false}
-                    id="pgn-searchfield-input-6"
+                    id="pgn-searchfield-input-7"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -9346,7 +9346,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                         >
                           <label
                             className="pgn__form-label search-label mb-2"
-                            htmlFor="form-field45"
+                            htmlFor="form-field52"
                           >
                             Filter by course
                           </label>
@@ -9355,7 +9355,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                           >
                             <select
                               className="form-control"
-                              id="form-field45"
+                              id="form-field52"
                               onBlur={[Function]}
                               onChange={[Function]}
                               value=""
@@ -9377,7 +9377,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                         >
                           <label
                             className="pgn__form-label search-label mb-2 d-flex align-items-center"
-                            htmlFor="form-field46"
+                            htmlFor="form-field53"
                           >
                             <span>
                               Filter by start date
@@ -9413,7 +9413,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                             <select
                               className="form-control"
                               disabled={true}
-                              id="form-field46"
+                              id="form-field53"
                               onBlur={[Function]}
                               onChange={[Function]}
                               value=""
@@ -9450,7 +9450,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                           >
                             <label
                               className="m-0"
-                              htmlFor="pgn-searchfield-input-47"
+                              htmlFor="pgn-searchfield-input-54"
                             >
                               <span
                                 className="sr-only"
@@ -9462,7 +9462,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                               className="form-control"
                               data-hj-suppress={true}
                               disabled={false}
-                              id="pgn-searchfield-input-47"
+                              id="pgn-searchfield-input-54"
                               name="searchfield-input"
                               onBlur={[Function]}
                               onChange={[Function]}
@@ -9536,7 +9536,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                 >
                   <label
                     className="m-0"
-                    htmlFor="pgn-searchfield-input-48"
+                    htmlFor="pgn-searchfield-input-55"
                   >
                     <span
                       className="sr-only"
@@ -9547,7 +9547,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   <input
                     className="form-control"
                     disabled={false}
-                    id="pgn-searchfield-input-48"
+                    id="pgn-searchfield-input-55"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -10891,7 +10891,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                         >
                           <label
                             className="pgn__form-label search-label mb-2"
-                            htmlFor="form-field38"
+                            htmlFor="form-field44"
                           >
                             Filter by course
                           </label>
@@ -10900,7 +10900,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                           >
                             <select
                               className="form-control"
-                              id="form-field38"
+                              id="form-field44"
                               onBlur={[Function]}
                               onChange={[Function]}
                               value=""
@@ -10922,7 +10922,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                         >
                           <label
                             className="pgn__form-label search-label mb-2 d-flex align-items-center"
-                            htmlFor="form-field39"
+                            htmlFor="form-field45"
                           >
                             <span>
                               Filter by start date
@@ -10958,7 +10958,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                             <select
                               className="form-control"
                               disabled={true}
-                              id="form-field39"
+                              id="form-field45"
                               onBlur={[Function]}
                               onChange={[Function]}
                               value=""
@@ -10995,7 +10995,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                           >
                             <label
                               className="m-0"
-                              htmlFor="pgn-searchfield-input-40"
+                              htmlFor="pgn-searchfield-input-46"
                             >
                               <span
                                 className="sr-only"
@@ -11007,7 +11007,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                               className="form-control"
                               data-hj-suppress={true}
                               disabled={false}
-                              id="pgn-searchfield-input-40"
+                              id="pgn-searchfield-input-46"
                               name="searchfield-input"
                               onBlur={[Function]}
                               onChange={[Function]}
@@ -11081,7 +11081,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                 >
                   <label
                     className="m-0"
-                    htmlFor="pgn-searchfield-input-41"
+                    htmlFor="pgn-searchfield-input-47"
                   >
                     <span
                       className="sr-only"
@@ -11092,7 +11092,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   <input
                     className="form-control"
                     disabled={false}
-                    id="pgn-searchfield-input-41"
+                    id="pgn-searchfield-input-47"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -12436,7 +12436,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
                         >
                           <label
                             className="pgn__form-label search-label mb-2"
-                            htmlFor="form-field24"
+                            htmlFor="form-field28"
                           >
                             Filter by course
                           </label>
@@ -12445,7 +12445,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
                           >
                             <select
                               className="form-control"
-                              id="form-field24"
+                              id="form-field28"
                               onBlur={[Function]}
                               onChange={[Function]}
                               value=""
@@ -12467,7 +12467,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
                         >
                           <label
                             className="pgn__form-label search-label mb-2 d-flex align-items-center"
-                            htmlFor="form-field25"
+                            htmlFor="form-field29"
                           >
                             <span>
                               Filter by start date
@@ -12503,7 +12503,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
                             <select
                               className="form-control"
                               disabled={true}
-                              id="form-field25"
+                              id="form-field29"
                               onBlur={[Function]}
                               onChange={[Function]}
                               value=""
@@ -12540,7 +12540,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
                           >
                             <label
                               className="m-0"
-                              htmlFor="pgn-searchfield-input-26"
+                              htmlFor="pgn-searchfield-input-30"
                             >
                               <span
                                 className="sr-only"
@@ -12552,7 +12552,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
                               className="form-control"
                               data-hj-suppress={true}
                               disabled={false}
-                              id="pgn-searchfield-input-26"
+                              id="pgn-searchfield-input-30"
                               name="searchfield-input"
                               onBlur={[Function]}
                               onChange={[Function]}
@@ -12626,7 +12626,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
                 >
                   <label
                     className="m-0"
-                    htmlFor="pgn-searchfield-input-27"
+                    htmlFor="pgn-searchfield-input-31"
                   >
                     <span
                       className="sr-only"
@@ -12637,7 +12637,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
                   <input
                     className="form-control"
                     disabled={false}
-                    id="pgn-searchfield-input-27"
+                    id="pgn-searchfield-input-31"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -13981,7 +13981,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
                         >
                           <label
                             className="pgn__form-label search-label mb-2"
-                            htmlFor="form-field10"
+                            htmlFor="form-field12"
                           >
                             Filter by course
                           </label>
@@ -13990,7 +13990,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
                           >
                             <select
                               className="form-control"
-                              id="form-field10"
+                              id="form-field12"
                               onBlur={[Function]}
                               onChange={[Function]}
                               value=""
@@ -14012,7 +14012,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
                         >
                           <label
                             className="pgn__form-label search-label mb-2 d-flex align-items-center"
-                            htmlFor="form-field11"
+                            htmlFor="form-field13"
                           >
                             <span>
                               Filter by start date
@@ -14048,7 +14048,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
                             <select
                               className="form-control"
                               disabled={true}
-                              id="form-field11"
+                              id="form-field13"
                               onBlur={[Function]}
                               onChange={[Function]}
                               value=""
@@ -14085,7 +14085,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
                           >
                             <label
                               className="m-0"
-                              htmlFor="pgn-searchfield-input-12"
+                              htmlFor="pgn-searchfield-input-14"
                             >
                               <span
                                 className="sr-only"
@@ -14097,7 +14097,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
                               className="form-control"
                               data-hj-suppress={true}
                               disabled={false}
-                              id="pgn-searchfield-input-12"
+                              id="pgn-searchfield-input-14"
                               name="searchfield-input"
                               onBlur={[Function]}
                               onChange={[Function]}
@@ -14171,7 +14171,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
                 >
                   <label
                     className="m-0"
-                    htmlFor="pgn-searchfield-input-13"
+                    htmlFor="pgn-searchfield-input-15"
                   >
                     <span
                       className="sr-only"
@@ -14182,7 +14182,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
                   <input
                     className="form-control"
                     disabled={false}
-                    id="pgn-searchfield-input-13"
+                    id="pgn-searchfield-input-15"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -15526,7 +15526,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
                         >
                           <label
                             className="pgn__form-label search-label mb-2"
-                            htmlFor="form-field31"
+                            htmlFor="form-field36"
                           >
                             Filter by course
                           </label>
@@ -15535,7 +15535,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
                           >
                             <select
                               className="form-control"
-                              id="form-field31"
+                              id="form-field36"
                               onBlur={[Function]}
                               onChange={[Function]}
                               value=""
@@ -15557,7 +15557,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
                         >
                           <label
                             className="pgn__form-label search-label mb-2 d-flex align-items-center"
-                            htmlFor="form-field32"
+                            htmlFor="form-field37"
                           >
                             <span>
                               Filter by start date
@@ -15593,7 +15593,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
                             <select
                               className="form-control"
                               disabled={true}
-                              id="form-field32"
+                              id="form-field37"
                               onBlur={[Function]}
                               onChange={[Function]}
                               value=""
@@ -15630,7 +15630,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
                           >
                             <label
                               className="m-0"
-                              htmlFor="pgn-searchfield-input-33"
+                              htmlFor="pgn-searchfield-input-38"
                             >
                               <span
                                 className="sr-only"
@@ -15642,7 +15642,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
                               className="form-control"
                               data-hj-suppress={true}
                               disabled={false}
-                              id="pgn-searchfield-input-33"
+                              id="pgn-searchfield-input-38"
                               name="searchfield-input"
                               onBlur={[Function]}
                               onChange={[Function]}
@@ -15716,7 +15716,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
                 >
                   <label
                     className="m-0"
-                    htmlFor="pgn-searchfield-input-34"
+                    htmlFor="pgn-searchfield-input-39"
                   >
                     <span
                       className="sr-only"
@@ -15727,7 +15727,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
                   <input
                     className="form-control"
                     disabled={false}
-                    id="pgn-searchfield-input-34"
+                    id="pgn-searchfield-input-39"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -17120,7 +17120,7 @@ exports[`<Admin /> renders correctly with dashboard insights data renders dashbo
                         >
                           <label
                             className="pgn__form-label search-label mb-2"
-                            htmlFor="form-field84"
+                            htmlFor="form-field98"
                           >
                             Filter by course
                           </label>
@@ -17129,7 +17129,7 @@ exports[`<Admin /> renders correctly with dashboard insights data renders dashbo
                           >
                             <select
                               className="form-control"
-                              id="form-field84"
+                              id="form-field98"
                               onBlur={[Function]}
                               onChange={[Function]}
                               value=""
@@ -17151,7 +17151,7 @@ exports[`<Admin /> renders correctly with dashboard insights data renders dashbo
                         >
                           <label
                             className="pgn__form-label search-label mb-2 d-flex align-items-center"
-                            htmlFor="form-field85"
+                            htmlFor="form-field99"
                           >
                             <span>
                               Filter by start date
@@ -17187,7 +17187,7 @@ exports[`<Admin /> renders correctly with dashboard insights data renders dashbo
                             <select
                               className="form-control"
                               disabled={true}
-                              id="form-field85"
+                              id="form-field99"
                               onBlur={[Function]}
                               onChange={[Function]}
                               value=""
@@ -17224,7 +17224,7 @@ exports[`<Admin /> renders correctly with dashboard insights data renders dashbo
                           >
                             <label
                               className="m-0"
-                              htmlFor="pgn-searchfield-input-86"
+                              htmlFor="pgn-searchfield-input-100"
                             >
                               <span
                                 className="sr-only"
@@ -17236,7 +17236,7 @@ exports[`<Admin /> renders correctly with dashboard insights data renders dashbo
                               className="form-control"
                               data-hj-suppress={true}
                               disabled={false}
-                              id="pgn-searchfield-input-86"
+                              id="pgn-searchfield-input-100"
                               name="searchfield-input"
                               onBlur={[Function]}
                               onChange={[Function]}
@@ -17310,7 +17310,7 @@ exports[`<Admin /> renders correctly with dashboard insights data renders dashbo
                 >
                   <label
                     className="m-0"
-                    htmlFor="pgn-searchfield-input-87"
+                    htmlFor="pgn-searchfield-input-101"
                   >
                     <span
                       className="sr-only"
@@ -17321,7 +17321,7 @@ exports[`<Admin /> renders correctly with dashboard insights data renders dashbo
                   <input
                     className="form-control"
                     disabled={false}
-                    id="pgn-searchfield-input-87"
+                    id="pgn-searchfield-input-101"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -18140,7 +18140,7 @@ exports[`<Admin /> renders correctly with error state 1`] = `
                 >
                   <label
                     className="m-0"
-                    htmlFor="pgn-searchfield-input-73"
+                    htmlFor="pgn-searchfield-input-84"
                   >
                     <span
                       className="sr-only"
@@ -18151,7 +18151,7 @@ exports[`<Admin /> renders correctly with error state 1`] = `
                   <input
                     className="form-control"
                     disabled={false}
-                    id="pgn-searchfield-input-73"
+                    id="pgn-searchfield-input-84"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -18987,7 +18987,7 @@ exports[`<Admin /> renders correctly with loading state 1`] = `
                 >
                   <label
                     className="m-0"
-                    htmlFor="pgn-searchfield-input-75"
+                    htmlFor="pgn-searchfield-input-87"
                   >
                     <span
                       className="sr-only"
@@ -18998,7 +18998,7 @@ exports[`<Admin /> renders correctly with loading state 1`] = `
                   <input
                     className="form-control"
                     disabled={false}
-                    id="pgn-searchfield-input-75"
+                    id="pgn-searchfield-input-87"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -20387,7 +20387,7 @@ exports[`<Admin /> renders correctly with no dashboard insights data 1`] = `
                         >
                           <label
                             className="pgn__form-label search-label mb-2"
-                            htmlFor="form-field77"
+                            htmlFor="form-field90"
                           >
                             Filter by course
                           </label>
@@ -20396,7 +20396,7 @@ exports[`<Admin /> renders correctly with no dashboard insights data 1`] = `
                           >
                             <select
                               className="form-control"
-                              id="form-field77"
+                              id="form-field90"
                               onBlur={[Function]}
                               onChange={[Function]}
                               value=""
@@ -20418,7 +20418,7 @@ exports[`<Admin /> renders correctly with no dashboard insights data 1`] = `
                         >
                           <label
                             className="pgn__form-label search-label mb-2 d-flex align-items-center"
-                            htmlFor="form-field78"
+                            htmlFor="form-field91"
                           >
                             <span>
                               Filter by start date
@@ -20454,7 +20454,7 @@ exports[`<Admin /> renders correctly with no dashboard insights data 1`] = `
                             <select
                               className="form-control"
                               disabled={true}
-                              id="form-field78"
+                              id="form-field91"
                               onBlur={[Function]}
                               onChange={[Function]}
                               value=""
@@ -20491,7 +20491,7 @@ exports[`<Admin /> renders correctly with no dashboard insights data 1`] = `
                           >
                             <label
                               className="m-0"
-                              htmlFor="pgn-searchfield-input-79"
+                              htmlFor="pgn-searchfield-input-92"
                             >
                               <span
                                 className="sr-only"
@@ -20503,7 +20503,7 @@ exports[`<Admin /> renders correctly with no dashboard insights data 1`] = `
                               className="form-control"
                               data-hj-suppress={true}
                               disabled={false}
-                              id="pgn-searchfield-input-79"
+                              id="pgn-searchfield-input-92"
                               name="searchfield-input"
                               onBlur={[Function]}
                               onChange={[Function]}
@@ -20577,7 +20577,7 @@ exports[`<Admin /> renders correctly with no dashboard insights data 1`] = `
                 >
                   <label
                     className="m-0"
-                    htmlFor="pgn-searchfield-input-80"
+                    htmlFor="pgn-searchfield-input-93"
                   >
                     <span
                       className="sr-only"
@@ -20588,7 +20588,7 @@ exports[`<Admin /> renders correctly with no dashboard insights data 1`] = `
                   <input
                     className="form-control"
                     disabled={false}
-                    id="pgn-searchfield-input-80"
+                    id="pgn-searchfield-input-93"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
diff --git a/src/components/Admin/__snapshots__/CompletedLearnersTable.test.jsx.snap b/src/components/Admin/__snapshots__/CompletedLearnersTable.test.jsx.snap
new file mode 100644
index 0000000000..ecbab29c16
--- /dev/null
+++ b/src/components/Admin/__snapshots__/CompletedLearnersTable.test.jsx.snap
@@ -0,0 +1,236 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CompletedLearnersTable renders empty state correctly 1`] = `
+<div
+  className="pgn__data-table-layout-wrapper"
+>
+  <div
+    className="pgn__data-table-layout-main"
+  >
+    <div
+      className="pgn__data-table-wrapper"
+    >
+      <div
+        className="pgn__data-table-status-bar"
+        data-testid="table-control-bar"
+      >
+        <div
+          className="pgn__data-table-status"
+        >
+          <div
+            className="pgn__data-table-status-left"
+          />
+          <div
+            className="pgn__data-table-actions-right"
+          >
+            <div
+              className="pgn__data-table-toggle"
+            />
+            <div />
+          </div>
+        </div>
+      </div>
+      <div
+        className="pgn__data-table-container"
+        data-testid="data-table-container"
+      >
+        <table
+          className="pgn__data-table is-striped"
+          role="table"
+        >
+          <thead>
+            <tr
+              role="row"
+            >
+              <th
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
+                >
+                  <span>
+                    Email
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
+                      aria-hidden={true}
+                      fill="none"
+                      focusable={false}
+                      height={24}
+                      role="img"
+                      viewBox="0 0 24 24"
+                      width={24}
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="m7 10 5-5 5 5H7ZM7 14l5 5 5-5H7Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </th>
+              <th
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
+                >
+                  <span>
+                    Total Course Completed Count
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-down"
+                  >
+                    <svg
+                      aria-hidden={true}
+                      fill="none"
+                      focusable={false}
+                      height={24}
+                      role="img"
+                      viewBox="0 0 24 24"
+                      width={24}
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="m7 10 5 5 5-5H7Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            role="rowgroup"
+          />
+        </table>
+      </div>
+      <div
+        className="pgn__data-table-empty"
+      >
+        No results found
+      </div>
+      <div
+        className="pgn__data-table-footer"
+        data-testid="table-footer"
+      >
+        <nav
+          aria-label="table pagination"
+          className="pagination-minimal"
+        >
+          <div
+            aria-atomic={true}
+            aria-live="polite"
+            aria-relevant="text"
+            className="sr-only"
+          >
+            Page 21, Current Page, of -1
+          </div>
+          <ul
+            className="pagination"
+          >
+            <li
+              className="page-item"
+            >
+              <button
+                aria-label="Previous, Page 20"
+                className="btn-icon btn-icon-primary btn-icon-md previous page-link"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                <span
+                  className="btn-icon__icon-container"
+                >
+                  <span
+                    className="pgn__icon btn-icon__icon"
+                  >
+                    <svg
+                      aria-hidden={true}
+                      fill="none"
+                      focusable={false}
+                      height={24}
+                      role="img"
+                      viewBox="0 0 24 24"
+                      width={24}
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M17.51 3.87 15.73 2.1 5.84 12l9.9 9.9 1.77-1.77L9.38 12l8.13-8.13Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </button>
+            </li>
+            <li
+              className="page-item disabled"
+            >
+              <button
+                aria-label="Next, Page 22"
+                className="btn-icon btn-icon-primary btn-icon-md next page-link"
+                disabled={true}
+                onClick={[Function]}
+                tabIndex="-1"
+                type="button"
+              >
+                <span
+                  className="btn-icon__icon-container"
+                >
+                  <span
+                    className="pgn__icon btn-icon__icon"
+                  >
+                    <svg
+                      aria-hidden={true}
+                      fill="none"
+                      focusable={false}
+                      height={24}
+                      role="img"
+                      viewBox="0 0 24 24"
+                      width={24}
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="m6.49 20.13 1.77 1.77 9.9-9.9-9.9-9.9-1.77 1.77L14.62 12l-8.13 8.13Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </button>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/Admin/data/hooks/index.js b/src/components/Admin/data/hooks/index.js
index 0932cd221d..43104c3661 100644
--- a/src/components/Admin/data/hooks/index.js
+++ b/src/components/Admin/data/hooks/index.js
@@ -1,55 +1,2 @@
-import { useEffect, useState } from 'react';
-import { logError } from '@edx/frontend-platform/logging';
-import EnterpriseDataApiService from '../../../../data/services/EnterpriseDataApiService';
-
-const useModuleActivityReport = ({
-  enterpriseId, page, filters, searchQuery,
-}) => {
-  const [isLoading, setIsLoading] = useState(true);
-
-  const [paginationData, setPaginationData] = useState({
-    itemCount: 0,
-    pageCount: 0,
-    data: [],
-  });
-
-  useEffect(() => {
-    // Reset the loading state
-    setIsLoading(true);
-
-    EnterpriseDataApiService.fetchEnterpriseModuleActivityReport(enterpriseId, {
-      page: page + 1,
-      search: searchQuery,
-      ...filters,
-    })
-      .then((response) => {
-        setPaginationData({
-          itemCount: response.data.count,
-          pageCount: response.data.num_pages,
-          data: response.data.results,
-          currentPage: response.data.currentPage,
-        });
-
-        // Reset the loading state
-        setIsLoading(false);
-      })
-      .catch((err) => {
-        logError(err);
-
-        // Reset the loading state
-        setIsLoading(false);
-      });
-  }, [
-    enterpriseId,
-    page,
-    filters,
-    searchQuery,
-  ]);
-
-  return {
-    isLoading,
-    paginationData,
-  };
-};
-
-export default useModuleActivityReport;
+export { default as useGenericTableData } from './useGenericTableData';
+export { default as useModuleActivityReport } from './useModuleActivityReport';
diff --git a/src/components/Admin/data/hooks/useGenericTableData.js b/src/components/Admin/data/hooks/useGenericTableData.js
new file mode 100644
index 0000000000..ed38940a00
--- /dev/null
+++ b/src/components/Admin/data/hooks/useGenericTableData.js
@@ -0,0 +1,86 @@
+import {
+  useCallback, useMemo, useRef, useState,
+} from 'react';
+import { camelCaseObject } from '@edx/frontend-platform/utils';
+import debounce from 'lodash.debounce';
+import { logError } from '@edx/frontend-platform/logging';
+import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
+import EVENT_NAMES from '../../../../eventTracking';
+
+const applySortByToOptions = (sortBy, options, apiFieldsForColumnAccessor) => {
+  if (!sortBy || sortBy.length === 0) {
+    return;
+  }
+  const orderingStrings = sortBy.map(({ id, desc }) => {
+    const apiFieldForColumnAccessor = apiFieldsForColumnAccessor[id];
+    if (!apiFieldForColumnAccessor) {
+      return undefined;
+    }
+    const apiFieldKey = apiFieldForColumnAccessor.key;
+    return desc ? `-${apiFieldKey}` : apiFieldKey;
+  }).filter(orderingString => !!orderingString);
+
+  Object.assign(options, {
+    ordering: orderingStrings.join(','),
+  });
+};
+
+const useGenericTableData = (enterpriseId, tableId, fetchMethod, apiFields) => {
+  const shouldTrackFetchEvents = useRef(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [tableData, setTableData] = useState({
+    itemCount: 0,
+    pageCount: 0,
+    results: [],
+  });
+
+  const fetchTableData = useCallback(async (args) => {
+    try {
+      setIsLoading(true);
+      const options = {
+        page: args.pageIndex + 1,
+        pageSize: args.pageSize,
+      };
+      applySortByToOptions(args.sortBy, options, apiFields);
+
+      const response = await fetchMethod(enterpriseId, options);
+      const data = camelCaseObject(response.data);
+
+      setTableData({
+        itemCount: data.count,
+        pageCount: data.numPages ?? Math.floor(data.count / options.pageSize),
+        results: data.results,
+      });
+
+      if (shouldTrackFetchEvents.current) {
+        sendEnterpriseTrackEvent(
+          enterpriseId,
+          EVENT_NAMES.PROGRESS_REPORT.DATATABLE_SORT_BY_OR_FILTER,
+          {
+            tableId,
+            ...options,
+          },
+        );
+      } else {
+        shouldTrackFetchEvents.current = true;
+      }
+    } catch (error) {
+      logError(error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [enterpriseId, tableId, fetchMethod, apiFields]);
+
+  const debouncedFetchTableData = useMemo(
+    () => debounce(fetchTableData, 300),
+    [fetchTableData],
+  );
+
+  return {
+    isLoading,
+    tableData,
+    fetchTableData: debouncedFetchTableData,
+  };
+};
+
+export default useGenericTableData;
diff --git a/src/components/Admin/data/hooks/useGenericTableData.test.js b/src/components/Admin/data/hooks/useGenericTableData.test.js
new file mode 100644
index 0000000000..4800204052
--- /dev/null
+++ b/src/components/Admin/data/hooks/useGenericTableData.test.js
@@ -0,0 +1,157 @@
+import { renderHook } from '@testing-library/react-hooks';
+import debounce from 'lodash.debounce';
+import { logError } from '@edx/frontend-platform/logging';
+import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
+import EVENT_NAMES from '../../../../eventTracking';
+import useGenericTableData from './useGenericTableData';
+
+jest.mock('lodash.debounce', () => jest.fn(fn => fn));
+jest.mock('@edx/frontend-platform/logging', () => ({
+  logError: jest.fn(),
+}));
+jest.mock('@edx/frontend-enterprise-utils', () => {
+  const originalModule = jest.requireActual('@edx/frontend-enterprise-utils');
+  return ({
+    ...originalModule,
+    sendEnterpriseTrackEvent: jest.fn(),
+  });
+});
+
+const mockFetchMethod = jest.fn();
+const mockEnterpriseId = 'test-enterprise-id';
+const mockTableId = 'test-table-id';
+const mockApiFields = {
+  userEmail: { key: 'user_email' },
+  completedCourses: { key: 'completed_courses' },
+};
+
+describe('useGenericTableData hook', () => {
+  beforeEach(() => {
+    mockFetchMethod.mockReset();
+    sendEnterpriseTrackEvent.mockReset();
+    debounce.mockClear();
+  });
+
+  it('should initialize with loading state and empty data', () => {
+    const { result } = renderHook(() => useGenericTableData(
+      mockEnterpriseId,
+      mockTableId,
+      mockFetchMethod,
+      mockApiFields,
+    ));
+
+    expect(result.current.isLoading).toBe(true);
+
+    expect(result.current.tableData).toEqual({
+      itemCount: 0,
+      pageCount: 0,
+      results: [],
+    });
+  });
+
+  it('should call fetchMethod and update state when fetchTableData is invoked', async () => {
+    const mockResponseData = {
+      data: {
+        count: 2,
+        numPages: 1,
+        results: [{ user_email: 'test@example.com', completed_courses: 5 }],
+      },
+    };
+
+    mockFetchMethod.mockResolvedValueOnce(mockResponseData);
+
+    const { result, waitForNextUpdate } = renderHook(() => useGenericTableData(
+      mockEnterpriseId,
+      mockTableId,
+      mockFetchMethod,
+      mockApiFields,
+    ));
+
+    result.current.fetchTableData({ pageIndex: 0, pageSize: 10, sortBy: [] });
+
+    await waitForNextUpdate();
+
+    expect(mockFetchMethod).toHaveBeenCalledWith(mockEnterpriseId, { page: 1, pageSize: 10 });
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.tableData).toEqual({
+      itemCount: 2,
+      pageCount: 1,
+      results: [{ userEmail: 'test@example.com', completedCourses: 5 }],
+    });
+  });
+
+  it('should handle API errors and log the error', async () => {
+    const mockError = new Error('API failed');
+    mockFetchMethod.mockRejectedValueOnce(mockError);
+
+    const { result, waitForNextUpdate } = renderHook(() => useGenericTableData(
+      mockEnterpriseId,
+      mockTableId,
+      mockFetchMethod,
+      mockApiFields,
+    ));
+
+    result.current.fetchTableData({ pageIndex: 0, pageSize: 10, sortBy: [] });
+
+    await waitForNextUpdate();
+
+    expect(logError).toHaveBeenCalledWith(mockError);
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.tableData).toEqual({
+      itemCount: 0,
+      pageCount: 0,
+      results: [],
+    });
+  });
+
+  it('should debounce fetchTableData', async () => {
+    const mockDebounce = jest.fn(fn => fn);
+    debounce.mockImplementationOnce(mockDebounce);
+
+    const { result } = renderHook(() => useGenericTableData(
+      mockEnterpriseId,
+      mockTableId,
+      mockFetchMethod,
+      mockApiFields,
+    ));
+
+    expect(debounce).toHaveBeenCalled();
+    expect(typeof result.current.fetchTableData).toBe('function');
+  });
+
+  it('should track event after fetching data', async () => {
+    const mockResponseData = {
+      data: {
+        count: 2,
+        numPages: 1,
+        results: [{ user_email: 'test@example.com', completed_courses: 5 }],
+      },
+    };
+    mockFetchMethod.mockResolvedValue(mockResponseData);
+
+    const { result, waitForNextUpdate } = renderHook(() => useGenericTableData(
+      mockEnterpriseId,
+      mockTableId,
+      mockFetchMethod,
+      mockApiFields,
+    ));
+
+    // First fetch (will not track the event)
+    result.current.fetchTableData({ pageIndex: 0, pageSize: 10, sortBy: [] });
+    // // Second fetch (should track the event)
+    result.current.fetchTableData({ pageIndex: 1, pageSize: 10, sortBy: [] });
+
+    await waitForNextUpdate();
+
+    expect(sendEnterpriseTrackEvent).toHaveBeenCalledTimes(1);
+    expect(sendEnterpriseTrackEvent).toHaveBeenCalledWith(
+      mockEnterpriseId,
+      EVENT_NAMES.PROGRESS_REPORT.DATATABLE_SORT_BY_OR_FILTER,
+      {
+        tableId: mockTableId,
+        page: 2,
+        pageSize: 10,
+      },
+    );
+  });
+});
diff --git a/src/components/Admin/data/hooks/useModuleActivityReport.js b/src/components/Admin/data/hooks/useModuleActivityReport.js
new file mode 100644
index 0000000000..0932cd221d
--- /dev/null
+++ b/src/components/Admin/data/hooks/useModuleActivityReport.js
@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+import { logError } from '@edx/frontend-platform/logging';
+import EnterpriseDataApiService from '../../../../data/services/EnterpriseDataApiService';
+
+const useModuleActivityReport = ({
+  enterpriseId, page, filters, searchQuery,
+}) => {
+  const [isLoading, setIsLoading] = useState(true);
+
+  const [paginationData, setPaginationData] = useState({
+    itemCount: 0,
+    pageCount: 0,
+    data: [],
+  });
+
+  useEffect(() => {
+    // Reset the loading state
+    setIsLoading(true);
+
+    EnterpriseDataApiService.fetchEnterpriseModuleActivityReport(enterpriseId, {
+      page: page + 1,
+      search: searchQuery,
+      ...filters,
+    })
+      .then((response) => {
+        setPaginationData({
+          itemCount: response.data.count,
+          pageCount: response.data.num_pages,
+          data: response.data.results,
+          currentPage: response.data.currentPage,
+        });
+
+        // Reset the loading state
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        logError(err);
+
+        // Reset the loading state
+        setIsLoading(false);
+      });
+  }, [
+    enterpriseId,
+    page,
+    filters,
+    searchQuery,
+  ]);
+
+  return {
+    isLoading,
+    paginationData,
+  };
+};
+
+export default useModuleActivityReport;
diff --git a/src/components/Admin/index.jsx b/src/components/Admin/index.jsx
index d259d8f9a1..bb5b983067 100644
--- a/src/components/Admin/index.jsx
+++ b/src/components/Admin/index.jsx
@@ -15,7 +15,7 @@ import EnrollmentsTable from '../EnrollmentsTable';
 import RegisteredLearnersTable from '../RegisteredLearnersTable';
 import EnrolledLearnersTable from '../EnrolledLearnersTable';
 import EnrolledLearnersForInactiveCoursesTable from '../EnrolledLearnersForInactiveCoursesTable';
-import CompletedLearnersTable from '../CompletedLearnersTable';
+import CompletedLearnersTable from './CompletedLearnersTable';
 import PastWeekPassedLearnersTable from '../PastWeekPassedLearnersTable';
 import LearnerActivityTable from '../LearnerActivityTable';
 import DownloadCsvButton from '../../containers/DownloadCsvButton';
diff --git a/src/components/Admin/tabs/ModuleActivityReport.jsx b/src/components/Admin/tabs/ModuleActivityReport.jsx
index 88cbe3fc37..753c9f9471 100644
--- a/src/components/Admin/tabs/ModuleActivityReport.jsx
+++ b/src/components/Admin/tabs/ModuleActivityReport.jsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import EnterpriseDataApiService from '../../../data/services/EnterpriseDataApiService';
 import DownloadCsvButton from './DownloadCSVButton';
-import useModuleActivityReport from '../data/hooks';
+import useModuleActivityReport from '../data/hooks/useModuleActivityReport';
 import SearchBar from '../../SearchBar';
 
 const ModuleActivityReport = ({ enterpriseId }) => {
diff --git a/src/components/CompletedLearnersTable/__snapshots__/CompletedLearnersTable.test.jsx.snap b/src/components/CompletedLearnersTable/__snapshots__/CompletedLearnersTable.test.jsx.snap
deleted file mode 100644
index 722c7b349f..0000000000
--- a/src/components/CompletedLearnersTable/__snapshots__/CompletedLearnersTable.test.jsx.snap
+++ /dev/null
@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CompletedLearnersTable renders empty state correctly 1`] = `
-<div
-  className="fade alert-content alert alert-warning show"
-  role="alert"
->
-  <span
-    className="pgn__icon alert-icon"
-  >
-    <svg
-      aria-hidden={true}
-      fill="none"
-      focusable={false}
-      height={24}
-      role="img"
-      viewBox="0 0 24 24"
-      width={24}
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Z"
-        fill="currentColor"
-      />
-    </svg>
-  </span>
-  <div
-    className="pgn__alert-message-wrapper"
-  >
-    <div
-      className="alert-message-content"
-    >
-      There are no results.
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/components/CompletedLearnersTable/index.jsx b/src/components/CompletedLearnersTable/index.jsx
deleted file mode 100644
index 87bcda6bdf..0000000000
--- a/src/components/CompletedLearnersTable/index.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-
-import { useIntl } from '@edx/frontend-platform/i18n';
-
-import TableContainer from '../../containers/TableContainer';
-import EnterpriseDataApiService from '../../data/services/EnterpriseDataApiService';
-
-const CompletedLearnersTable = () => {
-  const intl = useIntl();
-
-  const tableColumns = [
-    {
-      label: intl.formatMessage({
-        id: 'admin.portal.lpr.completed.learners.table.user_email.column.heading',
-        defaultMessage: 'Email',
-        description: 'Column heading for the user email column in the completed learners table',
-      }),
-      key: 'user_email',
-      columnSortable: true,
-    },
-    {
-      label: intl.formatMessage({
-        id: 'admin.portal.lpr.completed.learned.table.completed_courses.column.heading',
-        defaultMessage: 'Total Course Completed Count',
-        description: 'Column heading for the completed courses column in the completed learners table',
-      }),
-      key: 'completed_courses',
-      columnSortable: true,
-    },
-  ];
-
-  const formatLearnerData = learners => learners.map(learner => ({
-    ...learner,
-    user_email: <span data-hj-suppress>{learner.user_email}</span>,
-  }));
-
-  return (
-    <TableContainer
-      id="completed-learners"
-      className="completed-learners"
-      fetchMethod={EnterpriseDataApiService.fetchCompletedLearners}
-      columns={tableColumns}
-      formatData={formatLearnerData}
-      tableSortable
-    />
-  );
-};
-
-export default CompletedLearnersTable;
diff --git a/src/eventTracking.js b/src/eventTracking.js
index f7dfd9872f..7525d89a36 100644
--- a/src/eventTracking.js
+++ b/src/eventTracking.js
@@ -17,6 +17,7 @@ const SUBSCRIPTION_PREFIX = `${PROJECT_NAME}.subscriptions`;
 const SETTINGS_PREFIX = `${PROJECT_NAME}.settings`;
 const CONTENT_HIGHLIGHTS_PREFIX = `${PROJECT_NAME}.content_highlights`;
 const LEARNER_CREDIT_MANAGEMENT_PREFIX = `${PROJECT_NAME}.learner_credit_management`;
+const PROGRESS_REPORT_PREFIX = `${PROJECT_NAME}.progress_report`;
 
 // Sub-prefixes
 // Subscriptions
@@ -95,6 +96,10 @@ export const CONTENT_HIGHLIGHTS_EVENTS = {
 
 const SETTINGS_ACCESS_PREFIX = `${SETTINGS_PREFIX}.ACCESS`;
 
+export const PROGRESS_REPORT_EVENTS = {
+  DATATABLE_SORT_BY_OR_FILTER: `${PROGRESS_REPORT_PREFIX}.datatable.sort_by_or_filter.changed`,
+};
+
 export const SETTINGS_ACCESS_EVENTS = {
   UNIVERSAL_LINK_TOGGLE: `${SETTINGS_ACCESS_PREFIX}.universal-link.toggle.clicked`,
   UNIVERSAL_LINK_GENERATE: `${SETTINGS_ACCESS_PREFIX}.universal-link.generate.clicked`,
@@ -184,6 +189,7 @@ const EVENT_NAMES = {
   SUBSCRIPTIONS: SUBSCRIPTION_EVENTS,
   CONTENT_HIGHLIGHTS: CONTENT_HIGHLIGHTS_EVENTS,
   LEARNER_CREDIT_MANAGEMENT: LEARNER_CREDIT_MANAGEMENT_EVENTS,
+  PROGRESS_REPORT: PROGRESS_REPORT_EVENTS,
 };
 
 export default EVENT_NAMES;