Added Current Page and Pages Count to Pagination

Author: sergesoroka

package-lock.json

@@ -29,8 +29,10 @@
     "json-format-highlight": "^1.0.4",
     "keycloak-js": "^26.0.0",
     "lucide-react": "^0.350.0",
+    "oidc-client-ts": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-oidc-context": "^3.2.0",
     "react-router-dom": "^6.22.0",
     "survey-core": "latest",
     "survey-react-ui": "latest",

package.json

@@ -87,6 +87,11 @@ export default function TemplateTable({ data }) {
     },
   });
 
+  console.log(table.getPageCount());
+  // console.log(table.getState().pagination.pageIndex);
+  const pageCount = table.getPageCount();
+  const currentPage = table.getState().pagination.pageIndex;
+
   const setIdShosen = useSetIsShosen();
   useEffect(() => {
     setIdShosen(data && rowSelection ? data[rowSelection]?.uuid : null);
@@ -164,6 +169,12 @@ export default function TemplateTable({ data }) {
         >
           Previous
         </button>
+        <div className="paginationPageCount">
+          <p>
+            page <span className="pageCurrent">{currentPage + 1}</span> of{" "}
+            <span className="pageCurrent">{pageCount}</span>
+          </p>
+        </div>
         <button
           className="paginBtn"
           variant="outline"

src/DataTable/TemplateTable.tsx

@@ -162,9 +162,26 @@ th {
 .pagination {
   margin-top: 2rem;
   display: flex;
-  align-items: flex-end;
+  align-items: center;
   justify-content: flex-end;
-  gap: 12px;
+  gap: 18px;
+}
+
+.paginationPageCount {
+  width: 110px;
+  /* color: #777777; */
+  /* text-transform: uppercase; */
+  font-size: 14px;
+}
+.pageCurrent {
+  display: inline-block;
+  background-color: #e3f6ff;
+  width: 20px;
+  height: 20px;
+  padding: 2px;
+  border-radius: 50%;
+  text-align: center;
+  font-weight: 700;
 }
 
 .paginBtn {

src/StartScreenComp/StartScreenComp.css

@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { AuthProvider, useAuth } from "react-oidc-context";
 import HomePage from "./pages/HomePage.tsx";
 import TemplatePage from "./pages/TemplatePage.tsx";
 import WizardPage from "./pages/WizardPage.tsx";