From 13fe16cabacbc808f97c129b4fc1fbc70f2bc845 Mon Sep 17 00:00:00 2001
From: Cyril Nxumalo <cnxumalo@2u.com>
Date: Fri, 23 Aug 2024 10:42:23 +0200
Subject: [PATCH] chore: Migrate deprecated Table to DataTable for
 EnrolledLearnersTable

---
 .../Admin/__snapshots__/Admin.test.jsx.snap   | 224 ++++++------
 .../EnrolledLearnersTable.test.jsx.snap       | 341 ++++++++++++++++--
 .../data/hooks/useEnrolledLearners.js         | 106 ++++++
 .../EnrolledLearnersTable/index.jsx           | 134 ++++---
 src/eventTracking.js                          |   6 +
 5 files changed, 626 insertions(+), 185 deletions(-)
 create mode 100644 src/components/EnrolledLearnersTable/data/hooks/useEnrolledLearners.js

diff --git a/src/components/Admin/__snapshots__/Admin.test.jsx.snap b/src/components/Admin/__snapshots__/Admin.test.jsx.snap
index 93e82b2841..9b90cd7a6c 100644
--- a/src/components/Admin/__snapshots__/Admin.test.jsx.snap
+++ b/src/components/Admin/__snapshots__/Admin.test.jsx.snap
@@ -1496,7 +1496,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
         className="col-12 col-md-6  col-xl-4 pt-1 pb-3"
       >
         Showing data as of 
-        July 31, 2018
+        August 1, 2018
       </div>
       <div>
         <nav
@@ -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-field1"
                           >
                             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-field1"
                               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-field2"
                           >
                             <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-field2"
                               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-3"
                             >
                               <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-3"
                               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-4"
                   >
                     <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-4"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -3041,7 +3041,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
         className="col-12 col-md-6  col-xl-4 pt-1 pb-3"
       >
         Showing data as of 
-        July 31, 2018
+        August 1, 2018
       </div>
       <div>
         <nav
@@ -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-field1"
                           >
                             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-field1"
                               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-field2"
                           >
                             <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-field2"
                               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-3"
                             >
                               <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-3"
                               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-4"
                   >
                     <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-4"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -4586,7 +4586,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
         className="col-12 col-md-6  col-xl-4 pt-1 pb-3"
       >
         Showing data as of 
-        July 31, 2018
+        August 1, 2018
       </div>
       <div>
         <nav
@@ -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-field1"
                           >
                             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-field1"
                               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-field2"
                           >
                             <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-field2"
                               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-3"
                             >
                               <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-3"
                               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-4"
                   >
                     <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-4"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -6131,7 +6131,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
         className="col-12 col-md-6  col-xl-4 pt-1 pb-3"
       >
         Showing data as of 
-        July 31, 2018
+        August 1, 2018
       </div>
       <div>
         <nav
@@ -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-field1"
                           >
                             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-field1"
                               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-field2"
                           >
                             <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-field2"
                               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-3"
                             >
                               <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-3"
                               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-4"
                   >
                     <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-4"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -7676,7 +7676,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
         className="col-12 col-md-6  col-xl-4 pt-1 pb-3"
       >
         Showing data as of 
-        July 31, 2018
+        August 1, 2018
       </div>
       <div>
         <nav
@@ -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-field1"
                           >
                             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-field1"
                               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-field2"
                           >
                             <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-field2"
                               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-3"
                             >
                               <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-3"
                               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-4"
                   >
                     <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-4"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -9221,7 +9221,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
         className="col-12 col-md-6  col-xl-4 pt-1 pb-3"
       >
         Showing data as of 
-        July 31, 2018
+        August 1, 2018
       </div>
       <div>
         <nav
@@ -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-field1"
                           >
                             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-field1"
                               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-field2"
                           >
                             <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-field2"
                               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-3"
                             >
                               <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-3"
                               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-4"
                   >
                     <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-4"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -10766,7 +10766,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
         className="col-12 col-md-6  col-xl-4 pt-1 pb-3"
       >
         Showing data as of 
-        July 31, 2018
+        August 1, 2018
       </div>
       <div>
         <nav
@@ -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-field1"
                           >
                             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-field1"
                               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-field2"
                           >
                             <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-field2"
                               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-3"
                             >
                               <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-3"
                               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-4"
                   >
                     <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-4"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -12311,7 +12311,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
         className="col-12 col-md-6  col-xl-4 pt-1 pb-3"
       >
         Showing data as of 
-        July 31, 2018
+        August 1, 2018
       </div>
       <div>
         <nav
