# Pagination
Navigation for a paginated list or table with page numbers and prev/next controls.
## Installation
```tsx
import { Pagination } from "@makeplane/propel/components/pagination";
```
## Usage
```tsx
import { Pagination } from "@makeplane/propel/components/pagination";
import * as React from "react";
export default function BasicDemo() {
const [page, setPage] = React.useState(1);
return ;
}
```
## Examples
### With selector and range
Pass `pageSize` to add the per-page selector and `range` to show the `1-50 of 250` label before the controls; both are optional.
```tsx
import { Pagination } from "@makeplane/propel/components/pagination";
import * as React from "react";
export default function WithSelectorAndRangeDemo() {
const [page, setPage] = React.useState(1);
const [pageSize, setPageSize] = React.useState(50);
return (
);
}
```
### Truncation
The visible page window is derived from where the current page sits within `pageCount` — first and last are always anchored, and runs of two or more skipped pages collapse to an ellipsis.
```tsx
import { Pagination } from "@makeplane/propel/components/pagination";
export default function TruncationDemo() {
return (
);
}
```
### Empty state
When there's nothing to page through (`pageCount` is `0` or `1`), prefer not rendering `Pagination`
at all. If `pageCount` is `0`, the control still renders safely — no page-number button, both
arrows disabled — rather than showing a stray "page 1".
### Loading
Set `loading` to render the current page as a spinner while navigating to it is in flight.
```tsx
import { Pagination } from "@makeplane/propel/components/pagination";
export default function LoadingDemo() {
return {}} loading />;
}
```
### Labels
`labels` overrides the default English accessible names (landmark, prev/next, page buttons) and the selector's visible text — pass any subset; the rest keep their defaults.
```tsx
import { Pagination } from "@makeplane/propel/components/pagination";
import * as React from "react";
export default function LabelsDemo() {
const [page, setPage] = React.useState(1);
const [pageSize, setPageSize] = React.useState(50);
return (
`Page ${pageNumber}`,
perPage: "rows per page",
}}
/>
);
}
```
## API Reference
### Pagination
Page navigation for a paginated list or table. Renders a `