Angular Grid Pagination
Pagination is used to split a large set of data into a sequence of pages that have similar content. Angular table pagination improves user experience and data interaction. Grid pagination is configurable via a separate component projected in the grid tree by defining a igx-paginator
tag, similar to adding of a column. As in any Angular Table, the pagination in the Grid supports template for custom pages.
Angular Pagination Example
The following example represents Grid pagination and exposes the options usage of items per page
and how paging can be enabled. The user can also quickly navigate through the Grid pages via "Go to last page" and "Go to first page" buttons.
Adding a igx-paginator
component will control whether the feature is present, you can enable/disable it by using a simple *ngIf
with a toggle property. The perPage
input controls the visible records per page. Let’s update our Grid to enable paging:
<igx-grid #grid [data]="data" [height]="'500px'" [width]="'100%'">
<igx-paginator [perPage]="10">
</igx-paginator>
</igx-grid>
Example:
<igx-paginator #paginator [totalRecords]="20">
<igx-paginator-content>
<div id="numberPager" style="justify-content: center;">
<button [disabled]="paginator.isFirstPage" (click)="paginator.previousPage()" igxButton="flat">
PREV
</button>
<span>
Page {{paginator.page}} of {{paginator.totalPages}}
</span>
<button [disabled]="paginator.isLastPage" (click)="paginator.nextPage()" igxButton="flat">
NEXT
</button>
</div>
</igx-paginator-content>
</igx-paginator>
Paging with Group By
Group rows participate in the paging process along with data rows. They count towards the page size for each page. Collapsed rows are not included in the paging process. Integration between Paging and Group By is described in the Group By topic.
Usage
The igx-paginator
component is used along with the igx-grid
component in the example below, but you can use it with any other component in case paging functionality is needed.
<igx-grid #grid [data]="data">
<igx-paginator #paginator [(page)]="grid.page" [totalRecords]="grid.totalRecords" [(perPage)]="10"
[selectOptions]="selectOptions">
</igx-paginator>
</igx-grid>
Paginator Component Demo
Remote Paging
Remote paging can be achieved by declaring a service, responsible for data fetching and a component, which will be responsible for the Grid construction and data subscription. For more detailed information, check the Grid Remote Data Operations
topic.
Remote Paging with Custom Template
In some cases you may want to define your own paging behavior and this is when we can take advantage of the igx-paginator-content
and add our custom logic along with it. This section explains how we are going to extend the Remote Paging example in order to demonstrate this.
Pagination Styling in Angular
To get started with styling the paginator, we need to import the index
file, where all the theme functions and component mixins live:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Following the simplest approach, we create a new theme that extends the paginator-theme
and accepts the $text-color
, $background-color
and the $border-color
parameters.
$dark-paginator: paginator-theme(
$text-color: #F4D45C,
$background-color: #575757,
$border-color: #292826
);
As seen, the paginator-theme
only controls colors for the paging container, but does not affect the buttons in the pager UI. To style those buttons, let's create a new icon button theme:
$dark-button: icon-button-theme(
$foreground: #FFCD0F,
$hover-foreground: #292826,
$hover-background: #FFCD0F,
$focus-foreground: #292826,
$focus-background: #FFCD0F,
$disabled-foreground: #16130C
);
The last step is to include the component mixins, each with its respective theme:
@include grid-paginator($dark-grid-paginator);
.igx-grid-paginator__pager {
@include icon-button($dark-button);
}
Note
We scope the icon-button mixin within .igx-paginator__pager
, so that only the paginator buttons would be styled. Otherwise other icon buttons in the grid would be affected too.
Note
If the component is using an Emulated
ViewEncapsulation, it is necessary to penetrate
this encapsulation using ::ng-deep
:
:host {
::ng-deep {
igx-paginator {
@include css-vars($dark-button);
@include css-vars($dark-paginator);
}
}
}
Defining a Color Palette
Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the igx-palette
and igx-color
functions.
igx-palette
generates a color palette based on the primary and secondary colors that are passed:
$yellow-color: #F9D342;
$black-color: #292826;
$dark-palette: palette($primary: $black-color, $secondary: $yellow-color);
And then with igx-color
we can easily retrieve color from the pallette.
$dark-paginator: paginator-theme(
$palette: $dark-palette,
$text-color: color($dark-palette, "secondary", 400),
$background-color: color($dark-palette, "primary", 200),
$border-color: color($dark-palette, "primary", 500)
);
$dark-button: icon-button-theme(
$palette: $dark-palette,
$foregroundr: color($dark-palette, "secondary", 700),
$hover-foreground: color($dark-palette, "primary", 500),
$hover-background: color($dark-palette, "secondary", 500),
$focus-foreground: color($dark-palette, "primary", 500),
$focus-background: color($dark-palette, "secondary", 500),
$disabled-foreground: color($dark-palette, "primary", 700)
);
Note
The igx-color
and igx-palette
are powerful functions for generating and retrieving colors. Please refer to Palettes
topic for detailed guidance on how to use them.
Using Schemas
Going further with the theming engine, you can build a robust and flexible structure that benefits from schemas. A schema is a recipe of a theme.
Extend one of the two predefined schemas, that are provided for every component, in this case - $base-dark-pagination
and $material-flat-icon-button-dark
schemas:
// Extending the dark paginator schema
$dark-paginator-schema: extend($base-dark-pagination,
(
text-color:(
color: ("secondary", 400)
),
background-color:(
color: ("primary", 200)
),
border-color:(
color:( "primary", 500)
)
)
);
// Extending the dark icon button schema
$dark-button-schema: extend($material-flat-icon-button-dark,
(
foreground:(
color:("secondary", 700)
),
hover-foreground:(
color:("primary", 500)
),
hover-background:(
color:("secondary", 500)
),
focus-foreground:(
color:("primary", 500)
),
focus-background:(
color:("secondary", 500)
),
disabled-foreground:(
color:("primary", 700)
)
)
);
In order to apply our custom schemas we have to extend one of the globals (light
or dark
), which is basically pointing out the components with a custom schema, and after that add it to the respective component themes:
// Extending the global dark-schema
$custom-dark-schema: extend($dark-schema,(
igx-paginator: $dark-paginator-schema,
igx-icon-button: $dark-button-schema
));
// Definingpaginator-theme with the global dark schema
$dark-paginator: paginator-theme(
$palette: $dark-palette,
$schema: $custom-dark-schema
);
// Defining icon-button-theme with the global dark schema
$dark-button: icon-button-theme(
$palette: $dark-palette,
$schema: $custom-dark-schema
);
Don't forget to include the themes in the same way as it was demonstrated above.
Pagination Style Example
API References
Additional Resources
- Grid overview
- Paginator
- Virtualization and Performance
- Filtering
- Sorting
- Summaries
- Column Moving
- Column Pinning
- Column Resizing
- Selection