Row Pagination

This section describes how to display a fixed amount of rows, in other words, page by page.

Live example

Row Pagination live example.

Allowing pagination

To allow the user to paginate the DikeGrid rows, you must provide an input property named allowPagination at the grid scope.

row-pagination.component.html

<dike-grid id="grid-row-pagination" height="700px" #grid="dkgGrid"
    [allowPagination]="gridProperties.allowPagination"
    [pageSize]="gridProperties.pageSize">
</dike-grid>

You can change the value of the allowPagination property at runtime.

Open the Floating Configuration Panel and click on the Allow Pagination checkbox.

Floating Configuration Panel - Pagination

After enabling the pagination, you will see the DikeGrid paginator at the bottom of the content rows.

Enabling Row Pagination

Page size

By default, the page size is 50. You can change this value by providing an input property named pageSize.

As you can see in the previous code snippet, we have bound the pageSize property to the gridProperties object. Therefore, you can open the Floating Configuration Panel and change the value for the page size.

Pagination Row

Since the DikeGrid structure uses the CSS Grid Layout specification, the paginator is called Pagination Row. Indeed, the Pagination Row is the template-row definition where the paginator lives.

You can change the height of the Pagination Row. For further details, see the Grid Structure - Paginator section.

For this section, we have bound the input property paginationRowHeight to the related property from the gridProperties object.

row-pagination.component.html

<dike-grid id="grid-row-pagination" height="600px" #grid="dkgGrid"
    [paginationRowHeight]="gridProperties.paginationHeight">
</dike-grid>

DikeGrid Pagination API

The DikeGrid internally uses the MatPaginator component. Therefore, the DikeGrid definition wraps the MatPaginator instance.

Before accessing and using the pagination API, you must retrieve the related DikeGrid instance by querying the component's view.

row-pagination.component.html

<dike-grid id="grid-row-pagination" height="600px" #grid="dkgGrid">
</dike-grid>

row-pagination.component.ts

