Nono.MA

Sort List & Grid Views with Vue JS

NOVEMBER 7, 2022

How to sort a Vue.js view by different attributes and toggle different view modes.

Chapters

Transcript

Hi, everyone. It's Nono here and this is a quick hands-on tutorial on how to create a sortable list and grid dynamic Vue components.

So we have a component here that is going to sort our content um depending on these properties that we have here, that also can be toggled between list and grid views. This is all made with Vue, CSS, and HTML5.

This means that you have a list like this one, for example, you want to be able to sort the data according to the parameters or like properties of your data and you also want to be able to flip between different views. In this example, we're going to see how to flip between list and grid and how to sort maybe by age or by date or by name.

All right. Let's dive in.

I already have this application as a starting point. This is a lot of an app that simply has like a blade view. This is a PHP Well, It's actually an HTML view that has a CSS flex grid. And uh, this grid, you know, you don't really need to know anything about Laravel to follow this tutorial, even though it's good if you knew, but everything you need to know is that we have these classes here.

And if I add the least class, this turns into a list, I'm going to remove these scaling thing that I have here on the code that is not really helping anyone understand this. So if I leave the list here and show you this way, if I now remove these list class from here, this turns into like a three elements by row list. So we're going to leave this here on the side. What we're going to use is two different things.

Loading Vue.js and Lodash

So we're going to use Vue.

Which you can access a vuejs.org. This is a progressive JavaScript framework, comparable to React if you know it, but a bit different, and we're also going to use lodash for their sort by algorithms.

The first thing I'm going to do is that I'm going to go to look for Vue and lodash and we're going to try to get their CDN URL so we can load them in our website directly.

So CND Vue . Yeah. cdnjs. So we go to cdnjs, we can get this library here and we can put it on the header of our application. We can click on here to copy the tag, and now we can paste it on our website.

So what we're going to go to vuejs.Org We're going to go to, to get started. And we're going to grab this CDN version to put on our website.

So I'm going to paste this here and I'm going to go to CDN. . Look for lodash there. And I'm going to click here to copy the HTML tag, and I'm going to put it here. All right. So now we should, if this works, we should be able to go to our side, reload, go to the console. And now we can print Vue which is a function. So it works. And we have many of the things that we can do here and lodash as a function. And that works.

So we actually were to comment this out, this wouldn't get loaded and we wouldn't be able to print either of them.

So now that we have this working, so we're going to uncomment this and load Vue.

The first thing we're going to do is instead of manually generating so many of these container items, we're going to try to use Vue to do that. We're going to try to have Vue have some data in JavaScript as a JSON object, and we're going to try to make it populate our lists. So right now we're going to fall back into our container list.

So we have tabs in here. So there will be like all vertically aligned and we want to make this a Vue component. So the first thing you have to do to make up your component is after your HTML is defined and lodash and Vue are loaded. So this is going to be like this.

So we're going to say, let up new Vue and then we have our app, right? So this is our application. Nothing is going to happen. Maybe what I can do is remove the flex grids from the top because this is not flex grid anymore.

And so this is actually a different tutorial and we can put that there and we can put a bit less padding to the website. So one rep.

Now that we still have this one component. And we have a Vue application. So we Vue what we need to do is first have a way to reference our... the container where our application is based in. So we're going to do is we're going to leave our classes here, but we're going to add a new class that is going to be called app.

And we're going to tell you that this is going to be our selector to get that component. So when we do that, when we do this here, now we should have an app, like an app variable. Our application. Now our component is mounted as a Vue component.

Hiding Vue components while loading with v-cloak

There is one thing that Vue lets you do that is hiding your application while it's loading, because maybe sometimes it needs to do some processing.

So what we can do here is that we can set that for this tag that we put there on the description for every single child, we're going to have the display to be none. So these are not going to be shown.

Okay. So if we remove and hide this thing, this is hidden, right? We could say something more subtle, like opacity equals or 0.5, right? So you'll see what happens. This has this vehicle property until you Mount your applications. So we could, for example, run this code on our console.

So I could go to my console here and run this code.

Vue is not defined.

Let me see one second. Okay. So when I mount this, so if I click this actually is, has the v-cloak property removed from the HTML and that shows, so one thing that we could do is that we could actually do set a timeout and put a function here. And maybe after one minute we do this instantiation one for application. We say that our app equals new Vue.

