---
url: "https://vueda.dev/v3/reference/api/vue/PaginationFooter.md"
title: "PaginationFooter"
---

# PaginationFooter

## Overview

Pagination footer for data views. Composes the `PaginationBar` substrate with a "Showing X to Y
of N" range read-out (`PaginationMeta`), a rows-per-page selector (whose final "All" entry loads
every page), and the first / previous / next / last navigation cluster with a "Page N of M" indicator.

Theme entry: [PaginationFooter](/v3/reference/theming/keys/PaginationFooter.md)

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-themeOverride">themeOverride</span> | `Object` |  | `null` | A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants. |
| <span id="prop-totalRecords">totalRecords</span> | `number` | yes |  | Total number of records across all pages. |
| <span id="prop-currentPage">currentPage</span> | `number` | yes |  | The currently active 1-based page number. |
| <span id="prop-rows">rows</span> | `number` | yes |  | Number of records the server returned per page; drives the range read-out math. |
| <span id="prop-perPage">perPage</span> | `number\|string` |  | `undefined` | The selected rows-per-page value: a number, or the `"all"` sentinel for the all-pages view. |
| <span id="prop-pageSizeOptions">pageSizeOptions</span> | `array` |  | `[...DEFAULT_PAGE_SIZE_OPTIONS]` | Rows-per-page options offered by the selector; the final `"all"` entry loads every page. |
| <span id="prop-loading">loading</span> | `boolean` |  | `undefined` | When `true`, the paginator shows placeholder page counts while data is loading. |
| <span id="prop-showTotalRecordNum">showTotalRecordNum</span> | `boolean` |  | `true` | When `true`, the record-count read-out is displayed. |
| <span id="prop-isTable">isTable</span> | `boolean` |  | `true` | Indicates whether the paginator is used inside a table layout (reserved for theming). |

## Slots

### `meta` {#slot-meta}

Scoped slot.

#### Bindings

| Name | Description |
| --- | --- |
| <span id="slot-meta-param-totalRecords">totalRecords</span> |  |
| <span id="slot-meta-param-currentPage">currentPage</span> |  |
| <span id="slot-meta-param-rows">rows</span> |  |
| <span id="slot-meta-param-loading">loading</span> |  |
| <span id="slot-meta-param-report">report</span> |  |

### `rows-per-page` {#slot-rows-per-page}

Scoped slot.

#### Bindings

| Name | Description |
| --- | --- |
| <span id="slot-rows-per-page-param-pageSizeOptions">pageSizeOptions</span> |  |
| <span id="slot-rows-per-page-param-perPage">perPage</span> |  |
| <span id="slot-rows-per-page-param-onChange">onChange</span> |  |

## Events

| Name | Description |
| --- | --- |
| `update:currentPage` | Emitted when the user navigates to a different page; payload is the 1-based page number. |
| `update:perPage` | Emitted when the user changes the rows-per-page selection; payload is a number or the `"all"` sentinel. |

[Full event reference](/v3/reference/api/vue/PaginationFooter/events.md)

## Source

`client/lib/navigation/pagination/PaginationFooter.vue`