Pagination

This section covers Pagination

Here you will find:

• Introduction
• Pagination (Records Per Page)
• Disable Pagination
• Record Count
• URL Page Parameter
• Custom Pagination Component

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 Footer::make() 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\Footer; 

class DishTable extends PowerGridComponent
{
    public function setUp(): array
    {
        return [
            Footer::make()
                 ->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\Footer;   

class DishTable extends PowerGridComponent
{
    public function setUp(): array
    {
        return [
            Footer::make()
                 ->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\Footer; 

class DishTable extends PowerGridComponent
{
    public function setUp(): array
    {
        return [
            Footer::make()
                 ->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.

DishTable.php

// app/Livewire/DishTable.php

use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\Footer; 

class DishTable extends PowerGridComponent
{
    public function setUp(): array
    {
        return [
            Footer::make()
                ->pageName('dishPage'),
        ];
    }
}

UserTable.php

// app/Livewire/UserTable.php

use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\Footer; 

class UserTable extends PowerGridComponent
{
    public function setUp(): array
    {
        return [
            Footer::make()
                ->pageName('userPage'),
        ];
    }
}

my-view.blade.php

// 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\Footer; 

class DishTable extends PowerGridComponent
{
    public function setUp(): array
    {
        return [
            Footer::make()
                ->showPerPage(25)
                ->showRecordCount()
                ->pagination(viewPath: 'components.pagination'),
        ];
    }
}

🚀 See it in action

See an interactive example using Custom Pagination Component.