Premium

Angular Pivot 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. Pivot 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 Pivot Grid supports template for custom pages.

Angular Pagination Example

The following example represents Pivot 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 Pivot 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 Pivot Grid to enable paging:

<igx-pivot-grid #pivotGrid [data]="data" [height]="'500px'" [width]="'100%'">
    <igx-paginator [perPage]="10">
    </igx-paginator>
</igx-pivot-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>

Usage

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 Pivot Grid Remote Data Operations topic.

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 $foreground, $background, $border-color and $accent-color parameters.

$paginator-theme: paginator-theme(
  $foreground: #ff570f,
  $background: #130425FF,
  $border-color: #ff570f,
  $accent-color: #ff570f,
);

After that we can include the newly created theme.

igx-paginator {
  @include tokens($paginator-theme);
}

API References

Additional Resources

Our community is active and always welcoming to new ideas.