Merge branch 'next' of github.com:devforth/adminforth into next

Author: SerVitasik

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

@@ -834,8 +834,9 @@ If there is less then `pageSize` rows, pagination will not be shown.
 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
+async function loadPageData(data) {  
+  const { offset, limit } = data;
+  // 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' },
@@ -857,8 +858,9 @@ async function loadPageData(offset, limit) {
 //diff-add
   :data="loadPageData"
 
-  :pageSize="3"
+  :pageSize="3"> </Table>
 ```
+> 👆 The page size is used as the limit for pagination.
 
 ## ProgressBar
 

adminforth/spa/src/afcl/Table.vue

@@ -129,7 +129,7 @@
   import { IconTableRowOutline } from '@iconify-prerendered/vue-flowbite';
 
   type Row = Record<string, unknown>
-  type LoadFn = (page: number, pageSize: number) => Promise<{ data: Row[]; total: number }>
+  type LoadFn = (params: { offset: number, limit: number }) => Promise<{ data: Row[]; total: number }>
 
   const isFunc = (v: unknown): v is LoadFn => typeof v === 'function'
 
@@ -153,7 +153,7 @@
       error.value = null
       try {
         if (isFunc(props.data)) {
-          const res = await props.data(page.value, pageSize.value)
+          const res = await props.data({offset: ((page.value - 1) * pageSize.value), limit: pageSize.value})
           if (id !== requestId) return
           result.value = res
         } else {
@@ -183,7 +183,7 @@
       }[],
       data: {
         [key: string]: any,
-      }[] | ((offset: number, limit: number) => Promise<{data: {[key: string]: any}[], total: number}>),
+      }[] | ((params: { offset: number, limit: number }) => Promise<{data: {[key: string]: any}[], total: number}>),
       evenHighlights?: boolean,
       pageSize?: number,
     }>(), {