Skip to content

Pagination

Inertia Table paginates every table by default, with user-selectable per-page options. You may pick the rows-per-page choices, the default page size, the pagination type (full, simple, or cursor), and the scroll position after a page change.

Introduction

Pagination controls render at the bottom of every table. By default, users may choose between 15, 30, 50, and 100 rows per page, with 15 selected initially.

Per Page Options

You may customize the pagination options by setting the $perPageOptions property on your Table class:

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

To set this as the default for all tables, call the static defaultPerPageOptions() method on the Table class, typically in your AppServiceProvider:

php
use InertiaUI\Table\Table;

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

Default Per Page

By default, the first option in the perPageOptions array is selected when a user first visits the table. Once users make their own per-page selection, that choice takes precedence over the default. You may customize the initial option by setting the $defaultPerPage property on your Table class:

php
class Users extends Table
{
    protected ?array $perPageOptions = [15, 30, 50, 100];

    protected ?int $defaultPerPage = 50;
}

Alternatively, you may use the defaultPerPage() method:

php
UsersTable::make()->defaultPerPage(50);

Disable Pagination

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

php
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:

php
use InertiaUI\Table\PaginationType;

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

With simple pagination, the total number of pages is unknown, so the pagination controls only show the current page and there is no way 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:

php
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. As with simple pagination, jumping straight to the last page is not possible.

Default sort and relation sorting

As noted in the Laravel documentation, the query must contain an order by clause, so make sure to configure a default sort. Sorting by relations is also unsupported with cursor pagination: the column you sort 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 may customize this (and all other strings) via the Translations feature. The following props are passed to the pagination label (based on Laravel's Paginator):

PropsDescription
current_pageThe current page number
current(alias of current_page)
fromThe first item number on the current page
last_page*The last page number
last*(alias of last_page)
per_pageThe number of items per page
toThe last item number on the current page
total*The total number of items
on_first_pageA boolean indicating if the current page is the first page
on_last_pageA boolean indicating if the current page is the last page
typeThe type of pagination (cursor, full, simple)

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

Scroll Position

By default, the browser scrolls to the top of the page after a page change, just like a regular page load. To preserve the current scroll position or scroll to the top of the table instead, use the $scrollPositionAfterPageChange property with the ScrollPosition enum.

The available options are:

  • ScrollPosition::Preserve
  • ScrollPosition::TopOfPage (default)
  • ScrollPosition::TopOfTable
php
use InertiaUI\Table\ScrollPosition;

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

To set this as the default for all tables, call the static defaultScrollPositionAfterPageChange() method on the Table class, typically in your AppServiceProvider:

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

Table::defaultScrollPositionAfterPageChange(ScrollPosition::TopOfTable);