Pagination

Introduction

By default, all Tables are paginated and the user can select how many rows to display per page. The pagination controls are displayed at the bottom of the table. The default options are 15, 30, 50, and 100 rows per page, and 15 rows per page is selected by default.

Per Page Options

You can customize the pagination options by setting the $perPageOptions property in your Table class:

class Users extends Table
{
    protected ?array $perPageOptions = [50, 100, 250];
}

If you want this to be the default for all tables, you may call the static defaultPerPageOptions() method on the Table class, for example, in your AppServiceProvider:

use InertiaUI\Table\Table;

Table::defaultPerPageOptions([50, 100, 250]);

Disable Pagination

Though absolutely not recommended, you can disable pagination by setting the $pagination property to false:

class Users extends Table
{
    protected bool $pagination = false;
}

Simple Pagination

In addition to the default pagination, you may use simple pagination. To enable simple pagination, you should set the $paginationType property to PaginationType::Simple:

use InertiaUI\Table\PaginationType;

class Users extends Table
{
    protected PaginationType $paginationType = PaginationType::Simple;
}

Please note that by using simple pagination, it is unknown how many pages there are in total, so the pagination controls will only show the current page. Therefore, it is also impossible to jump straight to the last page.

Cursor Pagination

Inertia Tables also support cursor-based pagination, which provides the most efficient way to paginate large datasets. To enable cursor pagination, you should set the $paginationType property to PaginationType::Cursor:

use InertiaUI\Table\PaginationType;

class Users extends Table
{
    protected PaginationType $paginationType = PaginationType::Cursor;
}

Due to the nature of cursor pagination, the current page number is unknown. Like simple pagination, it is impossible to jump straight to the last page.

Default sort and relation sorting

As noted in the Laravel Documentation, the query must contain an order by clause, so you should make sure to have a default sort set. Also, sorting by relations is not supported with cursor pagination, as the column you are sorting by must belong to the table.

Translation

By default, the pagination label shows the current page and the total number of pages (e.g., Page 1 of 3). You can customize this (and all other strings) using the Translations feature. The following props are passed to the pagination label (based on Laravel's Paginator):

Props	Description
current_page	The current page number
current	(alias of current_page)
from	The first item number on the current page
last_page*	The last page number
last*	(alias of last_page)
per_page	The number of items per page
to	The last item number on the current page
total*	The total number of items
on_first_page	A boolean indicating if the current page is the first page
on_last_page	A boolean indicating if the current page is the last page
type	The type of pagination (cursor, full, simple)

* These props are only available when using full pagination, not with simple or cursor pagination.

Scroll Position

When the user changes the page, the browser will scroll to the top of the page, just like a regular page load. If you want to maintain the scroll position or scroll to the top of the table, you can use the $scrollPositionAfterPageChange property with the ScrollPosition enum.

The available options are:

• ScrollPosition::Preserve
• ScrollPosition::TopOfPage (default)
• ScrollPosition::TopOfTable

use InertiaUI\Table\ScrollPosition;

class Users extends Table
{
    protected ?ScrollPosition $scrollPositionAfterPageChange = ScrollPosition::TopOfTable;
}

If you want this to be the default for all tables, you may call the static defaultScrollPositionAfterPageChange() method on the Table class, for example, in your AppServiceProvider:

use InertiaUI\Table\ScrollPosition;
use InertiaUI\Table\Table;

Table::defaultScrollPositionAfterPageChange(ScrollPosition::TopOfTable);