# Pagination

#### Introduction

The project has a built-in Pagination Component but in some cases, users might want to provide their own Custom Pagination Component.

#### Demo

[Demo Page](https://ghiscoding.github.io/slickgrid-universal/#/example30) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/demos/vanilla/src/examples/example30.ts)

**Custom Pagination**

When providing a custom pagination component as a `customPaginationComponent`, that class will be instantiated instead of the regular `SlickPaginationComponent`.

> **Note** Your Custom Pagination must `implements BasePaginationComponent` so that the internal instantiation work as intended.

**Custom Pagination Component**

Create a Custom Pagination Component that requires the following functions, your class will be instantiated and the `init()` will contain all the references to the Services. The `render()` will also be called with the grid container DOM element which is important to either prepend or append your Custom Pagination to the grid.

```ts
import type { BasePaginationComponent, PaginationService, PubSubService, SlickGrid } from '@slickgrid-universal/common';

export class CustomPager implements BasePaginationComponent {
  /** initialize the custom pagination class */
  init(grid: SlickGrid, paginationService: PaginationService, pubSubService: PubSubService, translaterService?: TranslaterService) {}

  /** dipose (aka destroy) to execute when disposing of the pagination (that is when destroying the grid) */
  dispose() {}

  /** render the custom pagination */
  render(containerElm: HTMLElement) {}
}
```

**Component**

You then need to reference your Custom Pagination class to your grid options.

```ts
import { CustomPager } from './custom-pager';

export class GridBasicComponent {
  columns: Column[];
  gridOptions: GridOption;
  dataset: any[];

  mount(): void {
    // your columns definition
    this.columns = [];

    this.gridOptions = {
      // enable pagination and provide a `customPaginationComponent`
      enablePagination: true,
      customPaginationComponent: CustomPager,

      // provide any of the regular pagination options like usual
      pagination: {
        pageSize: this.pageSize
      },
    }
  }
}
```


---

# 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://ghiscoding.gitbook.io/slickgrid-universal/grid-functionalities/pagination.md?ask=<question>
```

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.