So now that we've used Eloquent to fetch information from the database and send it to the client, the next step would be to implement pagination. But before we do that, let's take one minute to clean this up. Now, because I'm using Tailwind CSS, why don't we save ourselves a little bit of design time and instead pull in one of these free components from the tailwindui.com website. Maybe something like this. So I can see the code here. I can copy it. And I'll switch to PHPStorm. We'll go to that users page. And yeah, we're going to swap out the UL with this table layout. So I'm going to paste in the whole thing.

So that gives us this. All right. So this is what we end up with. A standard table element with some classes to make it look nice and pretty. So I think we're all set. Let's now migrate this section. So I'll get rid of it. And now for our table rows, this is where we will perform our v4 on User and users. We need to give it a key. And actually, on that note, I'm not sure we passed through the id. Let's check that real quick. Let's go to my routes file. And yeah, notice I accidentally forgot to include the id.

Let's check that real quick. Let's go to my routes file. And yeah, notice I accidentally forgot to include the ID. So let's add that as well. Or if the ID is something sensitive that you don't want the user to see, you could always reach for a unique ID. Anyways, let's go on back. And now I can swap this out with the user's name. Finally, we don't have any kind of user edit link. But if we did, it would take the shape of something like this, where the href would be potentially users/{user_id}/edit.

But if we did, it would take the shape of something like this, where the href would be potentially users/{user->id}/edit. And we can even make that look prettier if we switch to a template string like that. All right, let's have a look. Give it a refresh. And now we have a nicely formatted table of all of our users. And notice that each user includes a link to where we can edit that table. Specific person. Okay, design portion done. Next, let's implement pagination.

Okay, design portion done. Next, let's implement pagination. Now, if you're familiar with Laravel, you already know that there is a paginate method we can reach for. But this isn't quite right. So if I come back and refresh, yes, I still see the same thing. But if we have a look at view dev tools, let's go down to our page. And we have our users, but there's nothing different. It seems like it's partially working because we're not fetching 100 users anymore. We only have 15.

It seems like it's partially working because we're not fetching 100 users anymore. We only have 15. So for example, if I change that to 10 at a time, like this. So yeah, it seems like it's partially working, but I'm missing information about the paginator. What current page are we on? What are the links? Things like that. So here's what the issue is. We called User::all() and then we mapped over it.

So here's what the issue is. We called User::all() and then we mapped over it. And when you map over a Paginator, you're effectively replacing that collection entirely. So for example, if I were to delete that and switch back, I bet we're going to get some errors. Give it a refresh. And yet now it doesn't work anymore, as you see there. But this does mean we're on the right track. So have a look at this.

But this does mean we're on the right track. So have a look at this. If I were to just return this directly from the route before we even touch Inertia, have a look what happens. No longer are we returning a collection of only Users, but instead an object that, yes, contains all of the User's data. That's now behind a data property. But it also, again, has information about the paginator. What page are we on? What's the page to the first URL?

What page are we on? What's the page to the first URL? What are we starting with? What's the last page? And even cooler, there's this links property that contains all of the relevant links to build up your paginator on the fly. And it can even tell you what page you are currently on. All right, so this is pretty cool. I love how easy Laravel makes this. If I bring this back, now I just have to update my users component.

I love how easy Laravel makes this. If I bring this back, now I just have to update my users component to accept not an array of users, but an object that represents that paginator. OK, now if we scroll back up, we're going to iterate over not the users array, but the array that's in users.data. And you saw that just a minute ago. OK, so I think that should do it. If we come back and give this a refresh, we now get the same thing as before. But take a look at this and view dev tools on our page. Yeah, now this is what's being sent to our component.

But take a look at this and view dev tools on our page. Yeah, now this is what's being sent to our component. We have the array of users, but we also have a list of links to build up the paginator. OK, let's see if we can implement that. So let's see. Maybe to start, we'll do it here at the bottom. And I'll say this is our paginator. OK, so we'll have this in a div. Maybe we'll give it a little margin-top. And you'll see effectively what we're going to do here.

Maybe we'll give it a little margin top. And you'll see effectively what we're going to do here. So down here at the bottom, we want a list of links. OK, so let's see. Once again, how do we build this up? We want to go into users.links. It's an array, so we iterate over it. And for each one, it looks like we have a URL and a label. OK, so maybe for each one, we should display a link. link v4 link in users.links.

