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

---
 .../Admin/__snapshots__/Admin.test.jsx.snap   |  200 +-
 .../LearnerActivityTable.test.jsx             |  130 +-
 .../LearnerActivityTable.test.jsx.snap        | 2811 +++++++++++------
 .../data/hooks/useCourseEnrollments.js        |   99 +
 .../data/tests/constants.js                   |   38 +
 src/components/LearnerActivityTable/index.jsx |  280 +-
 src/data/constants/table.js                   |    4 +
 src/eventTracking.js                          |    6 +
 8 files changed, 2344 insertions(+), 1224 deletions(-)
 create mode 100644 src/components/LearnerActivityTable/data/hooks/useCourseEnrollments.js
 create mode 100644 src/components/LearnerActivityTable/data/tests/constants.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/LearnerActivityTable/LearnerActivityTable.test.jsx b/src/components/LearnerActivityTable/LearnerActivityTable.test.jsx
index 3d8a62b94b..f14a16b1ed 100644
--- a/src/components/LearnerActivityTable/LearnerActivityTable.test.jsx
+++ b/src/components/LearnerActivityTable/LearnerActivityTable.test.jsx
@@ -8,96 +8,26 @@ import { Provider } from 'react-redux';
 import { mount } from 'enzyme';
 
 import LearnerActivityTable from '.';
+import useCourseEnrollments from './data/hooks/useCourseEnrollments';
+import mockUseCourseEnrollments from './data/tests/constants';
 
 const enterpriseId = 'test-enterprise';
 const mockStore = configureMockStore([thunk]);
-const learnerActivityEmptyStore = mockStore({
-  portalConfiguration: {
-    enterpriseId,
-  },
-  table: {
-    'active-week': {
-      data: {
-        results: [],
-        current_page: 1,
-        num_pages: 1,
-      },
-      ordering: null,
-      loading: false,
-      error: null,
-    },
-  },
-});
 
-const tableMockData = {
-  data: {
-    count: 2,
-    num_pages: 1,
-    current_page: 1,
-    results: [
-      {
-        id: 1,
-        passed_date: '2018-09-23T16:27:34.690065Z',
-        course_title: 'Dive into ReactJS',
-        course_key: 'edX/ReactJS',
-        user_email: 'awesome.me@example.com',
-        course_list_price: '200',
-        course_start_date: '2017-10-21T23:47:32.738Z',
-        course_end_date: '2018-05-13T12:47:27.534Z',
-        current_grade: '0.66',
-        progress_status: 'Failed',
-        last_activity_date: '2018-09-22T10:59:28.628Z',
-      },
-      {
-        id: 5,
-        passed_date: '2018-09-22T16:27:34.690065Z',
-        course_title: 'Redux with ReactJS',
-        course_key: 'edX/Redux_ReactJS',
-        user_email: 'new@example.com',
-        course_list_price: '200',
-        course_start_date: '2017-10-21T23:47:32.738Z',
-        course_end_date: '2018-05-13T12:47:27.534Z',
-        current_grade: '0.80',
-        progress_status: 'Passed',
-        last_activity_date: '2018-09-25T10:59:28.628Z',
-      },
-    ],
-    next: null,
-    start: 0,
-    previous: null,
-  },
-  ordering: null,
-  loading: false,
-  error: null,
-};
+jest.mock('./data/hooks/useCourseEnrollments', () => (
+  jest.fn().mockReturnValue({})
+));
 
