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.

    Styling

    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: #d0ab23;,
  $background-color: #231c2c,
  $border-color: #d0ab23;
);

    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: #d0ab23,
  $hover-foreground: #231c2c,
  $hover-background: #d0ab23,
  $focus-foreground: #231c2c,
  $focus-background: #d0ab23,
  $disabled-foreground: #9b7829
);
    Note

    Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the palette and color functions. Please refer to Palettes topic for detailed guidance on how to use them.

    The last step is to include the component mixins, each with its respective theme:

    @include css-vars($dark-paginator);

.igx-grid-paginator__pager {
  @include css-vars($dark-button);
}
    Note

    We include the created icon-button-theme 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 in order to style the components which are inside the paging container, like the button:

    @include css-vars($dark-paginator);

:host {
  igx-paginator {
    ::ng-deep {
      @include css-vars($dark-button);
    }
  }
}

    Pagination Style Example

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.