# Paginator

## Pagination Row

The Pagination Row shows the paginator when you enable pagination in the DikeGrid. Bind the related property from the `gridProperties` object to allow pagination.

{% code title="grid-structure.component.html" %}

```markup
<dike-grid id="grid-structure"
    [allowPagination]="gridProperties.allowPagination">
</dike-grid>
```

{% endcode %}

Open the [Floating Configuration Panel](https://docs.dikesoft.com/overview#floating-configuration-panel), go to the **Pagination** group, and enable pagination.&#x20;

![Floating Configuration Panel - Pagination](https://3888584995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpDxfe6pgRLqBLMQgZ0kG%2Fuploads%2F4rVJTuGq2Tse1P1FPZWE%2Fpagination-panel-conf.png?alt=media\&token=47cd5555-0451-4a04-95c1-b5b28a3ec573)

The previous configuration generates the following output:

![Pagination Row](https://3888584995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpDxfe6pgRLqBLMQgZ0kG%2Fuploads%2Ft54Botn1Fkojyk7LT8U3%2Fgrid-structure-paginator.png?alt=media\&token=ecfbba86-7455-48bc-a277-03164983dab3)

{% hint style="info" %}
The DikeGrid always shows the Pagination Row at the ***bottom*** of the content rows.
{% endhint %}

### Changing the Pagination Row height

The Pagination Row is **64 pixels** in height. Nevertheless, you can change this height by providing an input property called <mark style="color:orange;">`paginationRowHeight`</mark>.

Let us bind the corresponding property from the `gridProperties` object to change the Pagination Row height.

{% code title="grid-structure.component.html" %}

```markup
<dike-grid id="grid-structure"
    [allowPagination]="gridProperties.allowPagination"
    [paginationRowHeight]="gridProperties.paginationHeight">
</dike-grid>
```

{% endcode %}

Now, open the [Floating Configuration Panel](https://docs.dikesoft.com/overview#floating-configuration-panel), go to the **Pagination** group, and type 100 in the **Pagination Row Height** textbox.

![Changing the Pagination Row height](https://3888584995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpDxfe6pgRLqBLMQgZ0kG%2Fuploads%2FAB3fKxfqcPqRH0sp4dB5%2Fgrid-structure-pagination-row-change.png?alt=media\&token=8c2280e9-819e-4411-ad10-2be3b83f9679)

{% hint style="success" %}
You can also change the Pagination Row height by providing an Injection Token called <mark style="color:blue;">`PAGINATION_ROW_HEIGHT`</mark>.
{% endhint %}