Paginator

Since the DikeGrid structure definition uses the CSS Grid Layout specification, as a convention, the paginator is also called the Pagination Row.

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.

grid-structure.component.html

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

Open the Floating Configuration Panel, go to the Pagination group, and enable pagination.

Floating Configuration Panel - Pagination

The previous configuration generates the following output:

Pagination Row

The DikeGrid always shows the Pagination Row at the bottom of the content rows.

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 paginationRowHeight.

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

grid-structure.component.html

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

Now, open the Floating Configuration Panel, go to the Pagination group, and type 100 in the Pagination Row Height textbox.

Changing the Pagination Row height

You can also change the Pagination Row height by providing an Injection Token called PAGINATION_ROW_HEIGHT.