From 5f5d67137e1afbfbb4dd9e6b1489dacfbbc472f1 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Fri, 8 May 2026 13:30:41 +0300
Subject: [PATCH 1/2] feat: add dropdown for selecting page size options in
 list view

---
 .../13-standardPagesTuning.md                 | 29 ++++++++++++++
 .../spa/src/components/ResourceListTable.vue  | 35 +++++++++++++++++
 adminforth/spa/src/views/ListView.vue         | 39 +++++++++++++++++--
 adminforth/types/Common.ts                    |  1 +
 4 files changed, 100 insertions(+), 4 deletions(-)

diff --git a/adminforth/documentation/docs/tutorial/03-Customization/13-standardPagesTuning.md b/adminforth/documentation/docs/tutorial/03-Customization/13-standardPagesTuning.md
index 169fcb967..441ee8177 100644
--- a/adminforth/documentation/docs/tutorial/03-Customization/13-standardPagesTuning.md
+++ b/adminforth/documentation/docs/tutorial/03-Customization/13-standardPagesTuning.md
@@ -319,6 +319,35 @@ export default {
   ]
 ```
 
+### List Page Size Options
+You can  define available pagination sizes using options.listPageSizeOptions. This allows users to choose how many records they want to see per page in the list view.
+```typescript title="./resources/apartments.ts"
+export default {
+      resourceId: 'aparts',
+      options: {
+        ...
+        listPageSize: 10,
+        //diff-add
+        listPageSizeOptions: [10, 20, 50],
+      }
+    }
+  ]
+```
+
+#### How it works
+- listPageSize defines the default number of records per page when the list is opened.
+- listPageSizeOptions defines the available page size options shown to the user.
+
+For example: listPageSizeOptions: [10, 20, 50] will allow switching between 10 / 20 / 50 records per page.
+
+#### UI behavior
+Page size switching is implemented via a select dropdown (select input) in the table pagination controls.
+- User opens the select
+- Chooses a value (e.g. 20)
+- Table reloads with the new page size
+> ☝️Notes 
+If listPageSizeOptions is not provided, a default set of page sizes will be used. The selected value updates the table immediately and triggers a data refetch. This option works together with listPageSize, which defines both the default value and the available options at the same time.
+
 ### Virtual scroll
 
 Set `options.listVirtualScrollEnabled` to true to enable virtual scrolling in the table. The default value is false. Enable this option if you need to display a large number of records on a single page.
diff --git a/adminforth/spa/src/components/ResourceListTable.vue b/adminforth/spa/src/components/ResourceListTable.vue
index df90cafc2..d3b3b91a3 100644
--- a/adminforth/spa/src/components/ResourceListTable.vue
+++ b/adminforth/spa/src/components/ResourceListTable.vue
@@ -340,6 +340,20 @@
         </span> 
       </template>
     </span>
+    <div v-if="totalRows > 0 && pageSizeOptionsComputed?.length" 
+      class="flex items-center gap-2 ml-auto" > 
+      <span class="text-sm text-lightListTablePaginationHelpText dark:text-darkListTablePaginationHelpText"> 
+        {{ $t('Rows per page') }} 
+      </span> 
+      <Select v-model="pageSizeInternal" 
+        :options="pageSizeOptionsComputed" 
+        :searchDisabled="true" 
+        class="text-sm w-[68px]" 
+        classesForInput="h-[34px] min-h-0 py-1 pl-2 pr-6 text-sm rounded-md cursor-pointer af-button-shadow
+        bg-lightDropdownButtonsBackground text-lightDropdownButtonsText border-lightDropdownButtonsBorder
+        dark:bg-darkDropdownButtonsBackground dark:text-darkDropdownButtonsText dark:border-darkDropdownButtonsBorder"
+      /> 
+    </div>
   </div>
 </template>
 
@@ -368,6 +382,7 @@ import { useAdminforth } from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
 import ListActionsThreeDots from '@/components/ListActionsThreeDots.vue';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
+import Select from '@/afcl/Select.vue';
 
 const coreStore = useCoreStore();
 const { t } = useI18n();
@@ -378,6 +393,7 @@ const props = withDefaults(defineProps<{
   rows: any[] | null,
   totalRows: number,
   pageSize: number,
+  pageSizeOptions?: { label: string; value: any }[];
   checkboxes: any[],
   sort: any[],
   noRoundings?: boolean,
@@ -405,6 +421,7 @@ const rowsToRender = computed(() => {
 // emits, update page
 const emits = defineEmits([
   'update:page',
+  'update:pageSize',
   'update:sort',
   'update:checkboxes',
   'update:records'
@@ -414,6 +431,16 @@ const emits = defineEmits([
 const checkboxesInternal: Ref<any[]> = ref([]);
 const pageInput = ref('1');
 const page = ref(1);
+
+const pageSizeInternal = ref(props.pageSize);
+
+const pageSizeOptionsComputed = computed(() => {
+  if (!props.pageSizeOptions || props.pageSizeOptions.length === 0) {
+    return undefined;
+  }
+  return props.pageSizeOptions;
+});
+
 const sort: Ref<Array<{field: string, direction: string}>> = ref([]);
 
 const showListActionsThreeDots = computed(() => {
@@ -465,6 +492,14 @@ watch(() => props.page, (newPage) => {
   page.value = newPage;
 });
 
+watch(() => props.pageSize, (newPageSize) => {
+  pageSizeInternal.value = newPageSize;
+});
+
+watch(pageSizeInternal, (newPageSize) => {
+  emits('update:pageSize', newPageSize);
+});
+
 const rowRefs = useTemplateRef<HTMLElement[]>('rowRefs');
 const headerRefs = useTemplateRef<HTMLElement[]>('headerRefs');
 const rowHeights = ref<number[]>([]);
diff --git a/adminforth/spa/src/views/ListView.vue b/adminforth/spa/src/views/ListView.vue
index 910b9de70..684965bd8 100644
--- a/adminforth/spa/src/views/ListView.vue
+++ b/adminforth/spa/src/views/ListView.vue
@@ -171,6 +171,8 @@
       @update:sort="sort = $event"
       @update:checkboxes="checkboxes = $event"
       @update:records="getListInner"
+      :pageSizeOptions="PAGE_SIZE_OPTIONS"
+      @update:pageSize="pageSize = $event"
       :sort="sort"
       :pageSize="pageSize"
       :totalRows="totalRows"
@@ -261,8 +263,19 @@ const customActionLoadingStates = ref<{[key: string]: boolean}>({});
 const DEFAULT_PAGE_SIZE = 10;
 
 
-const pageSize = computed(() => coreStore.resource?.options?.listPageSize || DEFAULT_PAGE_SIZE);
-const isVirtualScrollEnabled = computed(() => coreStore.resource?.options?.listVirtualScrollEnabled || false);
+const PAGE_SIZE_OPTIONS = computed(() => {
+  const array = coreStore.resource?.options?.listPageSizeOptions;
+  
+  if (!array || array.length === 0) return undefined;
+  
+  return array.map(size => ({ label: size.toString(), value: size }));
+});
+
+const pageSize = ref(DEFAULT_PAGE_SIZE);
+
+const isVirtualScrollEnabled = computed(() =>
+  coreStore.resource?.options?.listVirtualScrollEnabled || false
+);
 const listBufferSize = computed(() => coreStore.resource?.options?.listBufferSize || 30);
 
 const isPageLoaded = ref(false);
@@ -426,7 +439,16 @@ async function init() {
   }
   // page init should be also in same tick 
   if (route.query.page) {
-    page.value = parseInt(route.query.page as string);
+      page.value = parseInt(route.query.page as string);
+    }
+    if (route.query.pageSize) {
+    const parsedPageSize = parseInt(route.query.pageSize as string);
+    // Перевіряємо наявність опцій перед використанням .includes
+    if (PAGE_SIZE_OPTIONS.value && PAGE_SIZE_OPTIONS.value.some(o => o.value === parsedPageSize)) {
+      pageSize.value = parsedPageSize;
+    }
+  } else if (coreStore.resource?.options?.listPageSize) {
+    pageSize.value = coreStore.resource.options.listPageSize;
   }
 
   // getList(); - Not needed here, watch will trigger it
@@ -446,7 +468,7 @@ async function init() {
   }
 }
 
-watch([page, sort, () => filtersStore.filters], async () => {
+watch([page, pageSize, sort, () => filtersStore.filters], async () => {
   // console.log('🔄️ page/sort/filter change fired, page:', page.value);
   await getListInner();
 }, { deep: true });
@@ -513,6 +535,15 @@ watch([page], async () => {
   setQuery({ page: page.value });
 });
 
+watch(pageSize, async () => {
+  page.value = 1;
+
+  setQuery({
+    page: 1,
+    pageSize: pageSize.value,
+  });
+});
+
 watch([sort], async () => {
   if (!sort.value.length) {
     setQuery({ sort: undefined });
diff --git a/adminforth/types/Common.ts b/adminforth/types/Common.ts
index 34828c6c5..6124152ab 100644
--- a/adminforth/types/Common.ts
+++ b/adminforth/types/Common.ts
@@ -472,6 +472,7 @@ export interface AdminForthResourceInputCommon {
        * Page size for list view
        */
       listPageSize?: number,
+      listPageSizeOptions?: number[],
       
       /**
        * Whether to use virtual scroll in list view.

From 707947ca8e46ecb837ea664a2132e3638606b326 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Fri, 8 May 2026 15:48:43 +0300
Subject: [PATCH 2/2] feat: enhance pageSizeOptions type and improve computed
 logic for dropdown rendering

---
 .../spa/src/components/ResourceListTable.vue      | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/adminforth/spa/src/components/ResourceListTable.vue b/adminforth/spa/src/components/ResourceListTable.vue
index d3b3b91a3..1073420e3 100644
--- a/adminforth/spa/src/components/ResourceListTable.vue
+++ b/adminforth/spa/src/components/ResourceListTable.vue
@@ -393,7 +393,7 @@ const props = withDefaults(defineProps<{
   rows: any[] | null,
   totalRows: number,
   pageSize: number,
-  pageSizeOptions?: { label: string; value: any }[];
+  pageSizeOptions?: { label: string; value: any }[] | number[] | null;  
   checkboxes: any[],
   sort: any[],
   noRoundings?: boolean,
@@ -436,9 +436,18 @@ const pageSizeInternal = ref(props.pageSize);
 
 const pageSizeOptionsComputed = computed(() => {
   if (!props.pageSizeOptions || props.pageSizeOptions.length === 0) {
-    return undefined;
+    return null;
   }
-  return props.pageSizeOptions;
+  
+  const firstItem = props.pageSizeOptions[0];
+  if (typeof firstItem === 'object' && firstItem !== null) {
+    return props.pageSizeOptions as { label: string; value: any }[];
+  }
+
+  return (props.pageSizeOptions as number[]).map(size => ({
+    label: size.toString(),
+    value: size
+  }));
 });
 
 const sort: Ref<Array<{field: string, direction: string}>> = ref([]);