-const learnerActivityStore = mockStore({
+const store = mockStore({
   portalConfiguration: {
     enterpriseId,
   },
-  table: {
-    'active-week': tableMockData,
-    'inactive-week': tableMockData,
-    'inactive-month': tableMockData,
-  },
 });
 
-const LearnerActivityEmptyTableWrapper = props => (
-  <MemoryRouter>
-    <IntlProvider locale="en">
-      <Provider store={learnerActivityEmptyStore}>
-        <LearnerActivityTable
-          {...props}
-        />
-      </Provider>
-    </IntlProvider>
-  </MemoryRouter>
-);
-
 const LearnerActivityTableWrapper = props => (
   <MemoryRouter>
     <IntlProvider locale="en">
-      <Provider store={learnerActivityStore}>
+      <Provider store={store}>
         <LearnerActivityTable
           {...props}
         />
@@ -107,33 +37,53 @@ const LearnerActivityTableWrapper = props => (
 );
 
 const verifyLearnerActivityTableRendered = (tableId, activity, columnTitles, rowsData) => {
-  const wrapper = mount((
-    <LearnerActivityTableWrapper id={tableId} activity={activity} />
-  ));
-  // Verify that table has correct number of columns
-  expect(wrapper.find(`.${tableId} thead th`).length).toEqual(columnTitles.length);
+  const wrapper = mount(<LearnerActivityTableWrapper id={tableId} activity={activity} />);
+
+  const table = wrapper.find('[role="table"]');
+  const headerColumns = table.find('thead th');
+  const tableRows = table.find('tbody tr');
 
-  // Verify only expected columns are shown
-  wrapper.find(`.${tableId} thead th`).forEach((column, index) => {
+  // Verify the number of columns
+  expect(headerColumns).toHaveLength(columnTitles.length);
+
+  // Verify column titles
+  headerColumns.forEach((column, index) => {
     expect(column.text()).toContain(columnTitles[index]);
   });
 
-  // Verify that table has correct number of rows
-  expect(wrapper.find(`.${tableId} tbody tr`).length).toEqual(2);
+  // Verify the number of rows
+  expect(tableRows).toHaveLength(rowsData.length);
 
-  // Verify each row in table has correct data
-  wrapper.find(`.${tableId} tbody tr`).forEach((row, rowIndex) => {
-    row.find('td').forEach((cell, colIndex) => {
+  // Verify row data
+  tableRows.forEach((row, rowIndex) => {
+    const cells = row.find('td');
+    cells.forEach((cell, colIndex) => {
       expect(cell.text()).toEqual(rowsData[rowIndex][colIndex]);
     });
   });
 };
 
 describe('LearnerActivityTable', () => {
+  beforeEach(() => {
+    useCourseEnrollments.mockReturnValue(mockUseCourseEnrollments);
+  });
+
+  afterEach(() => jest.clearAllMocks());
+
   it('renders empty state correctly', () => {
+    useCourseEnrollments.mockReturnValue(
+      {
+        isLoading: false,
+        courseEnrollments: {
+          itemCount: 0,
+          pageCount: 0,
+          results: [],
+        },
+      },
+    );
     const tree = renderer
       .create((
-        <LearnerActivityEmptyTableWrapper id="active-week" activity="active_past_week" />
+        <LearnerActivityTableWrapper id="active-week" activity="active_past_week" />
       ))
       .toJSON();
     expect(tree).toMatchSnapshot();
diff --git a/src/components/LearnerActivityTable/__snapshots__/LearnerActivityTable.test.jsx.snap b/src/components/LearnerActivityTable/__snapshots__/LearnerActivityTable.test.jsx.snap
index 9ff48db13a..e4761765e0 100644
--- a/src/components/LearnerActivityTable/__snapshots__/LearnerActivityTable.test.jsx.snap
+++ b/src/components/LearnerActivityTable/__snapshots__/LearnerActivityTable.test.jsx.snap
@@ -2,280 +2,456 @@
 
 exports[`LearnerActivityTable renders active learners table correctly 1`] = `
 <div
-  className="active-week"
+  className="pgn__data-table-layout-wrapper"
 >
   <div
-    className="row"
+    className="pgn__data-table-layout-main"
   >
     <div
-      className="col"
+      className="pgn__data-table-wrapper"
     >
       <div
-        className="table-responsive"
+        className="pgn__data-table-status-bar"
+        data-testid="table-control-bar"
       >
-        <table
-          className="table table-sm table-striped"
+        <div
+          className="pgn__data-table-status"
         >
-          <thead
-            className=""
+          <div
+            className="pgn__data-table-status-left"
+          >
+            <div
+              className="pgn__smart-status"
+              data-testid="row-status"
+            >
+              Showing 1 - 2 of 2.
+            </div>
+          </div>
+          <div
+            className="pgn__data-table-actions-right"
           >
+            <div
+              className="pgn__data-table-toggle"
+            />
+            <div />
+          </div>
+        </div>
+      </div>
+      <div
+        className="pgn__data-table-container"
+        data-testid="data-table-container"
+      >
+        <table
+          className="pgn__data-table is-striped"
+          role="table"
+        >
+          <thead>
             <tr
-              className=""
+              role="row"
             >
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     Email
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      sort ascending
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort-asc"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     Course Title
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      click to sort
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     Course Price
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      click to sort
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     Start Date
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      click to sort
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     End Date
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      click to sort
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     Passed Date
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      click to sort
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     Current Grade
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      click to sort
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     Progress Status
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      click to sort
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     Last Activity Date
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      click to sort
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-down"
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
             </tr>
           </thead>
           <tbody
-            className=""
+            role="rowgroup"
           >
             <tr
-              className=""
+              className="pgn__data-table-row"
+              role="row"
             >
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 <span
                   data-hj-suppress={true}
@@ -284,60 +460,61 @@ exports[`LearnerActivityTable renders active learners table correctly 1`] = `
                 </span>
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 Dive into ReactJS
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 $200
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 October 21, 2017
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 May 13, 2018
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 September 23, 2018
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 66%
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 Failed
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 September 22, 2018
               </td>
             </tr>
             <tr
-              className=""
+              className="pgn__data-table-row"
+              role="row"
             >
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 <span
                   data-hj-suppress={true}
@@ -346,50 +523,50 @@ exports[`LearnerActivityTable renders active learners table correctly 1`] = `
                 </span>
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 Redux with ReactJS
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 $200
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 October 21, 2017
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 May 13, 2018
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 September 22, 2018
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 80%
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 Passed
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 September 25, 2018
               </td>
@@ -397,101 +574,105 @@ exports[`LearnerActivityTable renders active learners table correctly 1`] = `
           </tbody>
         </table>
       </div>
-    </div>
-  </div>
-  <div
-    className="row mt-2"
-  >
-    <div
-      className="col d-flex justify-content-center"
-    >
-      <nav
-        aria-label="active-week-pagination"
-        className="pagination-default"
+      <div
+        className="pgn__data-table-footer"
+        data-testid="table-footer"
       >
         <div
-          aria-atomic={true}
-          aria-live="polite"
-          aria-relevant="text"
-          className="sr-only"
+          data-testid="row-status"
         >
-          Page 1, Current Page, of 1
+          Showing 1 - 2 of 2.
         </div>
-        <ul
-          className="pagination"
+        <nav
+          aria-label="table pagination"
+          className="pagination-minimal"
         >
-          <li
-            className="page-item disabled"
+          <div
+            aria-atomic={true}
+            aria-live="polite"
+            aria-relevant="text"
+            className="sr-only"
           >
-            <button
-              aria-label="Previous"
-              className="previous page-link btn btn-primary"
-              disabled={true}
-              onClick={[Function]}
-              tabIndex="-1"
-              type="button"
+            Page 1, Current Page, of 1
+          </div>
+          <ul
+            className="pagination"
+          >
+            <li
+              className="page-item disabled"
             >
-              <div>
+              <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="pgn__icon"
+                  className="btn-icon__icon-container"
                 >
-                  <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"
+                  <span
+                    className="pgn__icon btn-icon__icon"
                   >
-                    <path
-                      d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59Z"
-                      fill="currentColor"
-                    />
-                  </svg>
+                    <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>
-                Previous
-              </div>
-            </button>
-          </li>
-          <li
-            className="page-item disabled"
-          >
-            <button
-              aria-label="Next"
-              className="next page-link btn btn-primary"
-              disabled={true}
-              onClick={[Function]}
-              tabIndex="-1"
-              type="button"
+              </button>
+            </li>
+            <li
+              className="page-item disabled"
             >
-              <div>
-                Next
+              <button
+                aria-label="Next"
+                className="btn-icon btn-icon-primary btn-icon-md next page-link"
+                disabled={true}
+                onClick={[Function]}
+                tabIndex="-1"
+                type="button"
+              >
                 <span
-                  className="pgn__icon"
+                  className="btn-icon__icon-container"
                 >
-                  <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"
+                  <span
+                    className="pgn__icon btn-icon__icon"
                   >
-                    <path
-                      d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6Z"
-                      fill="currentColor"
-                    />
-                  </svg>
+                    <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>
-              </div>
-            </button>
-          </li>
-        </ul>
-      </nav>
+              </button>
+            </li>
+          </ul>
+        </nav>
+      </div>
     </div>
   </div>
 </div>
@@ -499,35 +680,543 @@ exports[`LearnerActivityTable renders active learners table correctly 1`] = `
 
 exports[`LearnerActivityTable 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"
+        data-testid="data-table-container"
+      >
+        <table
+          className="pgn__data-table is-striped"
+          role="table"
+        >
+          <thead>
+            <tr
+              role="row"
+            >
+              <th
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
+                >
+                  <span>
+                    Email
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
+                      aria-hidden={true}
+                      fill="none"
+                      focusable={false}
+                      height={24}
+                      role="img"
+                      viewBox="0 0 24 24"
+                      width={24}
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="m7 10 5-5 5 5H7ZM7 14l5 5 5-5H7Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </th>
+              <th
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
+                >
+                  <span>
+                    Course Title
+                  </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>
+                    Course Price
+                  </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>
+                    Start Date
+                  </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>
+                    End Date
+                  </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>
+                    Passed Date
+                  </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>
+                    Current Grade
+                  </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>
+                    Progress Status
+                  </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>
+                    Last Activity Date
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-down"
+                  >
+                    <svg
+                      aria-hidden={true}
+                      fill="none"
+                      focusable={false}
+                      height={24}
+                      role="img"
+                      viewBox="0 0 24 24"
+                      width={24}
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="m7 10 5 5 5-5H7Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            role="rowgroup"
+          />
+        </table>
+      </div>
+      <div
+        className="pgn__data-table-empty"
+      >
+        No results found
+      </div>
+      <div
+        className="pgn__data-table-footer"
+        data-testid="table-footer"
+      >
+        <nav
+          aria-label="table pagination"
+          className="pagination-minimal"
+        >
+          <div
+            aria-atomic={true}
+            aria-live="polite"
+            aria-relevant="text"
+            className="sr-only"
+          >
+            Page 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>
@@ -535,253 +1224,412 @@ exports[`LearnerActivityTable renders empty state correctly 1`] = `
 
 exports[`LearnerActivityTable renders inactive past month learners table correctly 1`] = `
 <div
-  className="inactive-month"
+  className="pgn__data-table-layout-wrapper"
 >
   <div
-    className="row"
+    className="pgn__data-table-layout-main"
   >
     <div
-      className="col"
+      className="pgn__data-table-wrapper"
     >
       <div
-        className="table-responsive"
+        className="pgn__data-table-status-bar"
+        data-testid="table-control-bar"
       >
-        <table
-          className="table table-sm table-striped"
+        <div
+          className="pgn__data-table-status"
         >
-          <thead
-            className=""
+          <div
+            className="pgn__data-table-status-left"
+          >
+            <div
+              className="pgn__smart-status"
+              data-testid="row-status"
+            >
+              Showing 1 - 2 of 2.
+            </div>
+          </div>
+          <div
+            className="pgn__data-table-actions-right"
           >
+            <div
+              className="pgn__data-table-toggle"
+            />
+            <div />
+          </div>
+        </div>
+      </div>
+      <div
+        className="pgn__data-table-container"
+        data-testid="data-table-container"
+      >
+        <table
+          className="pgn__data-table is-striped"
+          role="table"
+        >
+          <thead>
             <tr
-              className=""
+              role="row"
             >
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     Email
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      sort ascending
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort-asc"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     Course Title
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      click to sort
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     Course Price
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      click to sort
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     Start Date
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      click to sort
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     End Date
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      click to sort
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     Current Grade
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      click to sort
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     Progress Status
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      click to sort
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     Last Activity Date
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      click to sort
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-down"
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
             </tr>
           </thead>
           <tbody
-            className=""
+            role="rowgroup"
           >
             <tr
-              className=""
+              className="pgn__data-table-row"
+              role="row"
             >
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 <span
                   data-hj-suppress={true}
@@ -790,54 +1638,55 @@ exports[`LearnerActivityTable renders inactive past month learners table correct
                 </span>
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 Dive into ReactJS
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 $200
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 October 21, 2017
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 May 13, 2018
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 66%
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 Failed
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 September 22, 2018
               </td>
             </tr>
             <tr
-              className=""
+              className="pgn__data-table-row"
+              role="row"
             >
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 <span
                   data-hj-suppress={true}
@@ -846,44 +1695,44 @@ exports[`LearnerActivityTable renders inactive past month learners table correct
                 </span>
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 Redux with ReactJS
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 $200
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 October 21, 2017
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 May 13, 2018
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 80%
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 Passed
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 September 25, 2018
               </td>
@@ -891,101 +1740,105 @@ exports[`LearnerActivityTable renders inactive past month learners table correct
           </tbody>
         </table>
       </div>
-    </div>
-  </div>
-  <div
-    className="row mt-2"
-  >
-    <div
-      className="col d-flex justify-content-center"
-    >
-      <nav
-        aria-label="inactive-month-pagination"
-        className="pagination-default"
+      <div
+        className="pgn__data-table-footer"
+        data-testid="table-footer"
       >
         <div
-          aria-atomic={true}
-          aria-live="polite"
-          aria-relevant="text"
-          className="sr-only"
+          data-testid="row-status"
         >
-          Page 1, Current Page, of 1
+          Showing 1 - 2 of 2.
         </div>
-        <ul
-          className="pagination"
+        <nav
+          aria-label="table pagination"
+          className="pagination-minimal"
         >
-          <li
-            className="page-item disabled"
+          <div
+            aria-atomic={true}
+            aria-live="polite"
+            aria-relevant="text"
+            className="sr-only"
+          >
+            Page 1, Current Page, of 1
+          </div>
+          <ul
+            className="pagination"
           >
-            <button
-              aria-label="Previous"
-              className="previous page-link btn btn-primary"
-              disabled={true}
-              onClick={[Function]}
-              tabIndex="-1"
-              type="button"
+            <li
+              className="page-item disabled"
             >
-              <div>
+              <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="pgn__icon"
+                  className="btn-icon__icon-container"
                 >
-                  <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"
+                  <span
+                    className="pgn__icon btn-icon__icon"
                   >
-                    <path
-                      d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59Z"
-                      fill="currentColor"
-                    />
-                  </svg>
+                    <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>
-                Previous
-              </div>
-            </button>
-          </li>
-          <li
-            className="page-item disabled"
-          >
-            <button
-              aria-label="Next"
-              className="next page-link btn btn-primary"
-              disabled={true}
-              onClick={[Function]}
-              tabIndex="-1"
-              type="button"
+              </button>
+            </li>
+            <li
+              className="page-item disabled"
             >
-              <div>
-                Next
+              <button
+                aria-label="Next"
+                className="btn-icon btn-icon-primary btn-icon-md next page-link"
+                disabled={true}
+                onClick={[Function]}
+                tabIndex="-1"
+                type="button"
+              >
                 <span
-                  className="pgn__icon"
+                  className="btn-icon__icon-container"
                 >
-                  <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"
+                  <span
+                    className="pgn__icon btn-icon__icon"
                   >
-                    <path
-                      d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6Z"
-                      fill="currentColor"
-                    />
-                  </svg>
+                    <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>
-              </div>
-            </button>
-          </li>
-        </ul>
-      </nav>
+              </button>
+            </li>
+          </ul>
+        </nav>
+      </div>
     </div>
   </div>
 </div>
@@ -993,253 +1846,412 @@ exports[`LearnerActivityTable renders inactive past month learners table correct
 
 exports[`LearnerActivityTable renders inactive past week learners table correctly 1`] = `
 <div
-  className="inactive-week"
+  className="pgn__data-table-layout-wrapper"
 >
   <div
-    className="row"
+    className="pgn__data-table-layout-main"
   >
     <div
-      className="col"
+      className="pgn__data-table-wrapper"
     >
       <div
-        className="table-responsive"
+        className="pgn__data-table-status-bar"
+        data-testid="table-control-bar"
       >
-        <table
-          className="table table-sm table-striped"
+        <div
+          className="pgn__data-table-status"
         >
-          <thead
-            className=""
+          <div
+            className="pgn__data-table-status-left"
+          >
+            <div
+              className="pgn__smart-status"
+              data-testid="row-status"
+            >
+              Showing 1 - 2 of 2.
+            </div>
+          </div>
+          <div
+            className="pgn__data-table-actions-right"
           >
+            <div
+              className="pgn__data-table-toggle"
+            />
+            <div />
+          </div>
+        </div>
+      </div>
+      <div
+        className="pgn__data-table-container"
+        data-testid="data-table-container"
+      >
+        <table
+          className="pgn__data-table is-striped"
+          role="table"
+        >
+          <thead>
             <tr
-              className=""
+              role="row"
             >
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     Email
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      sort ascending
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort-asc"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     Course Title
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      click to sort
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     Course Price
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      click to sort
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     Start Date
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      click to sort
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     End Date
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      click to sort
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     Current Grade
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      click to sort
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     Progress Status
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      click to sort
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
               <th
-                className="sortable"
-                scope="col"
-              >
-                <button
-                  className="btn btn-header"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
                 >
                   <span>
                     Last Activity Date
-                    <span
-                      className="sr-only"
-                      data-testid="table-heading-sr"
-                    >
-                       
-                      click to sort
-                    </span>
-                     
-                    <span
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-down"
+                  >
+                    <svg
                       aria-hidden={true}
-                      className="fa fa-sort"
-                    />
+                      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>
-                </button>
+                </span>
               </th>
             </tr>
           </thead>
           <tbody
-            className=""
+            role="rowgroup"
           >
             <tr
-              className=""
+              className="pgn__data-table-row"
+              role="row"
             >
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 <span
                   data-hj-suppress={true}
@@ -1248,54 +2260,55 @@ exports[`LearnerActivityTable renders inactive past week learners table correctl
                 </span>
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 Dive into ReactJS
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 $200
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 October 21, 2017
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 May 13, 2018
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 66%
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 Failed
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 September 22, 2018
               </td>
             </tr>
             <tr
-              className=""
+              className="pgn__data-table-row"
+              role="row"
             >
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 <span
                   data-hj-suppress={true}
@@ -1304,44 +2317,44 @@ exports[`LearnerActivityTable renders inactive past week learners table correctl
                 </span>
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 Redux with ReactJS
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 $200
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 October 21, 2017
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 May 13, 2018
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 80%
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 Passed
               </td>
               <td
-                className=""
-                scope={null}
+                className="pgn__data-table-cell-wrap"
+                role="cell"
               >
                 September 25, 2018
               </td>
@@ -1349,101 +2362,105 @@ exports[`LearnerActivityTable renders inactive past week learners table correctl
           </tbody>
         </table>
       </div>
-    </div>
-  </div>
-  <div
-    className="row mt-2"
-  >
-    <div
-      className="col d-flex justify-content-center"
-    >
-      <nav
-        aria-label="inactive-week-pagination"
-        className="pagination-default"
+      <div
+        className="pgn__data-table-footer"
+        data-testid="table-footer"
       >
         <div
-          aria-atomic={true}
-          aria-live="polite"
-          aria-relevant="text"
-          className="sr-only"
+          data-testid="row-status"
         >
-          Page 1, Current Page, of 1
+          Showing 1 - 2 of 2.
         </div>
-        <ul
-          className="pagination"
+        <nav
+          aria-label="table pagination"
+          className="pagination-minimal"
         >
-          <li
-            className="page-item disabled"
+          <div
+            aria-atomic={true}
+            aria-live="polite"
+            aria-relevant="text"
+            className="sr-only"
           >
-            <button
-              aria-label="Previous"
-              className="previous page-link btn btn-primary"
-              disabled={true}
-              onClick={[Function]}
-              tabIndex="-1"
-              type="button"
+            Page 1, Current Page, of 1
+          </div>
+          <ul
+            className="pagination"
+          >
+            <li
+              className="page-item disabled"
             >
-              <div>
+              <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="pgn__icon"
+                  className="btn-icon__icon-container"
                 >
-                  <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"
+                  <span
+                    className="pgn__icon btn-icon__icon"
                   >
-                    <path
-                      d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59Z"
-                      fill="currentColor"
-                    />
-                  </svg>
+                    <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>
-                Previous
-              </div>
-            </button>
-          </li>
-          <li
-            className="page-item disabled"
-          >
-            <button
-              aria-label="Next"
-              className="next page-link btn btn-primary"
-              disabled={true}
-              onClick={[Function]}
-              tabIndex="-1"
-              type="button"
+              </button>
+            </li>
+            <li
+              className="page-item disabled"
             >
-              <div>
-                Next
+              <button
+                aria-label="Next"
+                className="btn-icon btn-icon-primary btn-icon-md next page-link"
+                disabled={true}
+                onClick={[Function]}
+                tabIndex="-1"
+                type="button"
+              >
                 <span
-                  className="pgn__icon"
+                  className="btn-icon__icon-container"
                 >
-                  <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"
+                  <span
+                    className="pgn__icon btn-icon__icon"
                   >
-                    <path
-                      d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6Z"
-                      fill="currentColor"
-                    />
-                  </svg>
+                    <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>
-              </div>
-            </button>
-          </li>
-        </ul>
-      </nav>
+              </button>
+            </li>
+          </ul>
+        </nav>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/components/LearnerActivityTable/data/hooks/useCourseEnrollments.js b/src/components/LearnerActivityTable/data/hooks/useCourseEnrollments.js
new file mode 100644
index 0000000000..e9d67c3e14
--- /dev/null
+++ b/src/components/LearnerActivityTable/data/hooks/useCourseEnrollments.js
@@ -0,0 +1,99 @@
+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 = {
+    userEmail: { key: 'user_email' },
+    courseTitle: { key: 'course_title' },
+    courseListPrice: { key: 'course_list_price' },
+    courseStartDate: { key: 'course_start_date' },
+    courseEndDate: { key: 'course_end_date' },
+    passedDate: { key: 'passed_date' },
+    currentGrade: { key: 'current_grade' },
+    progressStatus: { key: 'progress_status' },
+    lastActivityDate: { key: 'last_activity_date' },
+  };
+  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 useCourseEnrollments = (enterpriseId, tableId) => {
+  const shouldTrackFetchEvents = useRef(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [courseEnrollments, setCourseEnrollments] = useState({
+    itemCount: 0,
+    pageCount: 0,
+    results: [],
+  });
+
+  const fetchCourseEnrollments = useCallback(async (args) => {
+    try {
+      setIsLoading(true);
+      const options = {
+        page: args.pageIndex + 1,
+        pageSize: args.pageSize,
+      };
+      applySortByToOptions(args.sortBy, options);
+
+      const response = await EnterpriseDataApiService.fetchCourseEnrollments(enterpriseId, options);
+      const data = camelCaseObject(response.data);
+      setCourseEnrollments({
+        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,
+            ...options,
+          },
+        );
+      } else {
+        // set to true to enable tracking events on future API queries
+        shouldTrackFetchEvents.current = true;
+      }
+    } catch (error) {
+      logError(error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [enterpriseId, tableId]);
+
+  const debouncedFetchCourseEnrollments = useMemo(
+    () => debounce(fetchCourseEnrollments, 300),
+    [fetchCourseEnrollments],
+  );
+
+  return {
+    isLoading,
+    courseEnrollments,
+    fetchCourseEnrollments: debouncedFetchCourseEnrollments,
+  };
+};
+
+export default useCourseEnrollments;
diff --git a/src/components/LearnerActivityTable/data/tests/constants.js b/src/components/LearnerActivityTable/data/tests/constants.js
new file mode 100644
index 0000000000..7928440642
--- /dev/null
+++ b/src/components/LearnerActivityTable/data/tests/constants.js
@@ -0,0 +1,38 @@
+const mockUseCourseEnrollments = {
+  isLoading: false,
+  courseEnrollments: {
+    itemCount: 2,
+    pageCount: 1,
+    results: [
+      {
+        id: 1,
+        passedDate: '2018-09-23',
+        courseTitle: 'Dive into ReactJS',
+        courseKey: 'edX/ReactJS',
+        userEmail: 'awesome.me@example.com',
+        courseListPrice: '200',
+        courseStartDate: '2017-10-21',
+        courseEndDate: '2018-05-13',
+        currentGrade: '0.66',
+        progressStatus: 'Failed',
+        lastActivityDate: '2018-09-22',
+      },
+      {
+        id: 5,
+        passedDate: '2018-09-22',
+        courseTitle: 'Redux with ReactJS',
+        courseKey: 'edX/Redux_ReactJS',
+        userEmail: 'new@example.com',
+        courseListPrice: '200',
+        courseStartDate: '2017-10-21',
+        courseEndDate: '2018-05-13',
+        currentGrade: '0.80',
+        progressStatus: 'Passed',
+        lastActivityDate: '2018-09-25',
+      },
+    ],
+  },
+  fetchCourseEnrollments: jest.fn(),
+};
+
+export default mockUseCourseEnrollments;
diff --git a/src/components/LearnerActivityTable/index.jsx b/src/components/LearnerActivityTable/index.jsx
index 114763aaa7..318beb468d 100644
--- a/src/components/LearnerActivityTable/index.jsx
+++ b/src/components/LearnerActivityTable/index.jsx
@@ -1,153 +1,159 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-
-import TableContainer from '../../containers/TableContainer';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { DataTable, TextFilter } from '@openedx/paragon';
+import { connect } from 'react-redux';
+import useCourseEnrollments from './data/hooks/useCourseEnrollments';
+import { DEFAULT_PAGE, PAGE_SIZE } from '../../data/constants/table';
 import {
-  i18nFormatTimestamp, i18nFormatPassedTimestamp, i18nFormatProgressStatus, formatPercentage,
+  i18nFormatTimestamp,
+  i18nFormatPassedTimestamp,
+  i18nFormatProgressStatus,
+  formatPercentage,
 } from '../../utils';
-import EnterpriseDataApiService from '../../data/services/EnterpriseDataApiService';
+import { formatPrice } from '../learner-credit-management/data';
 
-class LearnerActivityTable extends React.Component {
-  getTableColumns() {
-    const { activity, intl } = this.props;
-    const tableColumns = [
-      {
-        label: intl.formatMessage({
-          id: 'admin.portal.lpr.learner.activity.table.user_email.column.heading',
-          defaultMessage: 'Email',
-          description: 'Column heading for the user email column in the learner activity table',
-        }),
-        key: 'user_email',
-        columnSortable: true,
-      },
-      {
-        label: intl.formatMessage({
-          id: 'admin.portal.lpr.learner.activity.table.course_title.column.heading',
-          defaultMessage: 'Course Title',
-          description: 'Column heading for the course title column in the learner activity table',
-        }),
-        key: 'course_title',
-        columnSortable: true,
-      },
-      {
-        label: intl.formatMessage({
-          id: 'admin.portal.lpr.learner.activity.table.course_list_price.column.heading',
-          defaultMessage: 'Course Price',
-          description: 'Column heading for the course price column in the learner activity table',
-        }),
-        key: 'course_list_price',
-        columnSortable: true,
-      },
-      {
-        label: intl.formatMessage({
-          id: 'admin.portal.lpr.learner.activity.table.course_start_date.column.heading',
-          defaultMessage: 'Start Date',
-          description: 'Column heading for the course start date column in the learner activity table',
-        }),
-        key: 'course_start_date',
-        columnSortable: true,
-      },
-      {
-        label: intl.formatMessage({
-          id: 'admin.portal.lpr.learner.activity.table.course_end_date.column.heading',
-          defaultMessage: 'End Date',
-          description: 'Column heading for the course end date column in the learner activity table',
-        }),
-        key: 'course_end_date',
-        columnSortable: true,
-      },
-      {
-        label: intl.formatMessage({
-          id: 'admin.portal.lpr.learner.activity.table.passed_date.column.heading',
-          defaultMessage: 'Passed Date',
-          description: 'Column heading for the passed date column in the learner activity table',
-        }),
-        key: 'passed_date',
-        columnSortable: true,
-      },
-      {
-        label: intl.formatMessage({
-          id: 'admin.portal.lpr.learner.activity.table.current_grade.column.heading',
-          defaultMessage: 'Current Grade',
-          description: 'Column heading for the current grade column in the learner activity table',
-        }),
-        key: 'current_grade',
-        columnSortable: true,
-      },
-      {
-        label: intl.formatMessage({
-          id: 'admin.portal.lpr.learner.activity.table.progress_status.column.heading',
-          defaultMessage: 'Progress Status',
-          description: 'Column heading for the progress status column in the learner activity table',
-        }),
-        key: 'progress_status',
-        columnSortable: true,
-      },
-      {
-        label: intl.formatMessage({
-          id: 'admin.portal.lpr.learner.activity.table.enrollment_date.column.heading',
-          defaultMessage: 'Last Activity Date',
-          description: 'Column heading for the last activity date column in the learner activity table',
-        }),
-        key: 'last_activity_date',
-        columnSortable: true,
-      },
-    ];
+const FilterStatus = (rest) => <DataTable.FilterStatus showFilteredFields={false} {...rest} />;
 
-    if (activity !== 'active_past_week') {
-      return tableColumns.filter(column => column.key !== 'passed_date');
-    }
-    return tableColumns;
-  }
+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,
+};
 
-  formatTableData = enrollments => enrollments.map(enrollment => ({
-    ...enrollment,
-    user_email: <span data-hj-suppress>{enrollment.user_email}</span>,
-    last_activity_date: i18nFormatTimestamp({ intl: this.props.intl, timestamp: enrollment.last_activity_date }),
-    course_start_date: i18nFormatTimestamp({ intl: this.props.intl, timestamp: enrollment.course_start_date }),
-    course_end_date: i18nFormatTimestamp({ intl: this.props.intl, timestamp: enrollment.course_end_date }),
-    enrollment_date: i18nFormatTimestamp({
-      intl: this.props.intl, timestamp: enrollment.enrollment_date,
-    }),
-    passed_date: i18nFormatPassedTimestamp({ intl: this.props.intl, timestamp: enrollment.passed_date }),
-    user_account_creation_date: i18nFormatTimestamp({
-      intl: this.props.intl, timestamp: enrollment.user_account_creation_date,
-    }),
-    progress_status: i18nFormatProgressStatus({ intl: this.props.intl, progressStatus: enrollment.progress_status }),
-    course_list_price: enrollment.course_list_price ? `$${enrollment.course_list_price}` : '',
-    current_grade: formatPercentage({ decimal: enrollment.current_grade }),
-  }));
+const LearnerActivityTable = ({ id, enterpriseId, activity }) => {
+  const intl = useIntl();
+  const {
+    isLoading,
+    courseEnrollments: tableData,
+    fetchCourseEnrollments: fetchTableData,
+  } = useCourseEnrollments(enterpriseId, id);
 
-  render() {
-    const { activity, id } = this.props;
+  const columns = [
+    {
+      Header: intl.formatMessage({
+        id: 'admin.portal.lpr.learner.activity.table.user_email.column.heading',
+        defaultMessage: 'Email',
+        description: 'Column heading for the user email column in the learner activity table',
+      }),
+      accessor: 'userEmail',
+      Cell: UserEmail,
+    },
+    {
+      Header: intl.formatMessage({
+        id: 'admin.portal.lpr.learner.activity.table.course_title.column.heading',
+        defaultMessage: 'Course Title',
+        description: 'Column heading for the course title column in the learner activity table',
+      }),
+      accessor: 'courseTitle',
+    },
+    {
+      Header: intl.formatMessage({
+        id: 'admin.portal.lpr.learner.activity.table.course_list_price.column.heading',
+        defaultMessage: 'Course Price',
+        description: 'Column heading for the course price column in the learner activity table',
+      }),
+      accessor: 'courseListPrice',
+      Cell: ({ row }) => formatPrice(row.values.courseListPrice),
+    },
+    {
+      Header: intl.formatMessage({
+        id: 'admin.portal.lpr.learner.activity.table.course_start_date.column.heading',
+        defaultMessage: 'Start Date',
+        description: 'Column heading for the course start date column in the learner activity table',
+      }),
+      accessor: 'courseStartDate',
+      Cell: ({ row }) => i18nFormatTimestamp({ intl, timestamp: row.values.courseStartDate }),
+    },
+    {
+      Header: intl.formatMessage({
+        id: 'admin.portal.lpr.learner.activity.table.course_end_date.column.heading',
+        defaultMessage: 'End Date',
+        description: 'Column heading for the course end date column in the learner activity table',
+      }),
+      accessor: 'courseEndDate',
+      Cell: ({ row }) => i18nFormatTimestamp({ intl, timestamp: row.values.courseEndDate }),
+    },
+    {
+      Header: intl.formatMessage({
+        id: 'admin.portal.lpr.learner.activity.table.passed_date.column.heading',
+        defaultMessage: 'Passed Date',
+        description: 'Column heading for the passed date column in the learner activity table',
+      }),
+      accessor: 'passedDate',
+      Cell: ({ row }) => i18nFormatPassedTimestamp({ intl, timestamp: row.values.passedDate }),
+    },
+    {
+      Header: intl.formatMessage({
+        id: 'admin.portal.lpr.learner.activity.table.current_grade.column.heading',
+        defaultMessage: 'Current Grade',
+        description: 'Column heading for the current grade column in the learner activity table',
+      }),
+      accessor: 'currentGrade',
+      Cell: ({ row }) => formatPercentage({ decimal: row.values.currentGrade }),
+    },
+    {
+      Header: intl.formatMessage({
+        id: 'admin.portal.lpr.learner.activity.table.progress_status.column.heading',
+        defaultMessage: 'Progress Status',
+        description: 'Column heading for the progress status column in the learner activity table',
+      }),
+      accessor: 'progressStatus',
+      Cell: ({ row }) => i18nFormatProgressStatus({ intl, progressStatus: row.values.progressStatus }),
+    },
+    {
+      Header: intl.formatMessage({
+        id: 'admin.portal.lpr.learner.activity.table.enrollment_date.column.heading',
+        defaultMessage: 'Last Activity Date',
+        description: 'Column heading for the last activity date column in the learner activity table',
+      }),
+      accessor: 'lastActivityDate',
+      Cell: ({ row }) => i18nFormatTimestamp({ intl, timestamp: row.values.lastActivityDate }),
+    },
+  ];
 
-    return (
-      <TableContainer
-        id={id}
-        className={id}
-        key={id}
-        fetchMethod={(enterpriseId, options) => EnterpriseDataApiService.fetchCourseEnrollments(
-          enterpriseId,
-          {
-            learnerActivity: activity,
-            ...options,
-          },
-        )}
-        columns={this.getTableColumns()}
-        formatData={this.formatTableData}
-        tableSortable
-      />
-    );
+  if (activity !== 'active_past_week') {
+    columns.splice(columns.findIndex(col => col.accessor === 'passedDate'), 1);
   }
-}
+
+  return (
+    <DataTable
+      isSortable
+      manualSortBy
+      isPaginated
+      manualPagination
+      isLoading={isLoading}
+      FilterStatusComponent={FilterStatus}
+      defaultColumnValues={{ Filter: TextFilter }}
+      columns={columns}
+      initialState={{
+        pageIndex: DEFAULT_PAGE,
+        pageSize: PAGE_SIZE,
+        sortBy: [{ id: 'lastActivityDate', desc: true }],
+        selectedRowsOrdered: [],
+      }}
+      fetchData={fetchTableData}
+      data={tableData.results}
+      itemCount={tableData.itemCount}
+      pageCount={tableData.pageCount}
+    />
+  );
+};
+
+const mapStateToProps = state => ({
+  enterpriseId: state.portalConfiguration.enterpriseId,
+});
 
 LearnerActivityTable.propTypes = {
   id: PropTypes.string.isRequired,
+  enterpriseId: PropTypes.string.isRequired,
   activity: PropTypes.string.isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(LearnerActivityTable);
+export default connect(mapStateToProps)(LearnerActivityTable);
diff --git a/src/data/constants/table.js b/src/data/constants/table.js
index aeb1588897..d83ac45f3d 100644
--- a/src/data/constants/table.js
+++ b/src/data/constants/table.js
@@ -5,6 +5,8 @@ const SORT_REQUEST = 'SORT_REQUEST';
 const SORT_SUCCESS = 'SORT_SUCCESS';
 const SORT_FAILURE = 'SORT_FAILURE';
 const CLEAR_TABLE = 'CLEAR_TABLE';
+const PAGE_SIZE = 20;
+const DEFAULT_PAGE = 0;
 
 export {
   PAGINATION_REQUEST,
@@ -14,4 +16,6 @@ export {
   SORT_SUCCESS,
   SORT_FAILURE,
   CLEAR_TABLE,
+  PAGE_SIZE,
+  DEFAULT_PAGE,
 };
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;