Material UI - Table Sorting and Pagination

[Music] all right so in this tutorial we're going to be looking at tables well i've already done a video about tables but i did get a request to do sorting and pagination and oh boy so i was like okay let's go through the documentation and look at it and let's let's do something that makes a little bit of sense and maybe it's just saying something about me as a developer but looking through that documentation that material ui provides i was like huh this is this is kind of complicated what do we need what do we not need because usually that's how i go through tutorials look at documentation as i try to rip out as much gunk as i can just keep it very small in atomic well i've gone through that process it's not the exact same thing you're going to see in their example but you can sort and there is pagination so without further ado i actually have another visual studio code open up of everything that i've gone through so let's see if i can recreate this step by step so the first thing i'm going to do is because i'm going to need more than one file i'm going to need a table header so we'll just call this the table head and then actually i don't want to rename that make a new file and i think just so i'm looking identically my other visual studio application open up here and it was table head table head table header you're just gonna he's gonna have to walk with me on this one she might there we go that works out fine so now what i'm going to do is i'm just going to copy the imports i need on over everything else i'm going to type by hand because i feel if there's there's copying and you're following along that imports are fine because i just keep them up there and you could type them in or pause the video but the actual code and logic stuff that's that would be robbing you so let's go ahead and first make the head here and so to avoid problems because these are wrapped in divs and whatnot we could do something like this but instead what we're going to do because this is going to go inside of like a table i think a container an actual table um like parent element here we're going to we have to keep in mind we don't want it's going to complain if like divs are the child of other elements when everything renders so let's just keep it simple with the table head here and if you're thinking you know jesus you're separated into multiple files i think for something this big it makes sense too maybe that's just me but let's move this on down get rid of this we're saving this here and then let's make a table row okey-dokey so the next thing we're going to do is we're going to do a table cell seems pretty straightforward enough and so then this is where things get a little interesting so we have the table cell but then we start to run into this other label or component whatever you want to call it we have called table sort label and so we're going to come down into here and we're going to give it name okay cool awesome stuff so let's just save this here it'll indent everything in and for table cell what i'm just going to do here is what i found most minimally is we're going to give that the key is the name now you may be able to delete that and make this still work like i said i was just chopping stuff out until i got the smallest code possible to work because we could always make it more complicated but let's go ahead and i'm going to move this later because i'm actually going to import table header into another table component here but let's just check this out here come down in here and so we have this right here and we see when we hover over it has the arrow and that is because that's the table sort i do believe the built-in icon here so we click it nothing happens something will happen eventually but that is how it's going to look when we hover on over it so let's come in here and let's make another cell because rather than do this in like a loop i feel that this is much easier to do if we just hard code a very small example so we have name we have age all right awesome stuff but you know we click on this not much is going on boohoo that sucks uh are we are we lost forever and the answer is no so let's uh space some of this stuff out here and i know it's kind of uh rough when you have repeated code here but let's come into the table sort label here and i kind of want to show you all some stuff so one of the values that we have in here is active so we could come here we could say i believe true and so active means that it's the one that's being focused on that it's the thing being sorted it's the one that's you know actually doing um the bidding of whatever the end user may be so since the table sell the key is name here if we wanted to do something like and this sounds really stupid but just follow me here and it'll say right here yeah comparing to itself is potentially pointless we get that but we're going to leave it like this because i'm going to show you how i thought through this process so we have that here we have name equals name let's copy and paste and just move that same logic down here and for this one is going to be age all right awesome these two are both active they won't be but right now we'll just make them both active so the next thing we want to do is direction so there's not much going on we could do with this right here we could have ascending or descending so that means do they increase or decrease as the the column goes up or down so this here we're going to much like the active we're going to be toggling later depending on whether the values change in the state we're going to want to change the direction of this but for right now just for a visual cue let's just keep it the same maybe we'll say descending on this one just so you see them visually like that so the next thing we're going to need to do and i'm going to comment this out for a moment is we're going to have an on click because this is what's going to get triggered and update another component when these get clicked because eventually um when we do something like this let me come in here and just when we click this you know we want to go from ascending to descending so we want to be able to flip the arrow and it does animate it does flip up and flip down we do want to do that and so by clicking this on click that's what fires this all off here so this is where it starts to um kind of have to be like really really follow along here because this is going to jump into another file pretty quickly so the name of this is gonna be create sort handler and we're gonna hard code crap i can't type i need a better setup for my desk we're gonna come in here and copy the same thing now this is where loops take care of this right we could come in and if we're looping through we could say you know object.name here and you know we could put you know in this on click we could load that in through a loop two and that's that's fine but i don't feel that that's going to necessarily help out a ton when you're trying to figure out okay where's the array at what does it look like hard-coded values for this stuff are much better so we got all this going on so let's actually let me look at my example here let me go ahead and just prime this for props because we are going to have to bring stuff in but in the meantime let's go ahead and just uh comment this out and so so far we're like pretty much we're insanely close with the header but but what we're going to do is we're actually going to make another folder we're going to name this table content and this is where like the meat and potatoes of this whole table madness is going to go on here so let me go into there and copy and paste from my other project what we need for imports this guy up here okay cool so then instead of table header let's just do we'll do table content there we go finally updated there so like i said this is where a lot of the good stuff is going to be happening so with this let's just come down here let me scoot my other project on over and let's get rolling so we're going to come first and make the table container this is the thing that's going to wrap around the entire table as you could probably figure out and then we have table all right this is pretty easy and ah what else do we have here okay so there's our table that's not what i wanted table header hey so that's kind of cool so this isn't the table head because that's an actual like component there obviously from table head and don't worry i will show these side by side eventually so let me delete this because i leave this backs out of it because we're just bringing in content and we're going to keep it like this for the rest of the tutorial so we got this going on right here let's go back into the content here and so we have the table header and we are going to inject props into it we can't avoid it we have to do it so let's go ahead and think about this right here because this is where it gets to the point of you kind of have to know what you're doing in advance there's not necessarily one definite logical step i think you need to do next so i'm going to try and sort that out here so what we're going to need a hundred percent is a loop we have to loop through this i thought about hard-coding it maybe there's a possible way loops are going to be the only way so we're going to need an array of some kind so let's go first make an array so i'm going to make it outside of our component here we're going to name this row information actually wrong there we go make a guy named bob johnson his age is 69 if you comment nice down below i will like your comment then we're going to have jenny johnson and we're only getting we're only going to have two rows in this table i do not want to do an information overload and just show out everywhere with information and she'll be 25. they met they met online and and they're still together today so we have bob johnson and jenny johnson all right cool awesome stuff here so okay what's next so what we're going to want to do then is have a way to update change the ascending the name and how many rows are going on in the page so we kind of have to look a little bit far ahead now so we already have this row information but let's just think here of what we may need because we have to set up state as we're going forward here so let's just go ahead and make this and i'll explain these tidbits as i go along we have order direction we have set order direction and if you remember we have ascending we have descending okay so we have direction here that's a valid attribute of table sort label so you could probably understand that this is going to be used to fill in that information so right now we're sending it to ascending because that's the standard here let me move this over or at least the standard we're setting for our application and let's come in here we're going to have value to order by then set value to order by if you haven't figured out already this is gonna be pretty long tutorial name so as you can see over here we have active okay so maybe that's a tip off to us that the value is going to dictate which one is active currently right here on line 14 and right here on line 27. okay we're not going to use these just yet but let's go ahead and make the rest of the state here now that i'm looking at it so we're going to have page and then set page and this is going to appear at the bottom of our rows and that is say we only have you know do we have 20 items but we're only showing 10 per page where we're going to want to be able to click next and show the next 10 right and each one of those is a page and they start at the value of zero so this is going to be the rows per page and since i only have two objects in this array i'm only gonna do one just i'm gonna keep it i'm gonna keep it stupid simple there so okay cool we have this now so since we have props let me cover this up because we're not doing anything quite yet we're interacting with our web application here we have props coming in okay so we kind of want to take care of the uh the active and then the direction right here so let's go ahead and do that so let's go into our table header value to order by equals and maybe it's bad practice no one at least has told me otherwise i when i pass a function or a value from one component to another i like to keep them the same because i don't want to do a mental translation halfway through where i have a function or a value that has two names so let's come into this line here and do order direction as order directions we're going to come up here into our header and we're going to catch those things all right so now that we have value to order by and order direction let's go ahead and come down here and so where we have active we'll have if let's copy that there if the value to order by is name then it's active so right now it is name but if through a function which we're going to write in a moment changes it to age this will be false and then this will be true down here so really this is why a loop makes sense for this but we're going another direction here so when we look also at the the direction we're not just going to want one solid value here so well we are going to have one solid value but we're gonna have oh my bad we're gonna have a value to order by is name we're gonna give the put in whatever the order direction is otherwise it's just going to be ascending and so we're just going to copy this right here add that guy in we're going to come in down here we're going to do the same thing except we're going to switch this out with h cool so now that we have this here whether it's active um or not actually come in here it shouldn't blow up sweet so we see that this is inactive and that this is active because the arrow is present so we solved that problem we can't see much going on with the direction but just trust me it works so the next thing we're going to want to do is looking at my code on the screen that you all can't see is that we're going to want to now handle the the sorting request so we're going to come in here and this is what we're going to end up passing oh wrong side here coming to content here and this is we're going to end up passing to our header for our on click okay i guess my paste didn't work and will request sort it's going to take an event in property and so we're going to have our what we're going to say whether or not it's ascending so we're going to have our value to order by is the property that we're sending on in and the order direction is ascending whether that statement is true or false sorry for that let me scoot this on over here this is going to determine whether or not it's descending or descending and a lot of this you could probably just copy and paste yourself into your own tables because some of the stuff is starting into the what i've used the essential pieces so set value to order by is going to be the property that's coming on in so when we click on this it's going to send the key in which is going to be the name so that property is going to be that name coming on in likewise if we click on our table header and its age that property is going to become the set or the the value to order by and so here's where we're setting the order direction so if it [Music] this is this is just helping out when we're we're selecting it and we're just sorting things in their their correct order so this is how we're setting the order direction and let's see here so me looking at this and a request sort handle request source so now we're going to be bringing this into here so we're not quite out of the woods yet though so we're sending up age we're setting up name here so we have the create sort handler so let's go ahead and make that function actually and utilize the handle request sort so we're going to create sort handler i believe this is called a curry function it's like a function that wraps itself in another function so i don't know off the top of my head right now i'm drawing a blank but don't yell me too much for this not not everyone who makes every tutorial uh or makes any tutorial knows everything has everything memorized sometimes a lot of what we do when you figure this out is knowing just enough or sometimes being lucky with our guessing so we're sending in the event and we're sending in the property okay cool so now this is gonna lock and hook up into this guy so whenever we click our header now it's going to change this over here so hopefully nothing blows up at this point sweet so now that that's active that's going to be i believe ascending descending ascending descending and that's what this toggling motion over here is doing likewise this is selected ascending now it's descending that's not too bad so here comes the next part so we're going to need a way to loop through all this crap here and we're a lot farther than you think we are so we have the table header set up awesome but we're going to need a way to go through our very very very tiny array of two people here so what we're going to need to do when i say so a lot because i'm trying to is kind of my pause word we're going to need a function that orders everything and then we're going to have to add some array methods on there to handle things like pagination that we'll see the calculations for in a moment so what we're going to want to do and let me scoot my other solution on over here is that we're going to come in here and i'm just going to go ahead and type this out and this is going to be called sorted row information and it's going to take our array of row information and this is where you just have to you just have to bite down and do it or just copy it because it's it's common but we're going to use a comparator which is going to take the order direction and the value to order by cool and then what i'm going to tell you we're going to get is we're going to get an array coming back and you may be thinking i'm putting the cart before the horse here but trust me it'll work itself out so we have our person and we gotta have our index here we're gonna have a table actually that's not what i want to do i want to use this because i just want to explicitly return it there okay so we're going to have our table row and i know that this is potentially volatile what i'm doing here but as you have more advanced data coming on in you could set the index to something a bit more stable so then we have our table cell and i'm telling you we are going to get a a person.name object here and let me copy and paste this and now we're going to get a person.age okay i could save this but it's just going to blow up because i haven't written any of this stuff out yet so let me just move this on over because we're going to need some space and this is essentially the idea you're going to want to have you're going to want to have some kind of function you could write it and sort it somewhere else but this is going to return a sorted array dependent upon the values that get changed when you click these guys up here or gals whatever whatever you want to name it by now let's go ahead and well write those so the first thing we're going to want to do is come up here so we have row information let's come down we have const sorted row information we're going to take in a row array and our comparator now this next line i thought was like kind of wild i was like why do you need this but this actually stabilizes the row information coming on in so you're actually able to sort it because i tried without this line of code and it blows up so we have the element index and this is just what we want to return so this is how we're going to be able to sort the the different values you know line by line here and compare them so their stabilized row ray here we're going to want to sort and it's not as easy as just saying hey sort this we're going to make a constant variable called order and if you're thinking compared to or something built in it is not it's actually a just a regular sorting pattern i actually had to brush up on a little bit of my old computer science and be like oh yeah i remember that like five years ago when i went over it so we got that here we're gonna write compared to her in just a moment but i'm gonna write the rest of this code out return order and that's just a simple one liner right there my bad and this is what's going to write out or return us our now sorted array right here cool so we're going to come above and we're actually going to write our comparator give me one second to look over this to make sure i'm doing this in the correct manner so as we have down here we have get comparator so that's what we're actually going to write because that's what we're passing on in here i just want to keep everything kind of like stable and have the same name going that was my phone going off let me shut that off but the volume was uh completely silent there so we have a function get comparator i'm gonna have the order and then order by i could equally use direction and value to order by but i'm just keeping what i have on my other screen so we're going to return order which is this right here so this is our essentially our toggle that is going to dictate whether or not what we're returning is ascending or descending depending upon how many times we click the top of the row and so this is going to lead us to another function we have to write and we're in the section now where if if you're getting a little lost because it took me a little bit i had to do a little bit of refreshment here i mean call me an idiot but you know i'm just like a lot of you out here just trying to get by and produce okay code this part you could you could copy the part right here is kind of the mandatory necessary stuff with the sorting unless you have your own way of doing it you can just go ahead and copy this part right here so we have our function descending comparator which is going to take you know the values as they come in and then the order by here so this is what this is essentially saying in this line here order by let me get down to this section and that if you know the value of b whether it's name or of its age if it's less than the other value it's being compared to so say it's going to be you know 25 uh if 25 is less than the age of 69 return negative one and so this is kind of the pattern that we establish and repeat here likewise if it's greater than we're going to return one otherwise return zero so we have this here and let's save it what do you know it works and so that is one way you could do the sorting on here yes i know i only have two lines in here in the rows i think that was easy to show and describe so we have that but we still need pagination pagination is actually really neat when i got to it because i was like oh crap they give you like a lot of stuff free out of the gate so my password fires off right there let's go we do not need the header anymore i do believe so let's bring this on over a little bit and then right below our table container is our table pagination and so it's going to have some attributes here that we need to fill in one of them is rows per page option now it's kind of a mouthful but i'm just going to have since i only have two items i'm only going to want to toggle one or two of them component so i believe that's what's going to be wrapping this we're going to have that set to div just per the documentation there so the count is actually going to be the row information dot length so this is our like person array up here essentially rows per page is going to be equal to rows per page that we set above in our use state yeah here we go rows per page right here so so far it's uh set at one page equals whatever our page is i believe that's set to zero because it starts at zero so the first one and so this is where things don't get tricky we just have to fill in the functions so then we need to handle change page and then we need to do something on change rows per page because remember it's not just enough to say okay the page change but then the amount of rows change because they're intertwined so let's go up here and let me adjust my other screen here and let's just do handle change page we're setting up an event because we do for nearly ever every function we write so whenever handle change page that's kind of awkward to say rolling off the tongue there what it does is sends up the new page and that just tells us hey if we're on you know page you know two set that to page two that's all that's doing nothing any more complicated than that then we have a content will change rows per page we're getting an event i might as well be consistent just wrap all these coming down here and we're going to set rows per page if you use typescript or something you wouldn't necessarily have to do this but i need to get better at using it event target value and then this here is the base so is this this is going to be base 10 because we're gonna be working in like zero through nine and then we're setting page because as we change the rows if we're on a page and then we set rows to like 100 per page and we're on page like 10 you know there's going to be nothing on that page so what we're going to want to do is every time we set reset the rows we're going to want it to default back to the beginning here and so i don't think this is going to blow up all right so we have rows per page we have two actually something did blow up so let's see what we did here so look at my other code and i see that handle change handle let me rewrite this so that matches up there ah i know exactly what i did so what happens is we're gonna have to take our array and we're going to have to do some slicing meaning that we're going to have to change how much is actually loading based upon the pages and then the rows and all the other stuff so this is another thing that you could copy and paste as well this is the only way it's going to work and so this is the calculation that they do and i hope that in future iterations they just kind of automate this for you so something still is broken so let's check this out down here so my rows per page options is one two div row information length rows per pages rows per page page set there handle change page so that actually looks really good and looking up in here this looks good too the slice the map because as we could see as we reset this this comes on in so let me look at my function up here it's a typo there we go stupid typos so now we're able to sort this here see even when i did this yesterday i spent hours grueling over this you still get it wrong when you reproduce it but if i wanted to add more people in here or i'm pulling it from somewhere else i could equally do that but this is sorting on a table and pagination and i know this is a long video but thanks for sticking with me like share subscribe and i have more coming out soon and thank you very much make requests and all that other stuff if you need some in the future

Channel: Jesus, Take the Compiler

Views: 6,528

Rating: 4.8965516 out of 5

Keywords: Material, Material UI, React, CSS, Styling, React UI, Material UI React, Material table pagination, material table sorting, material ui pagination, material ui sorting

Id: sW6HEiNDJ_s

Length: 46min 48sec (2808 seconds)

Published: Wed Oct 21 2020