Grid Paging Functionality

Angular pagination in the Grid is configurable via the paging and perPage inputs. As in any Angular Material table, the pagination in Grid supports template for custom pages.

Demo


The paging input is a Boolean property that controls whether the feature is enabled, and the perPage property controls the visible records per page. Let’s update our Grid to enable paging:

<igx-grid #grid [data]="data" [paging]="true" [perPage]="10" height="500px" width="100%" displayDensity="cosy">
</igx-grid>

Pagination Templating

The paging area supports templating by the user, if a template reference is passed to the Grid during initialization. The example below is a template where the pagination is controlled through an input.

<ng-template #myTemplate let-grid>
    Current page: {{ grid.page }}
    <input type="number" [(ngModel)]="grid.page" />
    Total pages: {{ grid.totalPages }}
</ng-template>

<igx-grid [paging]="true" [paginationTemplate]="myTemplate">
    ...
</igx-grid>

Paging can also be done programmatically through the Grid API, using the paginate, previousPage, nextPage methods and the inputs page, perPage and totalRecords. Where page allows you to set the current page, perPage - the number of items that are displayed at one page and totalRecords - the number of the records that are in the grid. TotalRecords property is useful when you have paging with remote data and you want to alter the page count based on total remote records. Keep in mind that If you are using paging and all the data is passed to the grid, the value of totalRecords property will be set by default to the length of the provided data source. If totalRecords is set, it will take precedence over the default length based on the data source."

// Go to page 6
this.grid.paginate(5);

// Go to previous/next page
this.grid.previousPage();
this.grid.nextPage();

// Check for first/last page
this.grid.isFirstPage;
this.grid.isLastPage;

// Get the number of pages
this.grid.totalPages;

// Change the number of records per page
this.grid.perPage = 25;

// Enables/disables paging
this.grid.paging = false;

//  Set the total number of records that are in the grid. Default value is the length of the provided data.
this.grid.totalRecords = 30;

Paging with Group By

Integration between Paging and Group By is described in the Group By topic.

Paginator Component

A new component igx-paginator is introduced with 8.1.0 release. This component replaces the current pager and can be used as a standalone component as well. The igx-paginator exposes a couple of input and output properties that enable further customization of the paging.

Input Description
displayDensity Sets the display density of the paginator.
dropdownEnabled Sets the enabled state to the drop-down.
dropdownHidden Sets the hidden state to the drop-down.
page Sets the current page.
pagerEnabled Sets the enabled state to the pager.
pagerHidden Sets the hidden state to the pager.
perPage Sets the number of visible items per page.
selectLabel Sets the text before the select component. Default is 'Items per page'
selectOptions Sets custom options for items per page.
totalRecords Sets the total records count.
resourceStrings Sets the resource strings. By default it uses EN resource strings.
Output Description
pageChange the event is emitted when the current page is changed.
perPageChange the event is emitted when the number items per page is changed.

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" [paging]="true" [perPage]="10" [paginationTemplate]="pager">
...
</igx-grid>

<ng-template #pager>
    <igx-paginator #paginator [(page)]="grid.page" [totalRecords]="grid.totalRecords" [(perPage)]="grid.perPage"
            [dropdownHidden]="isDropdownHidden" [pagerHidden]="isPagerHidden" [selectLabel]="'Records per page:'"
            [selectOptions]="selectOptions" [displayDensity]="grid.displayDensity">
    </igx-paginator>
</ng-template>

Demo


Remote Paging

The Grid supports remote paging, which is demonstrated in 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 Paging template 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:

// custom-grid-paging-style.component.scss
@import '~igniteui-angular/lib/core/styles/themes/index';

Following the simplest approach, we create a new theme that extends the igx-grid-paginator-theme and accepts the $text-color, $background-color and the $border-color parameters.

$dark-grid-paginator: igx-grid-paginator-theme(
    $text-color: #F4D45C,
    $background-color: #575757,
    $border-color: #292826
);

As seen, the igx-grid-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 button theme:

$dark-button: igx-button-theme(
    $icon-color: #FFCD0F,
    $icon-hover-color: #292826,
    $icon-hover-background: #FFCD0F,
    $icon-focus-color: #292826,
    $icon-focus-background: #FFCD0F,
    $disabled-color: #16130C
);

In this example we only changed the icon color and background and the button disabled color, but the the igx-button-theme provides way more parameters to control the button style.

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

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

We scope the igx-button mixin within .igx-grid-paginator__pager, so that only the paginator buttons would be styled. Otherwise other 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 {
        @include igx-grid-paginator($dark-grid-paginator);
        .igx-grid-paginator__pager {
            @include igx-button($dark-button);
        }
    }
}

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: igx-palette($primary: $black-color, $secondary: $yellow-color);

And then with igx-color we can easily retrieve color from the pallette.

$dark-grid-paginator: igx-grid-paginator-theme(
    $palette: $dark-palette,
    $text-color: igx-color($dark-palette, "secondary", 400),
    $background-color: igx-color($dark-palette, "primary", 200),
    $border-color:  igx-color($dark-palette, "primary", 500)
);

$dark-button: igx-button-theme(
    $palette: $dark-palette,
    $icon-color: igx-color($dark-palette, "secondary", 700),
    $icon-hover-color: igx-color($dark-palette, "primary", 500),
    $icon-hover-background: igx-color($dark-palette, "secondary", 500),
    $icon-focus-color: igx-color($dark-palette, "primary", 500),
    $icon-focus-background: igx-color($dark-palette, "secondary", 500),
    $disabled-color: igx-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 - dark-grid-pagination and dark-button schemas:

// Extending the dark paginator schema
$dark-grid-paginator-schema: extend($_dark-grid-pagination,
        (
            text-color:(
                igx-color: ("secondary", 400)
            ),
            background-color:(
                igx-color: ("primary", 200)
            ),
            border-color:(
                igx-color:( "primary", 500)
            )
        )
);
// Extending the dark button schema
$dark-button-schema: extend($_dark-button,
        (
            icon-color:(
                igx-color:("secondary", 700)
            ),
            icon-hover-color:(
                igx-color:("primary", 500)
            ),
            icon-hover-background:(
                igx-color:("secondary", 500)
            ),
            icon-focus-color:(
                igx-color:("primary", 500)
            ),
            icon-focus-background:(
                igx-color:("secondary", 500)
            ),
            disabled-color:(
                igx-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-grid-paginator: $dark-grid-paginator-schema,
    igx-button: $dark-button-schema
));

// Defining grid-paginator-theme with the global dark schema
$dark-grid-paginator: igx-grid-paginator-theme(
  $palette: $dark-palette,
  $schema: $custom-dark-schema
);

// Defining button-theme with the global dark schema
$dark-button: igx-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.

Demo


API References

Additional Resources

Our community is active and always welcoming to new ideas.