## Summary## Background
### User story
> As a user, I want to be able to look through data in an efficient, readWe need to include the pagination as a customizable property in the Table way
> As a developer,'s footer. I want to improve performance by fetching and displaying small portions of data at onceThe user will be able to hide/show this pagination according to each project's needs.
### API{F47180193}
We will likely need at least 2 new props for the Table component:
- `page`: This prop, bound via `v-model` will be the number of the current page
- `itemsPerPage`: This prop, also bound via `v-model`, will be the number of items shown on each page
These items would need to be bound by v-model because both can be updated via user interaction, but the parent component needs to be aware of them as well.
### UI
The pagination UI consists of several different elements, any combination of which may be usedThe pagination will consist of the following elements:
- Items per page selector
- Number of items indicator
- Page selector
- Page arrows
| [[ https://www.figma.com/file/pTQZX5MgXUXnYHybJQk7zo/Table-component?type=design&node-id=2575-48176&mode=design&t=YXeI24zcmLROoYJo-0 | Component spec sheet ]] |
### Demos and testing
New demos should be added to demonstrate pagination. At least once example should fetch data from an API and handle pagination logic itself.### User story
Unit tests should> As a user, I want to be addedble to cover pagination functionality.look through data in an efficient, readable way
### Open ques> As a developer, I want to improve performance by fetching and displaying small portions of data at once
#### UI parts### Design spec
Different use cases require or preclude parts of the pagination UI. For example, if viewing a table of wiki users, there may be thousands or even millions of results, so it wouldn't make sense to have a page dropdown containing a link to every possible page. It also might not always be possible, or helpful, to display the total number of results. How can we ensure we're covering all of the different use cases in a logical// Once a component spec sheet has been created in Figma, easy-to-understand way?remove the note stating that the spec is missing and link to the spec below. Can we simplify the pagination UI to cover more use cases in a single way?//
#### Translatable text| Component spec sheet |
There are many translatable strings required for the UI:
- "items per page"
- "X-Y of Z items"
- "___ of X pages"
- aria-labels for all 4 of the icon-only arrow butt=== Open questions
This would be a lot to provide as props to the Table component. We should consider:
- Simplifying the pagination UI to us as little text/labels as possible - Can the number of rows in the Select to be customizable by whoever is implementing the table?
- Building some kind of i18n systems into Codex so we can have sensible, translated defaults (see T345386)
#### Items per page dropdown options
What options do we show in the "items per page" dropdown? Is this configurable - Are there performance concerns at a certain level of rows? Is it dependent on the number of items available - e.g. if only 19 items were found, do we show "50" as an option?
#### Pagination logic
There are 2 levels of support we could implement:Should we enforce a max?
1. We provide the pagination UI, but the parent component must provide only - Is it possible to only show the table data to be shown at a given time.ext "rows" once, The Table component will not compute which items to show.for the selected amount so we don't repeat it for every option?
2. The parent component provides all table data at once, and Table component computes which items to show depending on the pagination state
We need to do the first one to support use cases where results are fetched from an API, and therefore all table data cannot be provided at once. We may want to consider supporting the second for simpler use cases, but we should evaluate whether this is really useful or if it's better to just force the parent component to figure out which items to show. - Can the usage of this pagination be optional?
---
##### Acceptance criteria (or Done)
TODO: update this once the open question are resolved
- [] The Table component has new props for pagination functionality**Design**
[] Design the Figma spec sheet and add it in this task
- [] The pagination UI is added and any combination of pagination elements can be used[] Update the component in the Figma [[ https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/❖-Codex-components?node-id=1891%3A4420&viewport=287%2C338%2C0.28 | library ]]. //This step will be done by a DST member.//
- [] Demos are added to the sandbox page[] Document the Guidelines for this Table's pagination and include them in the Table's guidelines in Codex
**Code**
- [] Unit tests cover the new behavior[] Implement the component in Codex