canonical / canonical/vanilla-framework
Improvements to pagination
- Dominant language
- HTML
- Stars
- 983
- Forks
- 216
- Avg merge
- 3d 13h
- Merged PRs (30d)
- 3
Description
## Pattern to amend
Table controls
## Visual
[MAAS](https://app.zeplin.io/project/63ca81b58cdf10309393a6cb/screen/63ebde78cd53a46e0c8006c9)

[LXD](https://app.zeplin.io/project/63e128139e0eff100dad0cbd/screen/640b87465b28d97be4bd1feb)

## Context
MAAS has recently introduced a table control bar. It consists of the following three elements:
- Items count
- Pagination (new look and feel)
- Items per page selection
To meet our user's needs, as well as to keep the experience across products consistent, the LDX team has decided to adopt the pattern.
To meet the needs of the MAAS user, the table control bar is positioned [above the table](https://app.zeplin.io/project/63ca81b58cdf10309393a6cb/screen/63ebde78cd53a46e0c8006c9).
To meet the needs of the LXD users, the table control bar is positioned [below the table](https://app.zeplin.io/project/63e128139e0eff100dad0cbd/screen/640b87465b28d97be4bd1feb), as a sticky table footer.
(see mockups in Zeplin)
Links to the GitHub tasks (MAAS)
[Page size select](https://github.com/canonical/maas-ui/tree/main/src/app/machines/views/MachineList/MachineListTable/PageSizeSelect)
[Pagination ](https://github.com/canonical/maas-ui/tree/main/src/app/machines/views/MachineList/MachineListTable/MachineListPagination)
We believe other products can benefit from this pattern.
Contributor guide
Research direction
Start with the table controls pattern and compare the linked MAAS Page size select and Pagination entry points with the supplied MAAS and LXD mockups. Done means the Vanilla Framework pagination pattern covers the item count, pagination, and items-per-page controls with the requested above-table or sticky-footer placement; the issue names no Vanilla Framework files or tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 28/100