@Component({
  selector: 'row-pagination',
  templateUrl: './row-pagination.component.html',
  styleUrls: ['./row-pagination.component.scss'],

  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class RowPaginationComponent implements OnInit, OnDestroy {
  // Retrieve the DikeGridComponent<T> instance from the view:
  @ViewChild('grid') dikeGrid: DikeGridComponent<Employee>;
  // ...
}

The pagination API is an instance of type DikeGridPagination under the DikeGridComponent through the read-only property named pagination.

The DikeGrid pagination API exposes the MatPaginator instance through a read-only property named matPaginator.

Retrieving and using the DikeGrid pagination API helps in defining a custom Datasource.

Pagination events

Every time the user navigates through the available pages, the DikeGrid instance emits a page event.

Since you can allow the pagination at runtime, the pagination API exposes an event that fires the MatPaginator instance.

The pagination API exposes the following events:

Event	Description
pageChange	This event fires every time the user navigates through the available pages.
paginatorChange	This event fires when the user allows or disallows the DikeGrid's pagination.

We are listening to both events:

row-pagination.component.html

<dike-grid id="grid-row-pagination" height="600px" #grid="dkgGrid"
    (pageChange)="onPageChange($event)"
    (paginatorChange)="onPaginatorChange($event)">
</dike-grid>

row-pagination.component.ts

onPageChange(page: PageEvent): void {
  console.log('Page change: ', page);
}

onPaginatorChange(paginator: MatPaginator): void {
  console.log('Paginator change: ', paginator);
}
  

For the pageChange event, the emitted object is the same as the MatPaginator sends. For further details, see the Angular Material official docs.

You can also listen to the pagination events from the DikeGridPagination instance.

Open the dev console to see the output of the pagination events.

Summary

To perform the pagination operation, you must allow it by providing an input property named allowPagination. The DikeGrid definition internally uses the MatPaginator component. Therefore, every DikeGrid instance exposes its corresponding MatPaginator instance through the pagination API.

Complete code for this section

row-pagination.component.html

<dike-grid id="grid-row-pagination" height="600px" #grid="dkgGrid"
    [displayRowId]="gridProperties.displayRowId"
    [gridElevation]="gridProperties.matElevation"
    [gridElevationValue]="gridProperties.elevationValue"
    [striped]="gridProperties.stripeRows"
    [verticalRowLines]="gridProperties.verticalRowLines"
    
    (pageChange)="onPageChange($event)"
    (paginatorChange)="onPaginatorChange($event)"
    
    [allowPagination]="gridProperties.allowPagination"
    [pageSize]="gridProperties.pageSize"
    [paginationRowHeight]="gridProperties.paginationHeight"
    
    [datasource]="dkgDataSource">
    
    <dike-grid-column
        fieldName="employeeId"
        headerText="Employee Id"
        dataType="Text"
        width="350">
    </dike-grid-column>

    <dike-grid-column
        fieldName="country"
        headerText="Country"
        dataType="Text"
        width="250">
    </dike-grid-column>

    <dike-grid-column
        fieldName="completeNameGroup"
        headerText="Complete Name">

        <dike-grid-column
            fieldName="firstName"
            headerText="Name"
            dataType="Text"
            width="150">
        </dike-grid-column>

        <dike-grid-column
            fieldName="lastName"
            headerText="Surname"
            dataType="Text"
            width="150">
        </dike-grid-column>

    </dike-grid-column>

    <dike-grid-column
        fieldName="gender"
        headerText="Gender"
        dataType="Binary"
        width="130">
    </dike-grid-column>

    <dike-grid-column
        fieldName="age"
        headerText="Age"
        dataType="Numeric"
        contentAlign="center"
        width="100">
    </dike-grid-column>

    <dike-grid-column
        fieldName="email"
        headerText="Email"
        dataType="Text"
        width="300">
    </dike-grid-column>

    <dike-grid-column
        fieldName="hireDate"
        headerText="Hire Date"
        dataType="Date"
        width="150">
    </dike-grid-column>

</dike-grid>

row-pagination.component.ts

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { MatPaginator, PageEvent } from '@angular/material/paginator';

import { Subscription } from 'rxjs';

import { DikeGridComponent, DikeGridDataSourceInput } from '@dikesoft/angular-data-grid';
import { DikeGridProperties } from 'app/core/config/dike-grid.properties';
import { Employee } from 'app/mock-api/common/employees/data.model';

import { DikeGridConfig } from 'app/services/dike-grid.config.service';
import { SampleData } from 'app/services/sample-data.service';

@Component({
  selector: 'row-pagination',
  templateUrl: './row-pagination.component.html',
  styleUrls: ['./row-pagination.component.scss'],

  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class RowPaginationComponent implements OnInit, OnDestroy {
  // Retrieve the DikeGridComponent<T> instance from the view:
  @ViewChild('grid') dikeGrid: DikeGridComponent<Employee>;

  dkgDataSource: DikeGridDataSourceInput<Employee>;
  gridProperties: DikeGridProperties;

  private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;

  constructor(
    private cdr: ChangeDetectorRef,
    private gridConfig: DikeGridConfig,
    private sampleData: SampleData) { }

  ngOnInit(): void {
    this.dkgDataSource = this.sampleData.getEmployees(10000);
    // Listening to any config property change:
    this.setChangeGridPropertiesSubscription();
  }

  ngOnDestroy(): void {
    this.changeGridPropertiesSubscription.unsubscribe();
  }

  onPageChange(page: PageEvent): void {
    console.log('Page change: ', page);
  }
  
  onPaginatorChange(paginator: MatPaginator): void {
    console.log('Paginator change: ', paginator);
  }

  private setChangeGridPropertiesSubscription(): void {
    this.changeGridPropertiesSubscription.unsubscribe();
    this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
      this.gridProperties = props;
      this.cdr.markForCheck();
    });
  }
}