Data Table - Paging

Data table supports pagination.

Enable it with the paging property. The table does not slice the items for you. Pass the items of the current page in items and handle the (page) event to load another page.

Pass the total property (number) to set the total number of items. If not passed, the length of items is used.

Pass the pageSize property (number) to set the page size. Default: 10.

total and pageSize are read once, when the table is mounted. To change them later, pass your own filter as shown in "Rows Per Page" below.

Use the (page) event to handle page change.

(page) - (PaginationModel $paging): void

The pager and the "Showing 1 to 5 of 23 entries" line are shown only when there is at least one row.

Example

<DataTable 
    columns="$columns"
    items="$paged"
    paging
    pageSize="5"
    total="{count($items)}"
    pageSizes="{[]}"
    (page)="onPageChange"
/>

<?php

namespace ExamplesUi\Tables;

use ExamplesUi\HeroModel;
use Viewi\Components\BaseComponent;
use Viewi\UI\Components\Pagination\PaginationModel;
use Viewi\UI\Components\Tables\TableColumn;

class FormsExample extends BaseComponent
{
    public array $columns = [];
    // all items
    public array $items = [];
    // items for the table
    public array $paged = [];

    public function init()
    {
        $this->setUpColumns();
        $this->prepareHeroes();        
    }

    public function setUpColumns()
    {
        // Columns definition
        $this->columns = [
            new TableColumn('Id'),
            new TableColumn('Name'),
        ];        
    }

    public function prepareHeroes()
    {
        // let's pretend that we got these from some API
        $hero = new HeroModel();
        $hero->Id = 1;
        $hero->Name = 'Superman';
        $this->items[] = $hero;

        $hero = new HeroModel();
        $hero->Id = 2;
        $hero->Name = 'Batman';
        $this->items[] = $hero;

        $hero = new HeroModel();
        $hero->Id = 3;
        $hero->Name = 'Wonder Woman';
        $this->items[] = $hero;
        // ...

        // display first 5 items by default
        $this->paged = array_slice($this->items, 0, 5);
    }

    // handle table page change event
    // entityFrom starts at 1, array_slice offset starts at 0
    public function onPageChange(PaginationModel $paging)
    {
        $this->paged = array_slice($this->items, $paging->entityFrom - 1, $paging->size);
    }
}

The result:

pageSizes="{[]}" hides the rows per page selector, because this example does not handle it.

Rows Per Page

When paging is on, the table shows a rows per page selector next to the "Showing ..." line. The options come from the pageSizes property. Default: [10, 25, 50, 100]. Pass an empty array to hide the selector.

When the user picks an option, the table emits (pageSize) with the new size. It does not change its own page size. Handle the event, update the filter and load the page again.

To do that, create a TableFilter in your component and pass it to the filter property. The table then uses your filter instead of creating its own, and pageSize and total are ignored. $filter->paging is a PaginationModel.

<DataTable
    columns="$columns"
    items="$paged"
    paging
    filter="$filter"
    pageSizes="$sizes"
    (page)="onPageChange"
    (pageSize)="onPageSize"
/>

<?php

namespace ExamplesUi\Tables;

use ExamplesUi\HeroModel;
use Viewi\Components\BaseComponent;
use Viewi\UI\Components\Pagination\PaginationModel;
use Viewi\UI\Components\Tables\TableColumn;
use Viewi\UI\Components\Tables\TableFilter;

class TablePageSizeExample extends BaseComponent
{
    public array $columns = [];
    // all items
    public array $heroes = [];
    // items for the current page
    public array $paged = [];
    // options for the "per page" selector
    public array $sizes = [5, 10, 20];
    public ?TableFilter $filter = null;

    public function init()
    {
        $this->columns = [
            new TableColumn('Id'),
            new TableColumn('Name'),
        ];
        $this->heroes = []; // load the heroes, for example from an API
        // own the filter to control the page size and the total
        $this->filter = new TableFilter(5);
        $this->filter->paging->setTotal(count($this->heroes));
        $this->showPage();
    }

    public function showPage()
    {
        $paging = $this->filter->paging;
        $this->paged = array_slice($this->heroes, $paging->entityFrom - 1, $paging->size);
    }

    public function onPageChange(PaginationModel $paging)
    {
        $this->showPage();
    }

    public function onPageSize(int $size)
    {
        $this->filter->paging->setPageSize($size);
        $this->filter->paging->setPage(1);
        $this->showPage();
    }
}

The result:

If the total changes, for example after a search, call $this->filter->paging->setTotal($newTotal) to update the pager.

PaginationModel

The (page) event and $filter->paging give you a PaginationModel with these properties:

page - the current page, starting at 1.

size - the page size.

total - the total number of items.

totalPages - the number of pages.

entityFrom - the position of the first item on the current page, starting at 1.

entityTo - the position of the last item on the current page.

Methods: setPage(int $page), setPageSize(int $size), setTotal(int $total). Each of them updates the calculated properties.

Properties

paging - (optional) shows the pager. Default: false.

total - (optional) the total number of items. Read once on mount, ignored if filter is passed. Default: null, the number of items.

pageSize - (optional) the page size. Read once on mount, ignored if filter is passed. Default: null, which means 10.

pageSizes - (optional) the options of the rows per page selector. An empty array hides the selector. Default: [10, 25, 50, 100].

filter - (optional) a TableFilter instance with the search text and the PaginationModel. Default: null, the table creates its own.

Events

(page) - (PaginationModel $paging): void. Emitted when the user opens another page.

(pageSize) - (int $size): void. Emitted when the user picks a rows per page option.