Pagination โ
This section covers Pagination
Here you will find:
Introduction โ
Pagination is a useful technique for dividing large datasets into smaller, more manageable chunks known as pages.
PowerGrid Components come with built-in pagination functionality. All you need to do is configure the number of Records Per Page, and pagination will be readily available.
On this page, you can find information on customizing pagination settings. You may also visit the Personalizing the Footer page to further customize your PowerGrid Table.
Pagination (Records Per Page) โ
PowerGrid includes an easy-to-configure built-in Pagination system.
To enable pagination, you must add a call to the PowerGrid::footer()
class in your Component's setUp()
method. Then, proceed to chain the showPerPage()
method to the Footer
class.
Example:
// app/Livewire/DishTable.php
use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;
class DishTable extends PowerGridComponent
{
public function setUp(): array
{
return [
PowerGrid::footer()
->showPerPage(perPage: 10, perPageValues: [0, 50, 100, 500]),
];
}
}
Additionally, you may also configure the default items per page by passing the parameter $perPage
.
To configure the dropdown menu options, pass an array with values as the $perPageValues
parameter. The value 0
represents the "show all" option.
Disable Pagination โ
To disable pagination, you can simply remove the method showPerPage()
from the Footer::class
.
Example:
// app/Livewire/DishTable.php
use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;
class DishTable extends PowerGridComponent
{
public function setUp(): array
{
return [
PowerGrid::footer()
->showPerPage()
->showRecordCount(mode: 'full'),
];
}
}
Record Count โ
Displays the record count in the Table Footer.
To enable this feature, you must add a call to the Footer::make()
class in your Component's setUp()
method. Then, proceed to chain the showRecordCount()
method to the Footer
class.
You may change the record count style passing the $mode
parameter. See the mode list below:
Mode | Description |
---|---|
full | Full sentence: Showing 1 to 10 of 100 Results |
short | Short: 1 - 10 โ 100 |
min | Minimal: 1 - 10 |
Example:
// app/Livewire/DishTable.php
use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;
class DishTable extends PowerGridComponent
{
public function setUp(): array
{
return [
PowerGrid::footer()
->showRecordCount(mode: 'full'),
];
}
}
URL Page Parameter โ
Sometimes, you may need to change the default URL page parameter (?page=
). This is useful, for example, when you are working with two PowerGrid Components on the same page and must avoid collisions between the two paginators.
The example below shows how to use a different pageName for each component.
The DishTable
component uses the dishPage
parameter from the URL, while the UserTable
component uses the userPage
parameter. Here is an example of how the URL will look like: http://myapp.test/?dishPage=2&userPage=5
.
// app/Livewire/DishTable.php
use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;
class DishTable extends PowerGridComponent
{
public function setUp(): array
{
return [
PowerGrid::footer()
->pageName('dishPage'),
];
}
}
// app/Livewire/UserTable.php
use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;
class UserTable extends PowerGridComponent
{
public function setUp(): array
{
return [
PowerGrid::footer()
->pageName('userPage'),
];
}
}
// resources/views/my-view.blade.php
<div>
<livewire:dish-table />
<livewire:user-table />
</div>
Custom Pagination Component โ
To use a custom component for pagination, proceed to chain the methods showPerPage()
, showRecordCount()
, and the pagination()
to the Footer::make()
class call.
You must pass a view to the parameter $viewPath
to the pagination()
method.
Your custom component will have access to the $perPage
and $perPageValues
properties.
// app/Livewire/DishTable.php
use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;
class DishTable extends PowerGridComponent
{
public function setUp(): array
{
return [
PowerGrid::footer()
->showPerPage(25)
->showRecordCount()
->pagination(viewPath: 'components.pagination'),
];
}
}
๐ See it in action
See an interactive example using Custom Pagination Component.