diff --git a/adminforth/documentation/docs/tutorial/03-Customization/13-standardPagesTuning.md b/adminforth/documentation/docs/tutorial/03-Customization/13-standardPagesTuning.md index 169fcb967..9199203be 100644 --- a/adminforth/documentation/docs/tutorial/03-Customization/13-standardPagesTuning.md +++ b/adminforth/documentation/docs/tutorial/03-Customization/13-standardPagesTuning.md @@ -319,6 +319,49 @@ 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, + // listPageSizeOptions can be a static array + //diff-add + listPageSizeOptions: [10, 20, 50], + // OR a function for dynamic options based on user role + //diff-add + listPageSizeOptions: ({ adminUser }) => { + //diff-add + if (adminUser?.dbUser?.role === 'superadmin') { + //diff-add + return [50, 100, 500]; + //diff-add + } + //diff-add + return [10, 20, 50]; + //diff-add + }, + } + } + ] +``` + +#### 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 (or resolves to an empty array), the page size select is not shown. The selected value updates the table immediately and triggers a data refetch. Use `listPageSize` to define the initial number of records per page, and `listPageSizeOptions` to define which page sizes the user can switch between. + ### 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/modules/restApi.ts b/adminforth/modules/restApi.ts index 6405f122d..a8311a7bd 100644 --- a/adminforth/modules/restApi.ts +++ b/adminforth/modules/restApi.ts @@ -1203,6 +1203,9 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI { ), options: { ...resource.options, + listPageSizeOptions: typeof resource.options.listPageSizeOptions === 'function' + ? await resource.options.listPageSizeOptions({ adminUser, adminforth: this.adminforth }) + : resource.options.listPageSizeOptions, fieldGroups: resource.options.fieldGroups?.map((group, i) => ({ ...group, noTitle: group.noTitle ?? false, diff --git a/adminforth/spa/src/afcl/Select.vue b/adminforth/spa/src/afcl/Select.vue index 54bf3f7ac..f5aa40a25 100644 --- a/adminforth/spa/src/afcl/Select.vue +++ b/adminforth/spa/src/afcl/Select.vue @@ -16,7 +16,7 @@ :class="[{'cursor-pointer': searchDisabled}, classesForInput]" autocomplete="off" data-custom="no-autofill" :placeholder=" - selectedItems.length && !multiple ? '' : (showDropdown ? $t('Search') : placeholder || $t('Select...')) + selectedItems.length && !multiple ? '' : (showDropdown && !searchDisabled ? $t('Search') : placeholder || $t('Select...')) " /> diff --git a/adminforth/spa/src/components/ResourceListTable.vue b/adminforth/spa/src/components/ResourceListTable.vue index df90cafc2..2243601db 100644 --- a/adminforth/spa/src/components/ResourceListTable.vue +++ b/adminforth/spa/src/components/ResourceListTable.vue @@ -340,6 +340,24 @@ +
+ + {{ $t('Rows per page') }} + +