-
Notifications
You must be signed in to change notification settings - Fork 4
Paginator Specification Draft
Team Name: Design and Web Development
Developer Name:
Designer Name:
- Peer Developer Name | Date:
- Design Manager Name | Date:
- Radoslav Mirchev| Date:
- Radoslav Karaivanov | Date:
Version | Users | Date | Notes |
---|---|---|---|
1 | Silvia Ivanova | 16-Sep-2022 | Initial Draft |
The igc-paginator
component is used to divide a set of data into a number of similar pages.
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.
- 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
- 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
- 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.
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.
<igc-paginator perPage="5">
</igc-paginator>
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 |
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 |
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 |
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 |
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 |
-
IgcPageNavComponent
- role="navigation"
- 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.