@@ -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-field1"
                           >
                             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-field1"
                               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-field2"
                           >
                             <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-field2"
                               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-3"
                             >
                               <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-3"
                               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-4"
                   >
                     <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-4"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -13856,7 +13856,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
         className="col-12 col-md-6  col-xl-4 pt-1 pb-3"
       >
         Showing data as of 
-        July 31, 2018
+        August 1, 2018
       </div>
       <div>
         <nav
@@ -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-field1"
                           >
                             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-field1"
                               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-field2"
                           >
                             <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-field2"
                               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-3"
                             >
                               <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-3"
                               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-4"
                   >
                     <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-4"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -15401,7 +15401,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
         className="col-12 col-md-6  col-xl-4 pt-1 pb-3"
       >
         Showing data as of 
-        July 31, 2018
+        August 1, 2018
       </div>
       <div>
         <nav
@@ -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-field1"
                           >
                             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-field1"
                               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-field2"
                           >
                             <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-field2"
                               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-3"
                             >
                               <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-3"
                               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-4"
                   >
                     <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-4"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -16995,7 +16995,7 @@ exports[`<Admin /> renders correctly with dashboard insights data renders dashbo
         className="col-12 col-md-6  col-xl-4 pt-1 pb-3"
       >
         Showing data as of 
-        July 31, 2018
+        August 1, 2018
       </div>
       <div>
         <nav
@@ -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-field1"
                           >
                             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-field1"
                               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-field2"
                           >
                             <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-field2"
                               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-3"
                             >
                               <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-3"
                               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-4"
                   >
                     <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-4"
                     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]}
@@ -20262,7 +20262,7 @@ exports[`<Admin /> renders correctly with no dashboard insights data 1`] = `
         className="col-12 col-md-6  col-xl-4 pt-1 pb-3"
       >
         Showing data as of 
-        July 31, 2018
+        August 1, 2018
       </div>
       <div>
         <nav
@@ -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-field1"
                           >
                             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-field1"
                               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-field2"
                           >
                             <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-field2"
                               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-3"
                             >
                               <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-3"
                               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-4"
                   >
                     <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-4"
                     name="searchfield-input"
                     onBlur={[Function]}
                     onChange={[Function]}
diff --git a/src/components/EnrolledLearnersTable/__snapshots__/EnrolledLearnersTable.test.jsx.snap b/src/components/EnrolledLearnersTable/__snapshots__/EnrolledLearnersTable.test.jsx.snap
index 829f004573..eee3bba458 100644
--- a/src/components/EnrolledLearnersTable/__snapshots__/EnrolledLearnersTable.test.jsx.snap
+++ b/src/components/EnrolledLearnersTable/__snapshots__/EnrolledLearnersTable.test.jsx.snap
@@ -2,35 +2,328 @@
 
 exports[`EnrolledLearnersTable renders empty state correctly 1`] = `
 <div
-  className="fade alert-content alert alert-warning show"
-  role="alert"
+  className="pgn__data-table-layout-wrapper"
 >
-  <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"
+    className="pgn__data-table-layout-main"
   >
     <div
-      className="alert-message-content"
+      className="pgn__data-table-wrapper"
     >
