Paginator Specification

Contents

1. Overview
2. User Stories
3. Functionality
4. ARIA support
5. Test scenarios
6. References
7. Dependencies

Owned by

Team Name: Design and Web Development

Developer Name:

Designer Name:

Requires approval from

• Peer Developer Name | Date:
• Design Manager Name | Date:

Signed off by

• Radoslav Mirchev| Date:
• Radoslav Karaivanov | Date:

Revision History

Version	Users	Date	Notes
1	Silvia Ivanova	16-Sep-2022	Initial Draft

1. Overview

The igc-paginator component is used to divide a set of data into a number of similar pages.

Objectives

The component enables the users to easily navigate through a range of pages. It should display a select with options for defining the number of items shown on each page along with buttons for changing the page.

2. User Stories

Developer Stories

As a developer, I want to

• be able to set the number of visible items per page
• be notified when the number of visible items per page has changed
• be able to navigate through the pages
• be notified when the current page has changed
• be able to enable/disable or hide the select options
• be able to enable/disable or hide the navigation buttons
• be able to set the paginator size
• be able to customize the paginator giving different combinations of colors for background and foreground elements

As an end user, I want to

• be able to see how many records are currently being displayed per page
• be able to select the number of visible items per page
• be able to see on which page I am currently at
• be able to see the total number of pages
• be able to navigate to the first/last page through icon buttons
• be able to navigate to the previous/next page through icon buttons
• be able to change the size of the component
• be able to define a custom content

3. Functionality

• Pagination in Grid

When used inside a Grid component, the paginator should be displayed at the bottom of the grid. If the grid has a summary, the paging row should be placed after the summary. Changing the number of visible grid rows per page may result in a different total number of grid pages. The number of pages depends on the total number of grid rows and the rows displayed per page.

• Pagination in Tree Grid

When the paginator is integrated with a Tree Grid component, the number of displayed items includes all grid rows regardless of their level. If an end user collapse/expands some of the rows that have nested items, that would affect the total number of pages within the grid.

• Pagination in Hierarchical Grid

When the paginator is integrated with a Hierarchical Grid component, each grid has its own paging. If a grid doesn't have any records, the paginator won't be displayed. The paginator component on the top parent level is indicating the number of items only on its level, without including nested items.

3.1. End User Experience

The paginator component should display a select controlling the number of visible items per page along with buttons for navigating through the pages. By default, the select should be positioned on the left end of the paginator row and the buttons should be on the right one.

3.2. Developer Experience

<igc-paginator perPage="5">
</igc-paginator>

3.3. Keyboard Navigation ??

3.4. API

Properties

IgcPaginatorComponent

Name	Description	Type	Default Value	Reflected
perPage	Set the number of visible items per page	number	15	false
totalRecords	Set the total records	number		false
selectOptions	Sets custom options in the select of the paginator	string		false

Methods

IgcPaginatorComponent

Name	Description	Parameters
nextPage	Navigates to the next page if the paginator is not already at the last one
previousPage	Navigates to the previous page if the paginator is not already at the first one
paginate	Navigates to specific page index	index

Events

IgcPaginatorComponent

Name	Description	Cancelable	Parameters
igcPerPageChange	Emitted when the value of the perPage property has changed	false
igcPaging	Emitted before paging is performed	true
igcPagingDone	Emitted after paging is performed	false

Slots

IgcPaginatorComponent

Name	Description
(default)	Renders the paginator's content

IgcPageSizeComponent

Name	Description
(default)	Renders the page size content
label	Renders the page size label

without slots; label should be property

IgcPageNavComponent

Name	Description
(default)	Renders the page navigation content
previous	Renders previous and first page buttons
next	Renders next and last page buttons

CSS Parts

IgcPaginatorComponent

Name	Description
base	The base wrapper of the paginator

IgcPageSizeComponent

Name	Description
base	The base wrapper of the page size

IgcPageNavComponent

Name	Description
base	The base wrapper of the page navigation

4. ARIA Support

• IgcPageNavComponent - role="navigation"

5. Test Scenarios

Automation

• Should initialize the component properly with default property values.
• Should initialize the component properly with passed property values.
• Should set the paginator visible records per page correctly.
• Should set the paginator total records correctly.
• Should set the paginator select options correctly.
• Should display custom content placed between the opening and closing tags of the paginator.
• Should navigate through the pages using navigation buttons.
• Should fire event when the current page has changed.
• Should fire event when the value of the perPage property has changed.

6. References

• https://github.com/IgniteUI/igniteui-angular/wiki/Grid-Paging-Specification

7. Dependencies