Pagination
A pagination pattern showing the number of visible rows per page with controls to navigate between pages, ensuring efficient content browsing and data management.
- Overview
- Specs
- Guidelines
Pattern
A Pagination pattern with row visibility control allows users to define how many rows of data they want to see on each page.
This feature enhances usability by giving users the flexibility to adjust the number of visible items according to their preferences or screen size. The Pagination component typically includes navigation controls, such as previous and next buttons, or page numbers, allowing users to efficiently navigate through large datasets without overwhelming the interface with too much information at once.
Besides improving the user experience, this Pagination pattern optimizes performance, since only the specified number of rows is loaded at a time.
- A: Large variation;
- B: Regular variation;
- C: Small variation;
- 1: Visible rows’ selectbox;
- 2: Navigation to move back;
- 4: Navigation to move forward;
Used for:
Inline tables
When using inline tables, it makes sense to use the large variation, where the number of rows displayed can be changed.
Page title
In the page title pattern, the small or regular variation can be used to navigate between entries.
Don’t use for:
Infinite scroll
For scenarios that use infinite scroll, such as our datagrids, the Pagination pattern isn’t necessary.
Static content
For static content or content that doesn’t require frequent interaction (such as articles or reports), breaking the data into multiple pages could be unnecessary and disrupt the user’s reading experience.
Small datasets
When the total number of rows or data entries is small, Pagination can feel unnecessary and add complexity. Displaying all data at once might provide a cleaner and quicker user experience in such cases.
Demo
Access the Figma file and inspect the element using Dev Mode.
Last Update
- Added extended variation;
- Added compact variation;
- Updated styles.
Variations
Extended
.large {
labels: var(--grey-7, --label-regular);
selectbox: var(--small-singleSelection);
buttonIcons: var(--small-tertiary-grey);
leftElementsGap: 16px;
rightElementsGap: 16px;
}
Regular
.regular {
label: var(--grey-7, --label-regular);
buttonIcons: var(--small-textButton-grey);
gap: 16px;
}Small
.small {
buttonIcons: var(--small-textButton-grey);
gap: 8px;
}Useful links
Consult our Figma file to access our assets and inspect them in dev mode.
This component is or will be provided by the Polygon framework. See its documentation to learn more.
This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.
When to use each variation?
Large
The large variation is designed to be applied to data grids that do not have the infinite scroll functionality, or to inline tables where the number of visible rows can be adjusted.
This variation allows users to control the number of rows displayed in a table at any given time, offering a more flexible and customizable viewing experience. In scenarios where infinite scroll isn’t suitable—such as in the case of data-heavy grids where performance and quick navigation are key—this pattern is a practical alternative. Users can modify the number of visible rows per page, making it easier to browse through large datasets without overwhelming the interface. It ensures that data is presented efficiently while maintaining clarity and usability, especially in tables that need to handle complex or large amounts of information.
Keep in mind that this style of Pagination isn’t recommended for our datagrids. The pagination behavior that is recommended in all cases is infinite loading, but when a product doesn’t have the possibility of implementing infinite loading, this pattern must be used.
Adapt the large variation if some elements aren’t necessary.
Do not use the large variation in the page title pattern.
Regular & Small
The regular and small variations are designed to be applied in limited spaces, such as in the page title area, where there can easily be an overcrowding of elements.
These variations are particularly useful in environments where space is constrained, and a dense arrangement of components could negatively impact readability and usability. By optimizing the layout, the compact variation helps reduce visual clutter and ensures that key elements remain visible and accessible without overwhelming the user. It is ideal for scenarios in which many elements need to be presented in a small area, maintaining a clean and organized interface while maximizing the available space.
Use the small variation if getting all the records would cause a performance problem.
Behavior
In the large variation, Pagination can be removed, leaving only the option to adjust the number of visible rows. This can be useful in cases where the number of records is limited, such as a list of items in Jasmin invoices, with a limit of 50 records.
In this variation, default values can be set depending on the specific use case. For example, in invoices, the default display might show a table with five records, which can then gradually increase. This selection will be handled through a select box in the single selection variation, offering options such as five, 10, 20 and 50 visible rows. In scenarios where tables contain more important data, the base value should be set at 10 and incremented up to 100. This approach provides flexibility in data visualization, allowing the use of small and large datasets while maintaining usability and clarity.
Dos & Dont’s
Case Studies
Understanding the Disabled State
Release v1.3
