modified table pagination

src/_digifi/layout/components/paginatedListing/RecentBVNList.tsx

@@ -86,7 +86,7 @@ export default function RecentBVNList({
 
       {/* show prev and next button if data exist */}
       {(data.length > 0 && data.length > itemsPerPage) && (
-        <div className="mt-2 mt-sm-5 w-full d-flex gap-4 justify-content-center align-items-center">
+        <div className="my-2 my-sm-5 w-full d-flex gap-4 justify-content-center align-items-center">
         <button
           onClick={handlePrev}
           className={`text-sm md:text-lg d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
@@ -94,6 +94,7 @@ export default function RecentBVNList({
               ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pe-none"
               : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
           }`}
+          disabled={currentPage == 0}
           // style={{width:'30px', height:'30px'}}
         >
           &lt; Previous
@@ -106,11 +107,12 @@ export default function RecentBVNList({
               <button
                 key={index}
                 onClick={handleNext}
-                className={`text-sm md:text-lg d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
+                className={`text-sm md:text-lg rounded-circle d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
                   currentPage != index
                     ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400"
                     : "text-slate-600 border-slate-600 dark:text-white dark:border-white pe-none"
                 }`}
+                disabled={currentPage != index}
                 style={{width:'30px', height:'30px'}}
               >
                 {index/itemsPerPage +1}
@@ -126,9 +128,10 @@ export default function RecentBVNList({
               ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pe-none"
               : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
           }`}
+          disabled={currentPage + numberOfSelection >= data.length}
           // style={{width:'30px', height:'30px'}}
         >
-         Next &gt;
+          Next &gt;
         </button>
       </div>
       )}

src/_digifi/layout/components/paginatedListing/RecentLoanAppList.tsx

@@ -86,7 +86,7 @@ export default function RecentLoanAppList({
 
       {/* show prev and next button if data exist */}
       {(data.length > 0 && data.length > itemsPerPage) && (
-        <div className="mt-2 mt-sm-5 w-full d-flex gap-4 justify-content-center align-items-center">
+        <div className="my-2 my-sm-5 w-full d-flex gap-4 justify-content-center align-items-center">
         <button
           onClick={handlePrev}
           className={`text-sm md:text-lg d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
@@ -94,6 +94,7 @@ export default function RecentLoanAppList({
               ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pe-none"
               : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
           }`}
+          disabled={currentPage == 0}
           // style={{width:'30px', height:'30px'}}
         >
           &lt; Previous
@@ -111,6 +112,7 @@ export default function RecentLoanAppList({
                     ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400"
                     : "text-slate-600 border-slate-600 dark:text-white dark:border-white pe-none"
                 }`}
+                disabled={currentPage != index}
                 style={{width:'30px', height:'30px'}}
               >
                 {index/itemsPerPage +1}
@@ -126,6 +128,7 @@ export default function RecentLoanAppList({
               ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pe-none"
               : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
           }`}
+          disabled={currentPage + numberOfSelection >= data.length}
           // style={{width:'30px', height:'30px'}}
         >
           Next &gt;