feat: add makeHeaderSticky and makePaginationSticky for the afcl table

Author: yaroslav8765

adminforth/documentation/docs/tutorial/03-Customization/15-afcl.md

@@ -1186,6 +1186,30 @@ const tableState = ref("loading");
 
 </div>
 
+
+### Making header and pagination sticky
+
+If you want to make table header or pagination, you can add `makeHeaderSticky`, `makePaginationSticky`
+
+```
+  <Table
+    class="min-h-[200px] max-h-[250px]"
+    makeHeaderSticky
+    makePaginationSticky
+    :columns="[
+      { label: 'Name', fieldName: 'name' },
+      { label: 'Age', fieldName: 'age' },
+      { label: 'Country', fieldName: 'country' },
+    ]"
+    :data="[
+      { name: 'John', age: 30, country: 'US' },
+      { name: 'Rick', age: 25, country: 'CA' },
+      { name: 'Alice', age: 35, country: 'UK' },
+      { name: 'Colin', age: 40, country: 'AU' },
+    ]"
+  ></Table>
+```
+
 ## ProgressBar
 
 <div class="split-screen" >

adminforth/spa/src/afcl/Table.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="afcl-table-container relative overflow-x-auto shadow-md rounded-lg">
-    <div class="overflow-x-auto w-full">
+  <div class="afcl-table-container relative overflow-x-auto overflow-y-auto shadow-md rounded-lg">
       <table class="afcl-table w-full text-sm text-left rtl:text-right text-lightTableText dark:text-darkTableText overflow-x-auto">
-          <thead class="afcl-table-thread text-xs text-lightTableHeadingText uppercase bg-lightTableHeadingBackground dark:bg-darkTableHeadingBackground dark:text-darkTableHeadingText">
+          <thead class="afcl-table-thread text-xs text-lightTableHeadingText uppercase bg-lightTableHeadingBackground dark:bg-darkTableHeadingBackground dark:text-darkTableHeadingText" :class="makeHeaderSticky ? 'sticky top-0' : ''">
             <tr>
               <th
                 scope="col"
@@ -79,10 +78,11 @@
             </tr>
           </tbody>
       </table>
-    </div>
     <nav class="afcl-table-pagination-container bg-lightTableBackground dark:bg-darkTableBackground mt-2 flex flex-col gap-2 items-center sm:flex-row justify-center sm:justify-between px-4 pb-4" 
       v-if="totalPages > 1"
-      :aria-label="$t('Table navigation')">
+      :aria-label="$t('Table navigation')"
+      :class="makePaginationSticky ? 'sticky bottom-0' : ''"
+    >
     <i18n-t 
       keypath="Showing {from} to {to} of {total}" tag="span" class="afcl-table-pagination-text text-sm font-normal text-center text-lightTablePaginationText dark:text-darkTablePaginationText sm:mb-4 md:mb-0 block w-full md:inline md:w-auto"
     >
@@ -169,6 +169,8 @@
       isLoading?: boolean,
       defaultSortField?: string,
       defaultSortDirection?: 'asc' | 'desc',
+      makeHeaderSticky?: boolean,
+      makePaginationSticky?: boolean,
     }>(), {
       evenHighlights: true,
       pageSize: 5,