# Pagination
URL: https://pro.rv-grid.com/api/pagination/
Source: src/content/docs/api/pagination.md
## Module Extensions

### `HTMLRevoGridElementEventMap` (Extended from `global`)

```ts
interface HTMLRevoGridElementEventMap {
  [PAGE_CHANGE_EVENT]: PageChangeEvent
}
```

---

### `HTMLRevoGridElement` (Extended from `@revolist/revogrid`)

```ts
interface HTMLRevoGridElement {
  /**
       * Direct pagination configuration.
       */
      pagination?: Partial<PaginationFullConfig>
}
```

---

### `AdditionalData` (Extended from `@revolist/revogrid`)

```ts
interface AdditionalData {
  /**
       * @deprecated Use `grid.pagination` instead.
       */
      pagination?: Partial<PaginationFullConfig>
}
```

## Plugin API

### `PaginationPlugin`

#### Dependencies

- **Optional** `sorting-capable-plugin`: Integrates with a plugin exposing sorting state for remote pagination sorting.
- **Event integration** `beforefilterapply`, `beforesortingapply`, `beforesourcesortingapply`: Integrates with filter events to forward remote filter state to loadData.

```ts
class PaginationPlugin {
  setConfig(config: Partial<PaginationConfig & PaginationPanelConfig> | undefined);

  setPage(page: number, emitChange = true);
}
```

---

### `PaginationLoadDataResult`

```ts
interface PaginationLoadDataResult {
  data: T[];
  count?: number;
  total?: number
}
```

---

### `PaginationLoadData`

```ts
export type PaginationLoadData<T = any> = (
  skip: number,
  take: number,
  order?: SortingOrder,
  filter?: Record<ColumnProp, FilterCollectionItem>,
) => Promise<T[] | PaginationLoadDataResult<T>>;
```

---

### `PaginationConfig`

```ts
export type PaginationConfig = {
  itemsPerPage: number;
  initialPage: number;
  total: number;
  loadData?: PaginationLoadData;
};
```

---

### `PaginationLocales`

```ts
export type PaginationLocales = {
  previous?: string;
  next?: string;
  first?: string;
  last?: string;
  page?: string;
  of?: string;
  items?: string;
};
```

---

### `PaginationPanelConfig`

```ts
export type PaginationPanelConfig = {
  buttonCount?: number;
  info?: boolean;
  totalInfo?: boolean;
  pageSizes?: boolean | number[];
  position?: 'top' | 'bottom';
  navigation?: boolean;
  locales?: PaginationLocales;
};
```

---

### `PaginationFullConfig` (Extended from `index.ts`)

```ts
export type PaginationFullConfig = PaginationConfig & PaginationPanelConfig;
```

---

### `PageChangeEvent`

```ts
export type PageChangeEvent = {
  skip: number;
};
```

---

### `PaginationPanel`

The PaginationPanel class provides a UI component for navigating through data pages
in a RevoGrid instance. It generates a set of buttons and a select dropdown for
page navigation, allowing users to efficiently traverse large datasets.

**Key Features**:
- Supports customizable navigation with first, previous, next, and last buttons.
- Displays current page information and total number of pages.
- Configurable through `PaginationConfig` and `PaginationPanelConfig` for flexible
  pagination behavior.
- Localizable UI elements with default texts like 'Page', 'of', 'items', etc., which
  can be overridden through the `locales` property.
- Automatically updates the pagination panel on configuration changes, ensuring
  consistency with the dataset size and user preferences.

**Usage**:
- Instantiate the PaginationPanel by providing a configuration object and a callback
  for page changes. Integrate it into the RevoGrid by rendering it in the grid's
  additional nodes.

### Example
```typescript
const paginationConfig: PaginationConfig = {
  itemsPerPage: 10,
  initialPage: 0,
  total: 100,
};
const onPageChange = (page: number) => {
  console.log(`Page changed to: ${page}`);
};
const paginationPanel = new PaginationPanel(paginationConfig, onPageChange);

// Render method can be called to integrate into the UI
const panelNode = paginationPanel.render();
```

By integrating the PaginationPanel, RevoGrid users can enhance their data navigation
capabilities, offering an intuitive and responsive interface for interacting with
paginated datasets.

```ts
class PaginationPanel {
  setRefresh(refresh?: () => void);

  setPage(page: number, emitChange = true);

  render();

  update(config: Config);
}
```
