diff --git a/adminforth/documentation/docs/tutorial/03-Customization/15-afcl.md b/adminforth/documentation/docs/tutorial/03-Customization/15-afcl.md index 9215f2d7..2a753635 100644 --- a/adminforth/documentation/docs/tutorial/03-Customization/15-afcl.md +++ b/adminforth/documentation/docs/tutorial/03-Customization/15-afcl.md @@ -968,10 +968,49 @@ async function loadPageData(data) { //diff-add :data="loadPageData" - :pageSize="3"> + :pageSize="3"> + ``` > 👆 The page size is used as the limit for pagination. +### Table loading states + +For tables where you load data externally and pass them to `data` prop as array (including case with front-end pagination) you might want to show skeleton loaders in table externaly using `isLoading` props. + +For tables with server-side paganation which use async function in data prop you can listen for `@update:tableLoading` to get table internal loading state, in other words this event will let you know when server side function started and finished execution, so you might use it e.g. to disable some external filter buttons and so on. + +
+ +```ts +import { Table, Button } from "@/afcl" +const isTableLoading = ref(false); +const tableState = ref("loading"); + + ... + + +
+ +

Table state: {{ tableState }}

+ + +``` + ![AFCL Table](TableLoading.png) + +
+ ## ProgressBar
diff --git a/adminforth/documentation/docs/tutorial/03-Customization/TableLoading.png b/adminforth/documentation/docs/tutorial/03-Customization/TableLoading.png new file mode 100644 index 00000000..ee6a71c7 Binary files /dev/null and b/adminforth/documentation/docs/tutorial/03-Customization/TableLoading.png differ