Merge pull request #345 from devforth/AdminForth/813

feat: add backend pagination for the afcl table

Author: ivictbor

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,36 @@ 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 {
+    data: [
+      { name: 'John', age: offset, country: 'US' },
+      { name: 'Rick', age: offset+1, country: 'CA' },
+      { name: 'Alice', age: offset+2, country: 'BR' },
+    ],
+    total: 3 // should return total amount of records in database
+  }
+}
+
+<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

@@ -44,9 +44,9 @@
     <i18n-t 
       keypath="Showing {from} to {to} of {total}" 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">{{ Math.min((currentPage - 1) * props.pageSize + 1, props.data.length) }}</span></template>
-      <template #to><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ Math.min(currentPage * props.pageSize, props.data.length) }}</span></template>
-      <template #total><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ props.data.length }}</span></template>
+      <template #from><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ Math.min((currentPage - 1) * props.pageSize + 1, dataResult.total) }}</span></template>
+      <template #to><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ Math.min(currentPage * props.pageSize, dataResult.total) }}</span></template>
+      <template #total><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ dataResult.total }}</span></template>
     </i18n-t>
 
     <ul class="afcl-table-pagination-list inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
@@ -74,6 +74,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 +85,7 @@
       }[],
       data: {
         [key: string]: any,
-      }[],
+      }[] | ((offset: number, limit: number) => Promise<{data: {[key: string]: any}[], total: number}>),
       evenHighlights?: boolean,
       pageSize?: number,
     }>(), {
@@ -94,14 +96,21 @@
 
   const currentPage = ref(1);
 
+  const dataResult = asyncComputed( async() => {
+    if (typeof props.data === 'function') {
+      return await props.data(currentPage.value, props.pageSize);
+    }
+    const start = (currentPage.value - 1) * props.pageSize;
+    const end = start + props.pageSize;
+    return { data: props.data.slice(start, end), total: props.data.length };
+  });
+
   const totalPages = computed(() => {
-    return Math.ceil(props.data.length / props.pageSize);
+    return dataResult.value?.total ? Math.ceil(dataResult.value.total / props.pageSize) : 1;
   });
 
-  const dataPage = computed(() => {
-    const start = (currentPage.value - 1) * props.pageSize;
-    const end = start + props.pageSize;
-    return props.data.slice(start, end);
+  const dataPage = asyncComputed( async() => {
+    return dataResult.value.data;
   });
 
   function switchPage(p: number) {