So now we load and it takes one second until our application is mounted and this is good practice. Just because this allows you to do something pretty cool. For v-cloak what are we going to do is that before that item I'm going to add content and it's going to say loading. And I'm going to put the opacity of that component is going to be 0.6 and check this out, right?

Now for that second, that is loading you can see this year and we can actually hide the other part of the code.

So now we have a loading mechanism for our grid, and this allows us to... when Vue actually takes time, maybe fetching information or doing something, or you have to do whatever before mounting. It's good to have these v-cloak property and some sort of loading sense to the user. What happens here is that we are locally doing this and we are setting a manual timeout.

If I comment that you can see that we're not going to see any loading because Vue loads instantaneously. And we don't really have any delay, but if you had 250 milliseconds of delay, you would see something like this.

Data and v-for

And now what we need to do is that we can define here all their properties so we can say, We have some data for our application. We have some computed properties and we are going to have some methods. These are. JavaScript functions. So for our data.. So I'm going to imagine that I'm setting here a set of sketches, like drawings or maybe posts on my blog.

So I have my sketches property, which is going to be an array. I could say, Okay, my first sketch has an id of one or zero. And the name is I dunno, let's say one word per day or something, and then I'm going to make a few more, so we're going to change the titles here. So we're going to put that there.

And what I'm going to do is that I'm just going to go to the archive and I'm just going to copy a few titles. So for example, would be like, We need new interfaces and My journals, Energy and time. And the last one is going to be about Freediving first impressions.

So these are going to be my titles. We don't really have any contents so far, and nothing really shows up in here.

So you see how these containers is being added here manually so I could add more of them. So now have, did you hear that? What we're trying to do is not to have to manually put every item here, but generate them in base of the data that our Vue application will have.

Right? For that, what we're going to put here, if we're going to say v-for, and this is a Vue helper v-for a sketch in sketches, right? So this is the sketches data property. And we're going to put here that the key is going to be the sketch.id, which we have defined before.

We're going to create a new div, and the only thing we're going to put here is the sketch.name property, right?

Now we have a set of names, one after the other. We just have this with the names. And what we want to do now is to have this, like these ones. So the only thing we need to do for that is to just add what we have there, right?

So we just need to... the class and all of the other properties of these components and we can put them inside of this block. So we just do that. So it's just going to generate one of those default cards per item and the only thing we need to do is just put the name on the title, field and boom. Then we go and we have that there.

So we can maybe reduce the margin bottom now that we have seen a bit of the content here and these would be our cards.

All right. We have our cards and we have some body text, which is really non-existent. So it would be maybe cool to, to have some more content to show there. And I'm just going to go ahead and change the layout here.

So maybe we can do this and then put the color here to be..

Cool. All right. So we have these things. Maybe we can make this some other colors is this boring.

Now maybe we can display the, their ids, right? So we can say, , I have an id for each of these things here. So I have from zero to four and we can actually render those. We can now go and remove these things. And I could say body text of item. And then we put here sketch thought id, right?

This is the only information or extra information that we could use of this item, because it's the only other thing that we have. And I don't know, maybe makes sense to... to add it somewhere else. Like maybe to put it here.

Yeah. That's a bit ugly. Anyhow let's just keep this maybe as a something that we don't see a lot, so maybe we make here a span. Yeah.

We just, maybe I don't like to, but let's just do it for the be quicker. So you see the numbers in there more or less.

Sorting data with Lodash and computed properties

And the thing that we're going to do now is we're going to try to sort these items by name and by their id. So those are two different things one thing is alphabetical and the other one is just by numbers.

And we're going to create here at diff there's going to be called container header, and it's also going to contain items. So one is going to be id and then the other one is going to be named. We're just going to see that here id and name, and we have to create a class.

Are these going to be. The container header is going to be display flex as well as we did before. So we got those there and now the container header item is going to be maybe have some padding. So maybe a 0.3 REM. And we just need to apply that class here. So class container header item.

So now we have these things here and we want to make sure you know that I'm going to show you what we're doing. So if I put some background color here, let's say Gainsborough. I don't know. So we put here maybe both of their radios to be two pixels and maybe margin, right?

Couple 0.3 REM. We really don't want these things to be affected when we put the sorting arrow there, because what I'm going to do is that we're going to have the sorting arrows when these properties are ordering there. But for now, the only thing I'm going to do is I'm going to just put one.

