Pagination

Pagination Methods

// Full - includes total count, "Showing 1 to 10 of 42 results"
ServerTable::make(Server::query())->paginate();

// Simple - no COUNT query, faster, "Showing 1 to 10 results"
ServerTable::make(Server::query())->simplePaginate();

Method	Laravel Method	COUNT Query	First/Last Buttons
->paginate()	paginate()	Yes	Yes
->simplePaginate()	simplePaginate()	No	No

Per-Page

// Via class property
class ServerTable extends Table
{
    protected int $perPage = 25;
}

// Via fluent setter
ServerTable::make(Server::query())->perPage(25)->paginate();

Multiple Tables

For pages with multiple tables, use identifier() to scope each table's URL parameters. This prevents pagination, sorting, and searching from conflicting:

// Controller
return Inertia::render('Dashboard', [
    'servers' => ServerTable::make(Server::query())
        ->identifier('servers')
        ->paginate(),
    'sites' => SiteTable::make(Site::query())
        ->identifier('sites')
        ->paginate(),
]);

URL: /dashboard?serversPage=2&sitesSort=-name&sitesSearch=prod

See Table Classes - Identifier for full details.

Custom Pagination UI

React

<InertiaTable
    tableData={servers}
    renderPagination={({ links, meta, onPageChange }) => (
        <div className="flex justify-center gap-2 p-4">
            <button
                disabled={!links.prev}
                onClick={() => onPageChange(meta.current_page - 1)}
            >
                Previous
            </button>
            <span>Page {meta.current_page}{meta.last_page ? ` of ${meta.last_page}` : ''}</span>
            <button
                disabled={!links.next}
                onClick={() => onPageChange(meta.current_page + 1)}
            >
                Next
            </button>
        </div>
    )}
/>

Vue

<InertiaTable :table-data="servers">
    <template #pagination="{ links, meta, onPageChange }">
        <div class="flex justify-center gap-2 p-4">
            <button
                :disabled="!links.prev"
                @click="onPageChange(meta.current_page - 1)"
            >
                Previous
            </button>
            <span>Page {{ meta.current_page }}{{ meta.last_page ? ` of ${meta.last_page}` : '' }}</span>
            <button
                :disabled="!links.next"
                @click="onPageChange(meta.current_page + 1)"
            >
                Next
            </button>
        </div>
    </template>
</InertiaTable>