---
metaTitle: Pagination component | AwesCode UI
meta:
  - name: description
    content: The <AwPagination /> component is used to render Pagination - UI Vue component for AwesCode UI.
title: Pagination
---

# AwPagination

**Category:** Organism | **Import:** Dynamic

The `AwPagination` component provides pagination controls with page navigation, items per page selection, and keyboard shortcuts. It displays page numbers, previous/next buttons, and item range information.

## Overview

`AwPagination` provides pagination with:
- Page number navigation
- Previous/next buttons
- Items per page selection
- Keyboard shortcuts (Ctrl+Arrow keys)
- Responsive design (mobile/desktop)
- Item range display
- Total items information

## Usage

### Basic Example

```markup
<AwPagination
    :total="100"
    :page="1"
    :limit="10"
    @click:page="handlePageChange"
/>
```

### With Limit Options

```markup
<AwPagination
    :total="100"
    :page="1"
    :limit="10"
    :limits="[10, 25, 50, 100]"
    @click:page="handlePageChange"
/>
```

### With Keyboard Navigation

```markup
<AwPagination
    :total="100"
    :page="1"
    :limit="10"
    arrow-nav
    @click:page="handlePageChange"
/>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| total | Total number of items | `Number` | `true` | - |
| page | Current page number | `Number` | `false` | `1` |
| limit | Items per page | `Number` | `true` | - |
| limits | Available limit options | `Array` | `false` | `null` |
| arrowNav | Enable keyboard navigation (Ctrl+Arrow) | `Boolean` | `false` | `false` |

**Limits Array:**
```javascript
[10, 25, 50, 100]  // Available items per page options
```

### Slots

This component does not have slots.

### Events

| Name | Payload | Description |
|------|---------|-------------|
| click:page | `Number` | Emitted when page is clicked (page number) |

### Config Options

The component uses default configuration from `@AwConfig`. You can override these defaults in your project's `awes.config.js`:

```javascript
export default {
  AwPagination: {
    baseClass: 'aw-pagination'
  }
}
```

## Related Components

- `AwButton` - Button component used for navigation
- `AwButtonNav` - Navigation button component
- `AwDropdown` - Dropdown for limit selection
- `AwIconSystemMono` - Icon components

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Component only renders if `pagesTotal > 1`
- Mobile view shows simplified navigation (prev/next with page count)
- Desktop view shows full page number buttons
- Keyboard shortcuts: `Ctrl+Left` (previous), `Ctrl+Right` (next)
- Item range shows "Show X-Y of Z" on desktop
- Page buttons show ellipsis for large page counts
- Limit dropdown appears on desktop when `limits` prop is provided
- Current page is highlighted in page buttons
- Previous/next buttons are disabled at boundaries
- Component calculates total pages from `total` and `limit`