> ## Documentation Index
> Fetch the complete documentation index at: https://filamentphp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Pagination Blade component
export const EditOnGitHub = ({version, path}) => {
const url = `https://github.com/filamentphp/filament/edit/${version}/${path}`;
return ;
};
export const Footer = () => {
const sponsorsByTier = JSON.parse(`{
"agency_partner": [
{
"name": "Kirschbaum",
"url": "https://kirschbaumdevelopment.com/solutions/filament-development",
"filename": "kirschbaum.svg"
}
],
"gold": [
{
"name": "Agiledrop",
"url": "https://www.agiledrop.com/laravel?utm_source=filament",
"filename": "agiledrop.svg"
},
{
"name": "Baiz.ai",
"url": "https://baiz.ai",
"filename": "baiz-ai.svg"
},
{
"name": "CMS Max",
"url": "https://cmsmax.com?ref=filamentphp.com",
"filename": "cms-max.svg"
},
{
"name": "Mailtrap",
"url": "https://mailtrap.io/email-sending?utm_source=community&utm_medium=referral&utm_campaign=filament",
"filename": "mailtrap.svg"
},
{
"name": "SerpApi",
"url": "https://serpapi.com/?utm_source=filamentphp",
"filename": "serpapi.svg"
}
]
}`);
function shuffleArray(items) {
const result = [...items];
for (let index = result.length - 1; index > 0; index--) {
const randomIndex = Math.floor(Math.random() * (index + 1));
[result[index], result[randomIndex]] = [result[randomIndex], result[index]];
}
return result;
}
const sponsors = Object.entries(sponsorsByTier).flatMap(([, sponsors]) => shuffleArray(sponsors));
return ;
};
You are currently viewing the documentation for Filament 3.x, which is a previous version of Filament.
Looking for the current stable version? Visit the [5.x documentation](/5.x).
## Overview
The pagination component can be used in a Livewire Blade view only. It can render a list of paginated links:
```php theme={"theme":"gruvbox-dark-hard"}
use App\Models\User;
use Illuminate\Contracts\View\View;
use Livewire\Component;
class ListUsers extends Component
{
// ...
public function render(): View
{
return view('livewire.list-users', [
'users' => User::query()->paginate(10),
]);
}
}
```
```blade theme={"theme":"gruvbox-dark-hard"}
```
Alternatively, you can use simple pagination or cursor pagination, which will just render a "previous" and "next" button:
```php theme={"theme":"gruvbox-dark-hard"}
use App\Models\User;
User::query()->simplePaginate(10)
User::query()->cursorPaginate(10)
```
## Allowing the user to customize the number of items per page
You can allow the user to customize the number of items per page by passing an array of options to the `page-options` attribute. You must also define a Livewire property where the user's selection will be stored:
```php theme={"theme":"gruvbox-dark-hard"}
use App\Models\User;
use Illuminate\Contracts\View\View;
use Livewire\Component;
class ListUsers extends Component
{
public int | string $perPage = 10;
// ...
public function render(): View
{
return view('livewire.list-users', [
'users' => User::query()->paginate($this->perPage),
]);
}
}
```
```blade theme={"theme":"gruvbox-dark-hard"}
```
## Displaying links to the first and the last page
Extreme links are the first and last page links. You can add them by passing the `extreme-links` attribute to the component:
```blade theme={"theme":"gruvbox-dark-hard"}
```
)}
Your logo here