And we just have that. And then the core story is going to be a pointer. And now I'm going to remove actually the delay when loading obligation, because otherwise it's a bit annoying when it updates. Nothing happens when I click. So we need to put the into a header.

Just want to bring this to center our container, Heather. What I want now is to click here and actually sort the list by the ideas that we have there. So let's bring this back here and yeah, and for that, we only, you know, we only need a few steps.

One is going to be creating a computer property right now. We're using here the like a sketch in sketches, right? So we have a set of sketches and they're in the order behind defined here so I could change them and, they would change. And, that might actually happen and be something good that we could do.

So we have them out of order and we don't want to solve them manually. So what we do for that is to have a computer property that we're going to call sort, the sketches is going to be a function that is going to return something. And for that, we could simply return the sketches and now use here instead of sketches use sorted sketches.

So we can see now that this still is still there. And if I remove one is still using that one, but now what we need to do is to actually sort here, to sort, what we can do is use these load that sort my sketches, maybe so you see better and now we put here property, we say maybe the id and we can say sending, so now when we do this what happens is that magically, these items are being sorted um, with the right order, right? So you see the, the number of zero, the one, the two, the three and the four. And we could just put here desk and they would, the sending,

Okay.

Is or thereby, alright. Yeah. So it's ordered by not sort by, so this is ascending and this is the sending, which is, like from more to less, we could use the name. So now if we do our sending, we see that is ABC, the E F D O N w E. Right. And that goes in order. So what we want to do is parameterized this, so we want to say, okay, the sort by property is going to be here is id in the order by property.

Sending let's say so now we can call here. We copy these two. And what we do is this an input this year short by an order by, and now we have an error data or the id is order by some error is happening. We're not closing here. Cool. Okay. So now with our properties, we can say descending, and now we do need to make the numbers bigger so you can see them.

That needs to be more evident. One thing we can do is here, add a filter scale,transform.

And when the working, so we just leave it like it. That's cool. Now what I want to do is that when I click I change the sorting, right? So for example, we say, okay, this is the sending, but now I want to click.

Methods and @click handler

So, um, now, uh, we are going to have a function that's going to be called sort, or maybe toggle short so we're going to talk about the sorting. So we're gonna maybe have a function it's going to be called sword on. This is our short by and the. What are we going to do is, uh, let's make it simpler. So we just want to start. and what we do is that we get that if these or by the first item is ASC well, we lose that this order by equals desk.

And these will be a C if not, so now we just, I have to call this method. And what we do for that is that we put on the idea element. We just put here at click, we call the method sort, right? So add click sort. And now this happens, right? So I can click here. And supposedly that methods being called and

these, or there by

function. So let's talk here, click. So this is working. The only thing we need to do is put here this force updates. Let's log clicked.

Some things that we have here. Okay. This is actually out of our Vue application. So it wouldn't work even if we had it. So we can put this here and maybe we actually don't need the things that we added. . So now when I click this so these items, you can see them here. So these items are being sorted by these arrow is not doing anything.

So now . We need to change that arrow according to the sorting mechanism. And what we do for that is that we can get here and say, , my short arrow, is going to be a function and it's going to depend on this. So we say if the, or their buy is ASC, we return. We do otherwise we're then down, right?

So if it's a C app, otherwise it's descending down. So this is a sending and this is the sending. So nothing really happens now, but what we do now is first put the user select none. And that second is that we're going to go to our item and in here.

So instead of forcing these to be up, what we want to do is we just put here, let's do a, like with the id content. And what we're going to do is a span that we would Vue for as the content to be the short arrow. And that's a function there.

All right. So now you can see this is descending and ascending, right? So this is now working and we have by one property, . So what I want to do is allow for us to sort by different properties, you might be willing to do short by id, but also , by name. And how do we know that is working?

So let me see, we have this deep fear and I think I can create one more. Yeah. Okay. So let's say, , how my name, and this is not working yet. So we need to sort and tell the application what we want to sort by. So we say here, for example, is id and here is by my name, right? So that's the first thing that we want to do.

And also we need to update the sort area. How do we do that? Here we need to have a parameter. The property right? or like the short by, and here we are the one to pass the sort by. So let's do one thing.

I'm going to change this to put it the opposite way, because what happens now is if I click, if it's like this and I will click name, I want the sorting my name to be ascending because we were sorting by other property before. And we probably don't even want to see this arrow.

