feat: add backend pagination for the afcl table

Author: yaroslav8765

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

@@ -797,7 +797,7 @@ const isoFlagToEmoji = (iso) => iso.toUpperCase().replace(/./g, char => String.f
 
 
 
-## Pagination
+### Pagination
 
 Table provides front-end side pagination. You can set `pageSize` (default is 10) to set how many rows to show per page.
 If there is less then `pageSize` rows, pagination will not be shown.
@@ -829,6 +829,33 @@ If there is less then `pageSize` rows, pagination will not be shown.
   </div>
 </div>
 
+### Server-side pagination
+
+To load pages dynamically, simply pass async callback to data:
+
+```ts
+async function loadPageData(offset, limit) {  
+    // in real app do await callAdminForthApi or await fetch to get date, use offset and limit value to slice data
+    return [
+      { name: 'John', age: offset, country: 'US' },
+      { name: 'Rick', age: offset+1, country: 'CA' },
+      { name: 'Alice', age: offset+2, country: 'BR' },
+   ]
+}
+
+<Table
+  :columns="[
+    { label: 'Name', fieldName: 'name' },
+    { label: 'Age', fieldName: 'age' },
+    { label: 'Country', fieldName: 'country' },
+  ]"
+//diff-remove
+  :data="[...] 
+//diff-add
+  :data="loadPageData"
+
+  :pageSize="3"
+```
 
 ## ProgressBar
 

adminforth/spa/src/afcl/Table.vue

@@ -66,6 +66,24 @@
       </li>
     </ul>
   </nav>
+  <nav v-if="typeof(props.data)==='function'" class="afcl-table-pagination-container bg-lightTableBackground dark:bg-darkTableBackground flex items-center flex-column flex-wrap md:flex-row justify-between p-4" 
+    :aria-label="$t('Table navigation')">
+    <i18n-t 
+      keypath="Showing page {from}" tag="span" class="afcl-table-pagination-text text-sm font-normal text-lightTablePaginationText dark:text-darkTablePaginationText mb-4 md:mb-0 block w-full md:inline md:w-auto"
+    >
+      <template #from><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{currentPage}}</span></template>
+    </i18n-t>
+    <div>
+      <button 
+        @click="switchPage(Math.max(1, currentPage - 1))"
+        class="afcl-table-pagination-button rounded-s-lg p-2 ms-0 text-blue-600 bg-lightActivePaginationButtonBackground border border-lightActivePaginationButtonBackground text-lightActivePaginationButtonText dark:bg-darkActivePaginationButtonBackground dark:border-darkActivePaginationButtonBackground dark:text-darkActivePaginationButtonText hover:opacity-90"
+      > <IconArrowLeftOutline /> </button>
+      <button 
+        @click="switchPage(currentPage + 1)"
+        class="afcl-table-pagination-button rounded-e-lg p-2 text-lightUnactivePaginationButtonText border bg-lightUnactivePaginationButtonBackground border-lightUnactivePaginationButtonBorder hover:bg-lightUnactivePaginationButtonHoverBackground hover:text-lightUnactivePaginationButtonHoverText dark:bg-darkUnactivePaginationButtonBackground dark:border-darkUnactivePaginationButtonBorder dark:text-darkUnactivePaginationButtonText dark:hover:bg-darkUnactivePaginationButtonHoverBackground dark:hover:text-darkUnactivePaginationButtonHoverText"
+      > <IconArrowRightOutline /> </button>
+    </div>
+  </nav>
 </div>
 
 
@@ -74,6 +92,8 @@
 
 <script setup lang="ts">
   import { ref, type Ref, computed } from 'vue';
+  import { asyncComputed } from '@vueuse/core';
+  import { IconArrowRightOutline, IconArrowLeftOutline } from '@iconify-prerendered/vue-flowbite';
 
   const props = withDefaults(
     defineProps<{
@@ -83,7 +103,7 @@
       }[],
       data: {
         [key: string]: any,
-      }[],
+      }[] | ((offset: number, limit: number) => Promise<{ [key: string]: any }[]>),
       evenHighlights?: boolean,
       pageSize?: number,
     }>(), {
@@ -95,12 +115,17 @@
   const currentPage = ref(1);
 
   const totalPages = computed(() => {
+    if (typeof props.data === 'function') {};
     return Math.ceil(props.data.length / props.pageSize);
   });
 
-  const dataPage = computed(() => {
+  const dataPage = asyncComputed( async() => {
     const start = (currentPage.value - 1) * props.pageSize;
     const end = start + props.pageSize;
+    if (typeof props.data === 'function') {
+      const res = await props.data(currentPage.value, props.pageSize);
+      return res;
+    }
     return props.data.slice(start, end);
   });