OK, so maybe for each one, we should display a link. link in users.links. Next, the href is going to be link.url. And then the text or the HTML will be link.label and reformat. And let's see. The HTML can lead to X. Yes, I'm aware of that. It's not a problem here. OK, so I'm just grabbing that information here. Let's come back and give it a refresh.

I'll show you the long way and then maybe the cleaner way. We could start by wrapping this in a template. So we iterate over all of the links. And for each one, we render a link. So we get something like that. But then within here, we could say, well, if we have a URL, only in that case should we render a link tag. Otherwise, we should render a span tag. And then here, we'll set the HTML to link.label. And yeah, I think that will do the trick.

And then here, we'll set the HTML to link.label. And yeah, I think that will do the trick. Let's give it a shot. Refresh, scroll down to the bottom, and notice if I'm on the last page, the next link is a span, which is what we want. So yeah, at this point, style it however you want to make it clear. This is muted. It's not clickable in the way that these other ones are. But notice the previous link, if we have a previous page, is a anchor tag or an inertia link.

But notice the previous link, if we have a previous page, is a anchor tag or an inertia link. But if we're on page one, sorry, we don't have much real estate here. In that case, it would become a span. OK, so that works, and this is entirely fine. But another option is to use a view dynamic component. To do that, I'm going to bring this back to what we had before, like this. But instead of explicitly using a link component, we're going to use this dynamic one. And then I can use the is prop to declare what kind of view component it should use. So for example, if I wanted to repeat a link, then I could do that, and the same thing is

before, but notice we're using general span elements where relevant. And now finally, we can add some basic classes here to make it look pretty, like a little bit of padding around each. And then actually, why don't we do one that's dynamic? If it's a span, maybe the text should be gray. To signal you can't click on this. So I could say, once again, link.url, text, or actually nothing in that case. But otherwise, text gray 400, or maybe 500. All right, let's give it a shot. Come back, refresh, scroll down, and there we go.

All right, let's give it a shot. Come back, refresh, scroll down, and there we go. And that's good enough for our little demo here. OK, one or two more quick things, and then I will let you go. If you'd like, we can extract this to a reusable view component. And that way, anytime you need a Paginator, it's up and ready to go. OK, let's go into resources/js/shared. I'm going to add a new view component here called Pagination. And then let's grab, to start, everything you see here. And I'll paste that in.

And then let's grab, to start, everything you see here. And I'll paste that in. But we don't want to assume merchant top, so I will pass that in. And then let's see, what does it need here to function? I guess all it really needs is an array of links. So let's do that here, and then iterate over the links, rather than assuming that we have some kind of users object. Because it could be links for anything that can be paginated. All right, I think that is good enough for now. So if I switch back, we can pull in our pagination component,

All right, I think that is good enough for now. So if I switch back, we can pull in our pagination component, and we can send through the links, like this. And by the way, notice PHPStorm automatically imported that for us. All right, cross our fingers, come back, refresh, and it failed. OK, let's see what I did wrong. User is undefined. Oh, I'm sorry, users.links. All right, one more time, give it a refresh, and yeah, now it's working. I did lose my margin there, though.

All right, one more time, give it a refresh, and yeah, now it's working. I did lose my margin there, though. So this is where I can pass it in on the fly. And we should have exactly what we had before. And I think that looks pretty good. So finally, the only remaining step is to return the mapping from our controller. Because right now, once again, our users array contains everything from the database. So we can fix that by returning to our routes file. And right here, yeah, remember how before when we called map, we had something like this, where we returned the ID, like this, and the name?

And right here, yeah, remember how before when we called map, we had something like this, where we returned the id, like this, and the name? But when we called map, it replaced the Paginator completely. So we get a new Collection. We can fix this by changing it to through. Through is almost the same as map, but it's applied to the current slice of items, rather than returning a brand new Collection. So I think that should do the trick. If we give it a refresh, we have a look at users, cross your fingers, and yeah, now it's working just like it did before.

let's make sure that we highlight whether we're on the current page. So we can do that. Maybe I'll rewrite this into the object form. Let's do text-gray-500 if we don't have a next or previous link. And then I'm going to say, let's make it bold if we are the current page. And you'll remember there was an active property available. So now we have a little more indication as to what page you're currently on. And with that, we are finally done and ready for something else.