# Row Pagination
## Live example
{% hint style="success" %}
[Row Pagination](https://demos.dikesoft.com/dk-grid/row/pagination) live example.
{% endhint %}
## Allowing pagination
To allow the user to paginate the DikeGrid rows, you must provide an input property named `allowPagination` at the grid scope.
{% code title="row-pagination.component.html" %}
```markup
```
{% endcode %}
{% hint style="info" %}
You can change the value of the `allowPagination` property at **runtime**.
{% endhint %}
Open the [Floating Configuration Panel](https://docs.dikesoft.com/overview#floating-configuration-panel) and click on the **Allow Pagination** checkbox.
After enabling the pagination, you will see the DikeGrid **paginator** at the bottom of the content rows.
## 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](https://docs.dikesoft.com/overview#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.
{% hint style="info" %}
You can change the **height** of the **Pagination Row**. For further details, see the [Grid Structure - Paginator](https://docs.dikesoft.com/fundamentals/grid-structure/paginator#changing-the-pagination-row-height) section.
{% endhint %}
For this section, we have bound the input property `paginationRowHeight` to the related property from the `gridProperties` object.
{% code title="row-pagination.component.html" %}
```markup
```
{% endcode %}
## 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.
{% tabs %}
{% tab title="row-pagination.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-pagination.component.ts" %}
```typescript
@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 instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
// ...
}
```
{% endtab %}
{% endtabs %}
{% hint style="success" %}
The **pagination API** is an instance of type [`DikeGridPagination`](https://docs.dikesoft.com/reference/dkgrid-api/dkgridpagination) under the `DikeGridComponent` through the **read-only** property named `pagination`.
{% endhint %}
The DikeGrid **pagination API** exposes the **MatPaginator** instance through a **read-only** property named **matPaginator**.
{% hint style="info" %}
Retrieving and using the DikeGrid **pagination API** helps in defining a **custom Datasource**.
{% endhint %}
## 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:
{% tabs %}
{% tab title="row-pagination.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-pagination.component.ts" %}
```typescript
onPageChange(page: PageEvent): void {
console.log('Page change: ', page);
}
onPaginatorChange(paginator: MatPaginator): void {
console.log('Paginator change: ', paginator);
}
```
{% endtab %}
{% endtabs %}
For the `pageChange` event, the emitted object is the same as the **MatPaginator** sends. For further details, see the [Angular Material official](https://material.angular.io/components/paginator/api) docs.
{% hint style="success" %}
You can also listen to the pagination events from the [`DikeGridPagination`](https://docs.dikesoft.com/reference/dkgrid-api/dkgridpagination#events) instance.
{% endhint %}
{% hint style="success" %}
Open the **dev console** to see the output of the pagination events.
{% endhint %}
## 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
{% tabs %}
{% tab title="row-pagination.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-pagination.component.ts" %}
```typescript
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 instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
dkgDataSource: DikeGridDataSourceInput;
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();
});
}
}
```
{% endtab %}
{% endtabs %}