Quasar Vue's QTable (3/6) - Loading State, Pagination, and Sorting

hello everybody and welcome to this live stream or chances are you're watching this after the fact on quasars loading state pagination and sorting so there's one part of this video in particular that's going to take a little bit of time which is dealing with server-side pagination so i'm really excited about that because quasar makes it surprisingly simple to do um but that's where the chunk of this video is going to be and if you like this kind of thing if you like learning about um view components and in particular quasar components which in my opinion are the best out there then check out quasarcomponents.com and i will see you on the other side basically i teach you all 72 of quasars components we're also going to build out youtube's ui we're also going to um build out a live chat app using laravel and quasar and a whole bunch of other cool stuff and there's like some other kind of cool bonuses i throw in there so definitely go ahead and check that out if you're interested in learning about quasars components and without further ado let's go ahead and get started so in order to do this uh video today we're gonna have to go to table.quasacomponents.com dogs so this is an api endpoint that i created for you so that you can very easily deal with paginated data so you'll see here we get a whole bunch of data and it is paginated we get 15 records um per page and then we get all of these in this uh this metadata here to let us know about the pagination all right so we're not going to need all of this metadata but it's basically a fully fledged pagination um working api so definitely go ahead and check out that url and explore this a little bit before we get started but the main things i want you to note here um we've got current page uh we've also got if i scroll right down here uh total that gives us the total number of records that we have and we're going to end up needing that later on for server-side pagination all right cool so now you know what that is i might actually go ahead and copy that uh paste it in here and then comment it out just so that we've got that at the ready and what next so basically this is by the way is based off of a blog post that i did on dev.2 so i'll include a link for that so you can go ahead and check that out and the next thing we want to do is install axios so if you don't have axios installed already then we're going to go ahead and say yarn add axios that's going to go allow us to actually grab the data from that endpoint we were just looking at so it looks like i didn't have it installed so let's going to go ahead and get that installed sweet close our console out and now we can come up here and say import axios from axia so that we can start using it now in setup here we want to have a loading state so let's say const loading is equal to a reference and we'll set that reference equal to true by default so when this first starts the table will be loading and then we're going to say const dogs that's going to be our data and that will be equal to an empty array so obviously we're going to have to grab the data from this endpoint and whack it into that empty array now we want to do all of the columns so let's say const columns is equal to an array and i'm just going to smash these out so we've got name equal to name this is just stuff based on that endpoint in there and we'll also want to label for that name which will be name we want a field for that which is going to be the name field and let's align it to the left there so let's copy paste that down maybe three times how about we just do three columns we'll keep it simple now this one is going to be age and then this one is going to be email now usually for numbers i like it to be aligned to the center so i'll set that equal to center and i think that's about it for the columns next we want to expose all of this data so let's come down here and expose it to the template save it and we're going to need ref that's why we're getting that squiggly line so let's yank ref out of view okay so we've got our column set up now we actually need to fetch the data from this endpoint and then update dogs with that data and we're also going to change the loading state while we're at it so i'm going to do something super basic to begin with we'll just say a get request to that endpoint we'll go ahead and grab that i can get rid of this comment now since we're using it and then we're going to say dot then so once you've gotten that data response let's pull out the response and we'll say dogs dot value is equal to response dot data dot data now why am i using the word data twice there i'll show you why if i control click on this when i say data that gives me the data of the response all right so that gives me this entire object here then i need to pull data out of that so it's kind of an unfortunate thing where we have to use the same word twice there and it kind of um confuses people sometimes but data gives us the object which is this response and then when we say data again it actually gives us that data there okay so hopefully that made sense so that's going to set that the next thing we need to do is say dot finally and then we're basically just going to set that loading state so say loading dot value is equal to false there we go so that's basically all the behind the scene stuff that we need to do now we can actually use all of these values here to get it to work so we come up here we can now say i'm just going to scroll down to the blog that i've got down here this part's actually surprisingly simple g dash table right and then in that table we want to say the color is equal to secondary the reason i'm doing that is to show you that you can actually set the color of that loading bar and it basically respects the color that we set here on the table now we're going to say loading is equal to that loading variable that we've exposed rows is equal to the dogs and then columns going to be equal to the columns save that and there we go if i refresh the page you'll notice that we get a loading state for a moment there check this out see how that'll see how we get that little loading symbol as it loads the um loads the page so that's kind of cool and that's it everything's working that's how you do some basic loading state using quasar but of course i've got a lot more to share another thing we can actually do is override that loading slot and this is really cool i'm grabbing this example from the quasar docs um is there anything else i need to change here uh no we probably won't need the color though since we're going to override that ourselves i'll leave it there just in case so now what i can do is say template and then we can say hashtag in other words the slot loading i want you to dig into that slot and i want you to put inside of there q dash inner dash oops spelt that wrong in our dash loading there we go and then basically we can say showing to say that this is going to be showing this inner loading and then set the color of that equal to secondary let's go with that save it and there we go it just means that we can override the loading slot there which basically gives us access to this entire table and you know what let me just set this equal to true so you can see what it looks like and there we go then we get that beautiful loading spinner i actually think that looks better than the default loader that we get from quasar so that's pretty cool all right so let's just bring this back to loading here and what's the next thing we're going to explore all right so next i want to show you pagination and modeling pagination as well so if we come down here we say const hagination is equal to let's make it a ref to an object here now let me show you some of the stuff that we get with quasar pagination we can say sort by and that means that by default we're going to sort it by and we'll say the name in this example we can also say descending means that it's going to be um whether or not it's going to be descending let me just fix the spelling there and we'll set that equal to false for example and so these are less pagination related and this basically allows us to sort things uh from the beginning when we're dealing with pagination so that's kind of cool but the more pagination related stuff is this we can say the page is equal to one and then we can even say rows per page and set that equal to something like three all right so notice that by default the rows per page is five but we're now going to set that equal to three and now what i'll do is i'll expose this on the template like so and all we have to do is now model that here on the table v dash model pagination right so we've got the special pagination modeling i love how view three makes this easier by the way rather than using that weird dot sync stuff we can just say model the pagination and let's set that equal to pagination all right so now the pagination uh object that we've got here is being modeled up here and that's why we're now only getting three per row sorry three per page and we can say next next and we can skip through the pages like that now if we change this from page one to page two notice that by default it's going to take us straight to page two so that's really cool we have total control over the pagination if you wanted you could even like have your own pagination component um that basically uh uses this models this bit of data that would then update the table so that's a good sort of idea of what you can do with pagination uh so i'm going to scroll down the blog a little bit more to see what else i've got here now another thing you might want to know about is rows this option here which is rows per page options i know that's a little bit of a mouthful now we can give this an array and basically this allows us to go to this rows per page is records per page drop down and by default there's quite a few options there now what we can do is change those options by saying for example 3 maybe 5 10 is probably another common one or maybe 15 and then 0 represents all okay because it doesn't make sense to have a page with nothing on it so therefore quasars made it so that zero means all so if i save that now this menu gives a 3 5 15 and all um which are lines of what we've set up over here so that's kind of cool that we can tap into that what else can we do all right so this is the fun part we're going to dive into server side pagination now and i'm going to start down at the bottom with the script tag now rows for page options isn't really going to make much sense with server-side pagination because that's going to be up to the back end so let's come down here and start messing around with this now uh where will i start uh all right so we're no longer going to include this sorting related stuff i just wanted to show you that as an example we'll set rows per page equal to 15 because that's what it is on our back end um it's by default going to use 15. now another thing we're going to need here is a rose number so we'll set that to zero by default but basically we're going to have to tell the quasar component how many rows there are in total and by doing that it's going to give us the correct feedback data here so that when we click on that last button it knows what the last page is it needs to know the number of rows in order to be able to select uh to create a last page button there which is why we're now introducing this new um piece of data okay so now i'm going to change this up a little bit and how about we say const fetch dogs and we set that equal to a function and we're going to pass through the page number there all right so when we fetch the dogs we're gonna say this is what page i want you to start on and by default we set that to zero in other words just the um the default page and now let's just grab all of this and whack it in there and basically play around with it to get it to start working uh so we're going to throw in some parameters here into this request and then we'll say page is equal to page so this is pretty much the same as saying page is equal to whatever was passed through here so for example zero and it's just a nicer way to do it in my opinion i rather do this in javascript rather than doing it in one big string there just looks a little bit nicer to me um so axius allows us to do that all right so now it knows what page it's going to be jumping to next when we're done we're going to say dog stop values equal yep that's all going to be the exact same now we're going to grab the metadata so the metadata we want to grab if i control click this link here is basically all of this stuff here all of the pagination related stuff okay so we can do that by saying const meta is equal to response dot data i saw that right dot meta all right so now we've got all the metadata that we can play around with and i might even just say here console.log meta and let's just get something up and running so when we start we'll fetch the dogs and i think that's enough for it to work there we go it's fetching from the back end and now they're coming here notice that we now i'll zoom in a little bit for you notice that we now have all of that metadata available to us which is awesome we can now use it uh in order to do our pagination remember that total number this rows per uh this rows number here that i was talking about before we now have the information we need to actually set that here cool all right so let's go ahead and continue building this out now we can set all of that pagination data by saying pagination.value.page so we want to set the page there and that's going to be meta dot current underscore page right so let's have a look at that in here there we go there's the current page we're basically setting that on our pagination all right so let me scroll up a little bit um where is it here page have i said that there no we should probably set that by default oh no we have got it there i just clicked on it had a bit of a brain fight so basically we're saying this page is now going to be equal to whatever the page has been passed through um on the back end there just to ensure that that is correct all right let's move on to the next one we can also say pagination dot rows per page and set that equal to meta per page right so we're basically mapping the data from our pagination here and it's telling us on the back and the rows per page is 15. so we're setting that to make sure that that is correct as well now another one that we'll have to set like i mentioned before is rows number and the rows number is meta dot total for our api this number here so there we go that should be it for mapping all of the data and that should all be working fine except now we need to actually make it so that when we click on these buttons they work correctly um in regards to our pagination so what we're going to do is quasar actually exposes an at request method here so what we can do is say at request and we'll just say handle request all right so we're going to create a handle request method we'll expose that handle request method here and then we'll actually build it so const handle request is equal to a function and it's going to take in some props that we can then use in order to do our pagination all right so basically this means that when we click on one of these buttons here whatever is being updated so for example maybe the page number will be updated on pagination when we click on that it will then be passed through to the props there and now we can tell fetch dogs which page what the new page is that we want to fetch from i'll show you what i mean now we can say fetch dogs um props dot pagination dot page all right i might even just do a cheeky little console.log here so you can see what that looks like oops all right so let's come in here i'm going to click on the next button and there we go that's working and just to show you why that works when we click on that next button request is fired which fires off this handle request method all right and in the props we've got pagination access to all of the pagination related stuff and it's saying hey the new page is page two now so what we do is we now grab that new page number and send it through to fetch dogs fetch dogs now takes in that page number and sends it through to the back end it says hey back end i want you to say that um the page is now equal to in this case it would be two all right so that's what this is doing and this is just a cleaner way of writing that query string all right so then that sends the right backend request we set all of the data we update all of the pagination values and it works how cool is that so this is actually quite simple compared to what it's usually like to deal with pagination with components especially if you're rolling up your own so i reckon this is absolutely awesome and now you can see if i go next here that's all working we can also move to the start page and that'll work and if we try and move to the mpac in fact let me show you this in the console if we try and go to the end page quasar can now figure out what the last page is because we updated we updated that rows that total rows value there so really really cool we now have pagination working with the server side using quasar and honestly to me this is a pretty small amount of code to get that kind of insane functionality so let's um get rid of that console.log and we're going to move on to the next thing which is sorting and i might actually can i do this for pagination now we're going to have to remove pagination in order to get to get this working so i might just um comment out that value oh weird it's keeping the formatting there what's going on there that's weird i don't know anyway we want to update our columns here and we're going to say here sortable sort so able is equal to true and let's just set that equal to true for all of the columns here all right so basically saying hey i want you to have a default um sorting mechanism for these columns all right now notice when i hover this i get that little arrow there and i can sort my data now i don't think it's working because we're using server-side pagination here which is kind of messing things up so i'm gonna have to look for a way to basically disable it let's get rid of all of that and bring us back to a much more basic example we'll get rid of the handle request stuff um don't worry i've got a repo that has all of this stuff there anyway save that is it's still going to build okay yep and there's probably something else in pagination that's messing it up we can get rid of the rose number now and let's change the rows per page to maybe five by default that might be enough to get this working there we go so now um the reason that wasn't working before is because we were relying on pagination and obviously you need to do other stuff in terms of sorting if you're using pagination you then need to push that serving on sorting onto the back end so now we've removed the pagination and brought us back to a more basic example setting sortable equal to true is now going to allow us to easily sort this data how cool is that um and there might be something else i missed here did i include the row key let's just scroll up you're usually going to want a rose key as well which i believe is row dash key yep there we go and we'll set that equal to id and that's basically saying um oh actually let's set it to email because we haven't brought through the id there it's basically saying that the unique value here is the email address and it means that everything is going to update correctly sometimes you can end up with update issues if you don't set a key and so quasar allows us to easily do that by saying row key there all right so now we can easily sort by email address by age see that's all working too hmm is it working though 1925. we're getting this weird one here where willis is equal to 15. so i'm not sure what's going on there i've probably done something um janky that's kind of messed that up yeah weird so i'll do a little bit of looking but if i can't figure it out then we're just going to push on here um pagination look at the page set up yeah very strange you know what it might be doing it might be doing things by string instead no that wouldn't make sense easy oh yeah because then you got one and then you got two no because then that would actually show up as the correct number that's right you can dig a little bit deeper into the docs i want to keep this video short so i won't dig into that right now but another thing that you can actually do is change the sorting algorithm so what we can do to do that let me just lay this out a little bit nicer come down here and i'll go ctrl d and kind of lay this out nicely you can come in here and say what you want that sort algorithm to be so we can bring in value a and then value b and let me just do something basic where we're going to say sorted by the email but sort of by the last part of the email right so the part after the at symbol and we can do that now by saying for example const domain a so the domain of the email is equal to a dot split i'm going to split it by the at symbol and then we'll just grab one so this is going to split that string up via the at symbol and we're going to grab that last bit there on the array which will be the domain so now let's say domain b which will be the exact same thing but we'll do it with b there we go and now what we can do is we can say return and um modern javascript allows us to do this really easily domain a dot locale compare domain b so that allows us to very easily compare domain a to com to domain b save it let's see if this is going to work i didn't have luck before so c d e f g there we go it's now been uh sorted by email address and hey if you could see what happened wrong in terms of my age sorting here then go ahead and let me know so oh it looks like it's working now maybe we just needed a good old page refresh yeah better that was related to the sort key nice so that's with sorting seems to be working fine there we go all right that's good news it actually is working [Laughter] tremendous all right so that's actually it for this video i hope you enjoyed this one i certainly enjoyed making it for you and hey go ahead and check out let me bring up this cool little banner here go ahead and check out quasarcomponents.com super proud of this we're going to cover all 72 of quasar components and all profits for that go directly to quasar in fact not just all profits um all of the money that i make through that goes directly to quasar so i'm taking in the cost of the servers um and all that kind of stuff just a way to say kind of thank you quasar for all of the work that you've done for us um and to be honest i want you to buy this series love it so much that when quasar cast eventually comes out which is going to be my subscription service i want you to love this series so much that you will then become a subscriber to quasar cast so that's kind of my selfish reason for um doing quasarcomponents.com um my i guess the concept is i get to then donate a whole bunch of money to quasar which is a framework that i want to flourish because i use it at work all the time and i love it so then by offering this for free um not for free sorry by offering this and giving all the money to quasar then my the framework that i love gets better and it means that i get the chance to serve you in the future um there's more chance that i'll get money from you then because you'll love uh the stuff that i've built so much so that's kind of my selfish reason behind this but you know it's great for you because you get to support the quasar community and you get to learn all 72 of quasars components and i think i've done about 52 videos now um and this currently isn't being sold yet this is just like an expression of interest i'll probably open up the sales page next week i actually got the whole week of work off so i can just work on that so definitely check out quasarcomponents.com and if you're watching this video after the fact it might already be live so go ahead and check that out thank you so much for watching i absolutely love building these videos and i hope you enjoy it as much as i enjoy making them for you go ahead and check out quasicomponents.com and i'll see you in the next live stream bye for now

Channel: Luke Diebold

Views: 1,254

Keywords:

Id: jnwdEtrdRuI

Length: 25min 26sec (1526 seconds)

Published: Thu Aug 19 2021