# 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](/overview.md#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](/overview.md#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](/fundamentals/grid-structure/paginator.md#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`](/reference/dkgrid-api/dkgridpagination.md) 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`](/reference/dkgrid-api/dkgridpagination.md#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 %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.dikesoft.com/rows/row-pagination.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.