So what I'm going to do is that if you're not accenting, you go to a Sunday, but if you're not extending or the, these soar by dusting equal the new one, what we're going to do is that we set the sort by, by sort by, and we always said to a Sunday, right? So for example, so you're going to see now if I do id and name and then id, right? This is a sending. And if I click here, this is already accenting by name. What we're going to do is that if the sword arrow is not let's put this year. If the sword buys not the one on the top, we're not even going to show the arrow.

So if these short by doesn't equal sort by, we're simply going to return empty and then we're going to else. If we're going to return something. All right.

So this here, so if we have, let's see how cool. So now what happens is if I have this um, uh, id, right? So the id is 4 3 2 1 0 0 1 2 3 4. And now if I click name, I have this is alphabetical order, and now this is descending order, right? So we have a component here that is going to sort our content um, depending on these properties that we have here.

Adding sorting properties

And, uh, you know, now that we've done this, it's super easy to extend our program to sort by other types of properties. So for example, we could go here and say maybe text and then this is somebody texts. And now we can put these in here, sketch text, and that's somebody text. And to make it easier, maybe I don't know, like a thousand words.

And now here you say 200 words a day, and then my journals 12 letters or something, and then

Creative interfaces. And now here, we just boot, like what we learned it's okay. Whatever. So now we have different text on each of these, in each of these cards. And how could we add a new sorting mechanism now? We don't even need to touch anything on Vue.

We just go here. We just change the property here. So description and we just change these two variables and go back to our program. And now you see this is going upwards and down and it's working? Okay. So I'm putting here description, but it's actually the property name text.

So that's why it wasn't working. So now text and text, and one thing that is weird is that it sorts by the first character, not by the numbers. So one zero is first one, two is second, and then two, zero is there to, it's not really by the numbers if we wanted to actually have it properly.

So let's say that this one has this might be I dunno, 0, 0, 0 9. And this could be like 9, 9, 9, 9, whatever. So this would have to be like this and this. So padded Cirrus.

So now what we can do is if we do this right, 0 0 0 9 12 200 1,909, and then this goes the other way. So text id, name, and text. This is a way in which you can create a dynamic component to sort your elements.

View modes

There's just one little thing. We can have modes or like you could call them, however, but I like to just put them right.

So zero, and we can say zero or list one for grid, for instance. And what we can do is that we can bind classes to our Vue components, right? Or like HTML components, according to data in our Vue model in one way to do that is like this. So you say bind class and we can say I'm going to bind the list class if one equals one, for instance.

So let's say we do that. So you see, this is the list view. And if I do, if one equals zero, then I don't do that anymore. So we're actually having this greed that I've realized doesn't work anymore for some reason, because we have now this other least inside of the container, right. and maybe to solve that, we could just add another div on the top here. I don't know. We're not going to fix it now, but yeah. So this is the grid view, right? We can still sort and do stuff.

And if we make this clause here again through, this is our list view, this was grid and list so that we just need to make this something different. So list is going to be here. If a mode equals zero, which is happening. If mode was one, it would be the grid. If mode is zero, that is right now. And if I put mode one, we go to the grid.

The only thing we need a method here that is like toggle mode and something to call the mode.

So what we're going to do now is to copy one of these header items. So we're going to put it at the end. You just put another header item and this is going to toggle the mode instead of doing the sorting. And we don't really need this here.

We're gonna maybe do mode equals zero. We do that the content is going to be list. Otherwise it's going to be grid and I don't know if this is going to work. All right. So that seems like it works and that's working and we toggle, we go to the grid. So now we do have like a toggling component. So we go from the grid to the list. I'm going to make this a bit bigger so you can see it.

So we from list to grid and, we can sort by ids, the sending, or by text the sending for example, and then go to the list and that the short thing is main thing. So here we have a sortable component that also can be toggled between list and grid views. This is all made with Vue CSS and HTML5. That's all you need.

And if we were to add more items, I can just put a lot more things here and, you know, we can have a grid with more components and stuff, and this works pretty well.

All right. And with all of that, I think that was it.

Thanks!

I hope that that gave you a good overview on how you can create a sortable dynamic grid that can change between different arrangements or different layouts in Vue, HTML5, and CSS.

Thanks a lot for watching.

It was Nono Martinez Alonso here.

Do check out the other playlists that go over how to build things with JavaScript and Laravel and web development on my channel.

Thanks a lot for watching and I'll see you next time.

I hope you learned something today.

Bye.

BlogVideoCodeVue