Skip to main content

Table Pagination with ShadCN Pagination Component

Premium
7 min read

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

The Full Lesson is Only for Premium Members

Want to access all of our courses? (30 h 09 min)

You also get:

55 courses
Premium tutorials
Access to repositories
Private Discord
Get Premium for $129/year or $29/month

Already a member? Login here

Comments & Discussion

O
oupisey.it ✓ Link copied!

MIssing call "<Pagination :resource="tasks" />" in pages/Tasks/Index.vue.

M
Modestas ✓ Link copied!

Thank you for reporting this! I've fixed the tutorial

AA
Ahmad Alharbi ✓ Link copied!

Thanks for the course , I saw we’re making our own pagination component. Why not use the one from shadcn-vue? Just wondering if there’s a specific reason

M
Modestas ✓ Link copied!

We are using the one from shadcn! The issue is - it's often just a component without the pagination logic around it.

At the initial writing with TailwindCSS 3 - there was a way to "plug in" a pagination inside, but when we did update to TailwindCSS 4 - there was no way to do that anymore. It might have changed again now :)

K
Kaspars ✓ Link copied!

const props = withDefaults(defineProps<Props>(), { resource: null, //here are not allowed to asign to null });

Type 'null' is not assignable to type '((props: LooseRequired<Props>) => PaginatedResponse<Task | null>) | undefined'.ts-plugin(2322) Pagination.vue(17, 5): The expected type comes from property 'resource' which is declared here on type 'InferDefaults<LooseRequired<Props>>' (property) resource?: ((props: LooseRequired<Props>) => PaginatedResponse<Task | null>) | undefined

M
Modestas ✓ Link copied!

Will be fixed soon, thanks!

We'd Love Your Feedback

Tell us what you like or what we can improve

Feel free to share anything you like or dislike about this page or the platform in general.