In this lesson, we will add pagination to our table. It won't be an easy one-minute process.
Modifying Controller for Pagination
app/Http/Controllers/TaskController.php
// ... public function index(){ return Inertia::render('Tasks/Index', [ 'tasks' => Task::all() 'tasks' => Task::paginate(5) ]);} // ...
Now, our Task List page will stop working because of a TypeScript structure mismatch. We return paginate()
from Controller, which is no longer the array of the Task
type. Let's fix this.
Creating Paginated Response Type
We return tasks
from the Controller not as a list but as a paginated object.
So, we need to create a specific new type for it, corresponding to the structure returned by Laravel pagination.
resources/js/types/index.d.ts
// ... export interface PaginatedResponse<T = Task | null> { current_page: number; data: T[]; first_page_url: string; from: number; last_page: number; last_page_url: string; links: { url: string | null; label: string; active: boolean; }[]; next_page_url: string | null; path: string; per_page: number; prev_page_url: string | null; to: number; total: number;}
Accepting Paginated Response in React
In three places, we need to change the type of data we get.
- We import our new
PaginatedResponse
type - We use it in the
export function
instead of...