Courses

React Laravel 12 Starter Kit: CRUD Project

Table Pagination with React "Helper"

Summary of this lesson:
- Implementing Laravel pagination
- Creating TypeScript interface for paginated response data
- Building reusable TablePagination component with Shadcn
- Adding advanced pagination with numbered page navigation

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...

The full lesson is only for Premium Members.
Want to access all 14 lessons of this course? (77 min read)

You also get:

  • 75 courses
  • Premium tutorials
  • Access to repositories
  • Private Discord