-      There are no results.
+      <div
+        className="pgn__data-table-status-bar"
+        data-testid="table-control-bar"
+      >
+        <div
+          className="pgn__data-table-actions"
+        >
+          <div
+            className="pgn__data-table-actions-left"
+          >
+            <div
+              className="pgn__data-table-filters"
+            >
+              <div
+                className="pgn__data-table-filters-breakout-filter"
+              >
+                <div
+                  className="pgn__form-group"
+                >
+                  <label
+                    className="pgn__form-label sr-only"
+                    htmlFor="text-filter-label-header_userEmail-1"
+                  >
+                    Search email
+                  </label>
+                  <div
+                    className="pgn__form-control-decorator-group"
+                  >
+                    <input
+                      className="form-control"
+                      id="text-filter-label-header_userEmail-1"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      placeholder="Search email"
+                      type="text"
+                      value=""
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            className="pgn__data-table-actions-right"
+          >
+            <div />
+          </div>
+        </div>
+        <div
+          className="pgn__data-table-status"
+        >
+          <div
+            className="pgn__data-table-status-left"
+          />
+          <div
+            className="pgn__data-table-toggle"
+          />
+        </div>
+      </div>
+      <div
+        className="pgn__data-table-container is-loading"
+        data-testid="data-table-container"
+      >
+        <div
+          className="pgn__data-table-spinner"
+          data-testid="data-table-spinner"
+        >
+          <div
+            className="pgn__spinner spinner-border"
+            role="status"
+          >
+            <span
+              className="sr-only"
+            >
+              loading
+            </span>
+          </div>
+        </div>
+        <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>
+                    Account Created
+                  </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>
+              <th
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
+                >
+                  <span>
+                    Total Course Enrollment Count
+                  </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>
+            </tr>
+          </thead>
+          <tbody
+            role="rowgroup"
+          />
+        </table>
+      </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 1, Current Page, of -1
+          </div>
+          <ul
+            className="pagination"
+          >
+            <li
+              className="page-item disabled"
+            >
+              <button
+                aria-label="Previous"
+                className="btn-icon btn-icon-primary btn-icon-md previous 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="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 2"
+                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/EnrolledLearnersTable/data/hooks/useEnrolledLearners.js b/src/components/EnrolledLearnersTable/data/hooks/useEnrolledLearners.js
new file mode 100644
index 0000000000..2944057a5f
--- /dev/null
+++ b/src/components/EnrolledLearnersTable/data/hooks/useEnrolledLearners.js
@@ -0,0 +1,106 @@
+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 EnterpriseDataApiService from '../../../../data/services/EnterpriseDataApiService';
+import EVENT_NAMES from '../../../../eventTracking';
+
+const applySortByToOptions = (sortBy, options) => {
+  if (!sortBy || sortBy.length === 0) {
+    return;
+  }
+  const apiFieldsForColumnAccessor = {
+    lmsUserCreated: { key: 'lms_user_created' },
+    userEmail: { key: 'user_email' },
+    enrollmentCount: { key: 'enrollment_count' },
+  };
+  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 applyFiltersToOptions = (filters, options) => {
+  if (!filters || filters.length === 0) {
+    return;
+  }
+  const userEmailFilter = filters.find(filter => filter.id === 'userEmail')?.value;
+  if (userEmailFilter) {
+    Object.assign(options, { userEmail: userEmailFilter });
+  }
+};
+
+const useEnrolledLearners = (enterpriseId) => {
+  const shouldTrackFetchEvents = useRef(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [enrolledLearners, setEnrolledLearners] = useState(
+    {
+      itemCount: 0,
+      pageCount: 0,
+      results: [],
+    },
+  );
+
+  const fetchEnrolledLearners = useCallback(async (args) => {
+    try {
+      setIsLoading(true);
+      const options = {
+        page: args.pageIndex + 1,
+        pageSize: args.pageSize,
+      };
+      applySortByToOptions(args.sortBy, options);
+      applyFiltersToOptions(args.filters, options);
+
+      const response = await EnterpriseDataApiService.fetchEnrolledLearners(enterpriseId, options);
+      const data = camelCaseObject(response.data);
+      setEnrolledLearners({
+        itemCount: data.count,
+        pageCount: data.numPages ?? Math.floor(data.count / options.pageSize),
+        results: data.results,
+      });
+      if (shouldTrackFetchEvents.current) {
+        // track event only after original API query to avoid sending event on initial page load. instead,
+        // only track event when user performs manual data operation (e.g., pagination, sort, filter) and
+        // send all table state as event properties.
+        sendEnterpriseTrackEvent(
+          enterpriseId,
+          EVENT_NAMES.PROGRESS_REPORT.DATATABLE_SORT_BY_OR_FILTER,
+          {
+            tableId: 'enrolled-learners',
+            ...options,
+          },
+        );
+      } else {
+        // set to true to enable tracking events on future API queries
+        shouldTrackFetchEvents.current = true;
+      }
+    } catch (error) {
+      logError(error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [enterpriseId]);
+
+  const debouncedFetchEnrolledLearners = useMemo(
+    () => debounce(fetchEnrolledLearners, 300),
+    [fetchEnrolledLearners],
+  );
+
+  return {
+    isLoading,
+    enrolledLearners,
+    fetchEnrolledLearners: debouncedFetchEnrolledLearners,
+  };
+};
+
+export default useEnrolledLearners;
diff --git a/src/components/EnrolledLearnersTable/index.jsx b/src/components/EnrolledLearnersTable/index.jsx
index e4e40e9103..8f33249170 100644
--- a/src/components/EnrolledLearnersTable/index.jsx
+++ b/src/components/EnrolledLearnersTable/index.jsx
@@ -2,61 +2,97 @@ import React from 'react';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import TableContainer from '../../containers/TableContainer';
+import { DataTable, TextFilter } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { DEFAULT_PAGE, PAGE_SIZE } from '../learner-credit-management/data';
+import useEnrolledLearners from './data/hooks/useEnrolledLearners';
 import { i18nFormatTimestamp } from '../../utils';
-import EnterpriseDataApiService from '../../data/services/EnterpriseDataApiService';
 
-const EnrolledLearnersTable = () => {
-  const intl = useIntl();
+const FilterStatus = (rest) => <DataTable.FilterStatus showFilteredFields={false} {...rest} />;
+
+const UserEmail = ({ row }) => (
+  <span data-hj-suppress>{row.original.userEmail}</span>
+);
+
+UserEmail.propTypes = {
+  row: PropTypes.shape({
+    original: PropTypes.shape({
+      userEmail: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
 
-  const tableColumns = [
-    {
-      label: intl.formatMessage({
-        id: 'admin.portal.lpr.enrolled.learners.table.user_email.column.heading',
-        defaultMessage: 'Email',
-        description: 'Column heading for the user email column in the enrolled learners table',
-      }),
-      key: 'user_email',
-      columnSortable: true,
-    },
-    {
-      label: intl.formatMessage({
-        id: 'admin.portal.lpr.enrolled.learners.table.lms_user_created.column.heading',
-        defaultMessage: 'Account Created',
-        description: 'Column heading for the lms user created column in the enrolled learners table',
-      }),
-      key: 'lms_user_created',
-      columnSortable: true,
-    },
-    {
-      label: intl.formatMessage({
-        id: 'admin.portal.lpr.enrolled.learners.table.enrollment_count.column.heading',
-        defaultMessage: 'Total Course Enrollment Count',
-        description: 'Column heading for the course enrollment count column in the enrolled learners table',
-      }),
-      key: 'enrollment_count',
-      columnSortable: true,
-    },
-  ];
-
-  const formatLearnerData = learners => learners.map(learner => ({
-    ...learner,
-    user_email: <span data-hj-suppress>{learner.user_email}</span>,
-    lms_user_created: i18nFormatTimestamp({
-      intl, timestamp: learner.lms_user_created,
-    }),
-  }));
+const EnrolledLearnersTable = ({ enterpriseId }) => {
+  const intl = useIntl();
+  const {
+    isLoading,
+    enrolledLearners: tableData,
+    fetchEnrolledLearners: fetchTableData,
+  } = useEnrolledLearners(enterpriseId);
 
   return (
-    <TableContainer
-      id="enrolled-learners"
-      className="enrolled-learners"
-      fetchMethod={EnterpriseDataApiService.fetchEnrolledLearners}
-      columns={tableColumns}
-      formatData={formatLearnerData}
-      tableSortable
+    <DataTable
+      isSortable
+      manualSortBy
+      isPaginated
+      manualPagination
+      isFilterable
+      manualFilters
+      isLoading={isLoading}
+      FilterStatusComponent={FilterStatus}
+      defaultColumnValues={{ Filter: TextFilter }}
+      columns={[
+        {
+          Header: intl.formatMessage({
+            id: 'admin.portal.lpr.enrolled.learners.table.user_email.column.heading',
+            defaultMessage: 'Email',
+            description: 'Column heading for the user email column in the enrolled learners table',
+          }),
+          accessor: 'userEmail',
+          Cell: UserEmail,
+        },
+        {
+          Header: intl.formatMessage({
+            id: 'admin.portal.lpr.enrolled.learners.table.lms_user_created.column.heading',
+            defaultMessage: 'Account Created',
+            description: 'Column heading for the lms user created column in the enrolled learners table',
+          }),
+          accessor: 'lmsUserCreated',
+          Cell: ({ row }) => i18nFormatTimestamp({ intl, timestamp: row.values.lmsUserCreated }),
+          disableFilters: true,
+        },
+        {
+          Header: intl.formatMessage({
+            id: 'admin.portal.lpr.enrolled.learners.table.enrollment_count.column.heading',
+            defaultMessage: 'Total Course Enrollment Count',
+            description: 'Column heading for the course enrollment count column in the enrolled learners table',
+          }),
+          accessor: 'enrollmentCount',
+          disableFilters: true,
+        },
+      ]}
+      initialState={{
+        pageSize: PAGE_SIZE,
+        pageIndex: DEFAULT_PAGE,
+        sortBy: [
+          { id: 'lmsUserCreated', desc: true },
+        ],
+      }}
+      fetchData={fetchTableData}
+      data={tableData.results}
+      itemCount={tableData.itemCount}
+      pageCount={tableData.pageCount}
     />
   );
 };
 
-export default EnrolledLearnersTable;
+const mapStateToProps = state => ({
+  enterpriseId: state.portalConfiguration.enterpriseId,
+});
+
+EnrolledLearnersTable.propTypes = {
+  enterpriseId: PropTypes.string.isRequired,
+};
+
+export default connect(mapStateToProps)(EnrolledLearnersTable);
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;