feat: add dropdown for selecting page size options in list view#603
Closed
kulikp1 wants to merge 14 commits into
Closed
feat: add dropdown for selecting page size options in list view#603kulikp1 wants to merge 14 commits into
kulikp1 wants to merge 14 commits into
Conversation
SerVitasik
requested changes
May 8, 2026
…aceholder to ResourceListTable
Contributor
There was a problem hiding this comment.
Pull request overview
Adds support for configurable “rows per page” options in the list view, wiring a new listPageSizeOptions resource option from backend to SPA and exposing it via a dropdown in the table pagination controls.
Changes:
- Introduces
options.listPageSizeOptions(static array or async callback) and resolves it server-side in/get_resource. - Adds a page-size select dropdown to list pagination UI and syncs
pageSizewith the route query (pageSize=). - Adjusts the shared
Selectplaceholder logic when search is disabled.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| adminforth/types/Common.ts | Adds the listPageSizeOptions resource option type. |
| adminforth/spa/src/views/ListView.vue | Plumbs pageSizeOptions into the table and syncs pageSize with query params + refetch logic. |
| adminforth/spa/src/components/ResourceListTable.vue | Renders the “Rows per page” dropdown and emits update:pageSize. |
| adminforth/spa/src/afcl/Select.vue | Fixes placeholder text behavior when searchDisabled is true. |
| adminforth/modules/restApi.ts | Resolves functional listPageSizeOptions to a concrete array in the /get_resource response. |
| adminforth/documentation/docs/tutorial/03-Customization/13-standardPagesTuning.md | Documents listPageSizeOptions and intended UI behavior. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+329
to
+346
| 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 | ||
| }, | ||
| } |
SerVitasik
requested changes
May 11, 2026
| rows: any[] | null, | ||
| totalRows: number, | ||
| pageSize: number, | ||
| pageSizeOptions?: { label: string; value: any }[] | number[] | null; |
Collaborator
There was a problem hiding this comment.
{ label: string; value: any }[]
I thought user can enter only array with numbers
| } | ||
| }); | ||
|
|
||
| const selectDynamicWidth = computed(() => { |
Collaborator
There was a problem hiding this comment.
I think we can just remove fixed width and everything will be fine
SerVitasik
requested changes
May 11, 2026
| :style="{ width: selectDynamicWidth }" | ||
| :placeholder="pageSizeInternal?.toString()" | ||
| class="text-sm " | ||
| classesForInput="h-[34px] min-h-0 py-1 pl-2 pr-6 text-sm rounded-md cursor-pointer af-button-shadow |
| return null; | ||
| } | ||
|
|
||
| const firstItem = props.pageSizeOptions[0]; |
| const PAGE_SIZE_OPTIONS = computed(() => { | ||
| const array = coreStore.resource?.options?.listPageSizeOptions; | ||
|
|
||
| if (!Array.isArray(array)) return undefined; |
| @update:sort="sort = $event" | ||
| @update:checkboxes="checkboxes = $event" | ||
| @update:records="getListInner" | ||
| :pageSizeOptions="PAGE_SIZE_OPTIONS" |
| } | ||
|
|
||
| watch([page, sort, () => filtersStore.filters], async () => { | ||
| watch([page, pageSize, sort, () => filtersStore.filters], async () => { |
| })); | ||
| }); | ||
|
|
||
| const pageSize = computed({ |
Collaborator
There was a problem hiding this comment.
I think we can remove it
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.