Hierarchical Grid Paging Functionality

Angular pagination in the Hierarchical Grid is configurable via the paging and perPage inputs. As in any Angular Material table, the pagination in Hierarchical 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 Hierarchical Grid to enable paging:

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

Templating

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

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

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

Paging can also be done programmatically through the Hierarchical 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.hierarchicalGrid.paginate(5);

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

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

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

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

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

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

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.
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"
            [selectOptions]="selectOptions" [displayDensity]="grid.displayDensity">
    </igx-paginator>
</ng-template>

Demo


Remote Paging

The Hierarchical Grid supports remote paging, which is demonstrated in the Hierarchical Grid Remote Data Operations topic.

Localization

With only a few lines of code you can easily localize all strings part of the Paging component. In order to localize a given Paging instance use the input property resourceStrings. You can use this

Step 1 - Import IPaginatorResourceStrings interface and changei18n function:

import { IPaginatorResourceStrings, changei18n } from "igniteui-angular";

Step 2 - Define the Paging resource strings:

private paginatorResourceStrings: IPaginatorResourceStrings = {
    igx_paginator_label: "Records per page:",
    igx_paginator_first_page_button_text: "Custom first page text",
    igx_paginator_last_page_button_text: "Custom last page text",
    igx_paginator_next_page_button_text: "Custom next page text",
    igx_paginator_previous_page_button_text: "Custom previous page text",
    igx_paginator_pager_text: "out of"
};

Step 3 - Pass the object to the changei18n function as a parameter in order to change the global i18n for the component on app.module level. This will change the resource string of all Paging components part of your application:

public ngOnInit(): void {
    changei18n(this.paginatorResourceStrings as any);
}

In order to change the resource string to a specific Paging component, you can use a @ViewChild and set the desired resourceStrings within a requestAnimationFrame method with a callback, that will be invoked before the page repaint. Setting a newly instantiated object to the resourceStrings property will localize only that given component's instance.

@ViewChild("paginator", { read: IgxPaginatorComponent, static: false }) public paginator: IgxPaginatorComponent;
...

public ngOnInit(): void {
    requestAnimationFrame(() => {
        this.paginator.resourceStrings = this.paginatorResourceStrings;
    });
}

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.