canonical / canonical/vanilla-framework

Improvements to pagination

Open
#4,704 14 comments 0 reactions 0 assignees View on GitHub
Review: Design needed Vanilla WG WG: Validated
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)

MAAS

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

![LXD](https://user-images.githubusercontent.com/114913788/225867571-de5f7a90-b71a-444b-8051-12ecc0e0360a.png)

## 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.