Link to the repository
[Only for premium members]
[Only for premium members]
In this lesson, we will add pagination to our table. It won't be an easy one-minute process.
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.
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;}
In three places, we need to change the type of data we get.
PaginatedResponse
typeexport function
instead of...