From acea660917517f05a9ebde864c7fc68b4bc8341d Mon Sep 17 00:00:00 2001
From: Cyril Nxumalo <cnxumalo@2u.com>
Date: Fri, 30 Aug 2024 10:36:43 +0200
Subject: [PATCH] chore: Migrate deprecated Table to DataTable for
 RegisteredLearnersTable

---
 .../Admin/__snapshots__/Admin.test.jsx.snap   | 200 +++++++-------
 .../RegisteredLearnersTable.test.jsx.snap     | 258 ++++++++++++++++--
 .../data/hooks/useRegisteredLearners.js       |  49 ++++
 .../RegisteredLearnersTable/index.jsx         |  74 +++--
 4 files changed, 430 insertions(+), 151 deletions(-)
 create mode 100644 src/components/RegisteredLearnersTable/data/hooks/useRegisteredLearners.js

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/RegisteredLearnersTable/__snapshots__/RegisteredLearnersTable.test.jsx.snap b/src/components/RegisteredLearnersTable/__snapshots__/RegisteredLearnersTable.test.jsx.snap
index a371442a53..fba44a0cd6 100644
--- a/src/components/RegisteredLearnersTable/__snapshots__/RegisteredLearnersTable.test.jsx.snap
+++ b/src/components/RegisteredLearnersTable/__snapshots__/RegisteredLearnersTable.test.jsx.snap
@@ -2,35 +2,245 @@
 
 exports[`RegisteredLearnersTable 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-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 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>
+            </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/RegisteredLearnersTable/data/hooks/useRegisteredLearners.js b/src/components/RegisteredLearnersTable/data/hooks/useRegisteredLearners.js
new file mode 100644
index 0000000000..7878c464f6
--- /dev/null
+++ b/src/components/RegisteredLearnersTable/data/hooks/useRegisteredLearners.js
@@ -0,0 +1,49 @@
+import { useCallback, useMemo, useState } from 'react';
+import { camelCaseObject } from '@edx/frontend-platform/utils';
+import debounce from 'lodash.debounce';
+import { logError } from '@edx/frontend-platform/logging';
+import EnterpriseDataApiService from '../../../../data/services/EnterpriseDataApiService';
+
+const useRegisteredLearners = (enterpriseId) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [registeredLearners, setRegisteredLearners] = useState({
+    itemCount: 0,
+    pageCount: 0,
+    results: [],
+  });
+
+  const fetchRegisteredLearners = useCallback(async (args) => {
+    try {
+      setIsLoading(true);
+      const options = {
+        page: args.pageIndex + 1, // `DataTable` uses zero-indexed array
+        pageSize: args.pageSize,
+      };
+      const response = await EnterpriseDataApiService.fetchUnenrolledRegisteredLearners(enterpriseId, options);
+      const data = camelCaseObject(response.data);
+
+      setRegisteredLearners({
+        itemCount: data.count,
+        pageCount: data.numPages ?? Math.floor(data.count / options.pageSize),
+        results: data.results,
+      });
+    } catch (error) {
+      logError(error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [enterpriseId]);
+
+  const debouncedFetchRegisteredLearners = useMemo(
+    () => debounce(fetchRegisteredLearners, 300),
+    [fetchRegisteredLearners],
+  );
+
+  return {
+    isLoading,
+    registeredLearners,
+    fetchRegisteredLearners: debouncedFetchRegisteredLearners,
+  };
+};
+
+export default useRegisteredLearners;
diff --git a/src/components/RegisteredLearnersTable/index.jsx b/src/components/RegisteredLearnersTable/index.jsx
index fefe7f95c9..dfb9e0c5c8 100644
--- a/src/components/RegisteredLearnersTable/index.jsx
+++ b/src/components/RegisteredLearnersTable/index.jsx
@@ -1,54 +1,74 @@
 import React from 'react';
-
+import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { DataTable } from '@openedx/paragon';
+import useRegisteredLearners from './data/hooks/useRegisteredLearners';
+import { i18nFormatTimestamp } from '../../utils';
 
-import TableContainer from '../../containers/TableContainer';
+const UserEmail = ({ row }) => (
+  <span data-hj-suppress>{row.original.user_email}</span>
+);
 
-import { i18nFormatTimestamp } from '../../utils';
-import EnterpriseDataApiService from '../../data/services/EnterpriseDataApiService';
+UserEmail.propTypes = {
+  row: PropTypes.shape({
+    original: PropTypes.shape({
+      user_email: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
 
-const RegisteredLearnersTable = () => {
+const RegisteredLearnersTable = ({ enterpriseId }) => {
   const intl = useIntl();
+  const {
+    isLoading,
+    registeredLearners: tableData,
+    fetchRegisteredLearners: fetchTableData,
+  } = useRegisteredLearners(enterpriseId);
 
-  const tableColumns = [
+  const columns = [
     {
-      label: intl.formatMessage({
+      Header: intl.formatMessage({
         id: 'admin.portal.lpr.registered.learners.table.user_email.column.heading',
         defaultMessage: 'Email',
         description: 'Column heading for the user email column in the registered learners table',
       }),
-      key: 'user_email',
-      columnSortable: true,
+      accessor: 'user_email',
+      Cell: UserEmail,
     },
     {
-      label: intl.formatMessage({
+      Header: intl.formatMessage({
         id: 'admin.portal.lpr.registered.learners.table.lms_user_created.column.heading',
         defaultMessage: 'Account Created',
         description: 'Column heading for the lms user created column in the registered learners table',
       }),
-      key: 'lms_user_created',
-      columnSortable: true,
+      accessor: 'lms_user_created',
+      Cell: ({ row }) => i18nFormatTimestamp({ intl, timestamp: row.values.lms_user_created }),
     },
   ];
 
-  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,
-    }),
-  }));
-
   return (
-    <TableContainer
-      id="registered-unenrolled-learners"
-      className="registered-unenrolled-learners"
-      fetchMethod={EnterpriseDataApiService.fetchUnenrolledRegisteredLearners}
-      columns={tableColumns}
-      formatData={formatLearnerData}
-      tableSortable
+    <DataTable
+      isSortable
+      manualSortBy
+      isPaginated
+      manualPagination
+      isLoading={isLoading}
+      columns={columns}
+      initialState={{
+        pageSize: 20, // Set this according to your requirements
+        pageIndex: 0,
+        sortBy: [{ id: 'lms_user_created', desc: true }],
+      }}
+      fetchData={fetchTableData}
+      data={tableData.results}
+      itemCount={tableData.itemCount}
+      pageCount={tableData.pageCount}
     />
   );
 };
 
+RegisteredLearnersTable.propTypes = {
+  enterpriseId: PropTypes.string.isRequired,
+};
+
 export default RegisteredLearnersTable;