React & Material UI #20: Table Pagination

hey everyone in today's video we're gonna look at how you can implement pagination into your material UI table as I mentioned in my last Mattel UI table video which if you haven't seen before and you're not familiar with tables you should definitely check out the table is probably the most complex component that Mattel UI has just for the sheer fact that there's so many things you can do with it you can have headers you can have sort of filters and sorting you can also have check lists and stuff like that you can have page nations there's just a lot you can do with it and a lot of it is really custom code to implement it I was gonna go over sorting as well in this video but I realized most of the sorting code if you're trying to learn how to sort with your table you should pretty much just copy the way Mattel you why does it it's not really anything extraordinary and a lot of its just sort of math and pure JavaScript operations that they implement into their tables itself now when it comes to pagination however there are a couple of different ways you can do it and if you were to look at for example this big table I have over here and look at the code we'll see here this is probably one of the most streamlined examples they have of pagination and the code sort of goes on and on and on and on and on with a lot of different things and it's not very easy in fact around a year ago I was trying to implement one of these big tables with pagination and sorting into my project and I had no idea what it's doing I pretty much was copy and paste of the code and looking at it from a year later and I'm still sort of intimidated by how difficult it is and by the way if you find value in this video please consider subscribing leaving a comment or liking the video I try to reply to every single comment I don't know if that's a good thing or not if you know I would feel sorry if I was leaving a comment I knew the Creator was gonna respond but I don't know it seems to be working so yeah I love interacting with you guys and I love the positive feedback that I've got from these videos as always if you have any suggestions please leave them below so let's sort of jump straight in if you remember the original video that I did the simple table code is actually pretty straightforward we have pretty much the data we want to put in just going at a very high level overview and then essentially we have a header a table head component and we're can define all the table headers and then we have sort of a loop that goes through all the rows and creates a row with all the cells for every single part of the table and in our example we were using a list of desserts each dessert would have a name calories fat carbs and protein now one of the helpful things is to look at the page ination component that module UI complies on its own you can see here that page nation is actually a separate component and you can use pagination in for more things than just tables for example here's some patron nation for example if you are displaying things on the screen unrelated to a table you can see it has something as simple as count you can also add props like disabled you can add different styles to your pagination you can also for example have different buttons in your page Nations so for example buttons that will go to the next page buttons that will take you to the last page depending on where you are and all different ranges of page nation however if you scroll to the very bottom will see here that they have a specific table pagination that is used specifically for tables and this is a separate component as you can see here it's imported as table pagination and I specifically want to look at tables pagination this table pigeon nation component outside of the table just so you get a gist of how it works without the table and without all this code sort of being here to sort of clutter things up just so you can see this sort of core of what it's like you can see here that this is the actual table pagination component and in the main example you pretty much just put this under your either under or inside of your table container depending on how you would look but it comes after all the rows essentially you see here we pass the standard component prop which is set to div you can pretty much just leave that you can have component set to paper and it just determines the wrapper that this component will be in whether the wrapper is a div a relative or whether it's a paper component etc etc count here is the actual count of all your rows so for you for you can see for example here we have set that to 100 and if I were to scroll up you can see we're on page we're looking at items 21 to 30 out of 100 so that's where this gets used then you can see here we have the current page that we're on what we want to happen when we change the page how many rows we want for page and the on change rows per page so we're going to see here if we look up how all of these interact so first things first we create every AK state and that state will just tell us what page were on we can see here they use the default as page two but in reality most of the times you're probably gonna want to start your table on the first page it's sort of weird having your table load and automatically be on a random page other than the first page and then we have the rows per page so this is also a state variable and this can change a lot and it's also worth noting for this prop rows per page you can there's also a variable that goes good with it and it's called Road rows per page options and you can pass in an array of options that you want in your page so for example if you want the user to be able to select between five ten and twenty five if we scroll up here you can see that's sort of what they've gone ahead and done here so now if we come back we can see we have the handle change page and all that we'll do is we pass we pretty much as use our state variable and set the page to new page these parameters are automatically passed in as part of the components so you don't have to worry about any of these being passed in and then this one here which is handled change rows per page so when you change the rows per page you will be setting your rows per page and also setting your page to zero so that it resets and it shows the first page with the updated rows and that is basically basically how the table pagination works now I'm gonna go to my code sandbox which by the way you'll be able to get the link to in the description of this video so you can play around with it fork it play around with it make it your own type of thing and you'll see here that what I have is just the very basic table example with pagination add it on to it and I'm gonna show you exactly what I added and you'll see most of it is essentially just what we saw here but there's also gonna be some things we have to add to make it work properly with the table itself so first of all let's go over the original changes we can see here that I've set the page to zero I have a page for oval state variable I've set it to zero we have our roles for page just like in our page in is an example then these two functions right here handle page change and handle change role per page the exact same as we saw in this pagination and you'll see here if I scroll down to the bottom I have put my table pagination thing right before the end of the table container and that will make it so that it shows up at the very last row now let's look at sort of everything I had to do in order to make it work properly well as you can see here I added a row per page options array I said two five ten and twenty five and just a side note if you look at the mock data I pretty much have the same mock data as they have in the examples but I got lazy and I wanted there to be more rows so I added a bunch of different gingerbread rows in there which is why if I schools to the table you'll see things like gingerbread two three four five and six I just didn't want to think of a dessert names to add that in but um so that's one thing I added in now let's keep going back to the differences so one thing you'll notice if I go back to the original code you'll see when we want to go in there really complex example that has sorting and stuff like that when they want to go ahead and map through all the rows to display all of them they pretty much take this function stable sort Rose get comparator and then they do a dot slice and a dot map on it normally without any patron ation without any sorting you'll see that it's actually pretty simple all you're doing is you're mapping through a list of all the rows now the only difference is here that what we're doing number one is they are sorting the rows and then they are splitting the rows up depending on what page we are on so because we are on we're not doing any sorting and we're only doing pagination we're only gonna look at this dot slice essentially we are gonna be calling row slice and then we are gonna map through that now you can see here if you're not familiar with slice what is that what that is going to do is when you you when you use slice on an array the first parameter you specify is the starting index of the array and the second parameter you specify is the ending index of the array and what it'll do is it will make a new array that has only those elements and I can sort of let me open up paint and sort of show you a bit easier so for example and let me zoom in so you guys can see it and I'll make this brush size a bit bigger if let's say I have an array and my array has like letters ABCD in it and this is index 0 this isn't my 1 2 & 3 if I were to do my array dot slice and let's say for example I put in like 1 2 3 it will take all the elements from 1 from index 1 to index 3 and put it in a new array well index 1 is here and index 3 is here so it would take BCD and pop that in a new array and that's really important to understand because if we look at how this is actually working the table rows that we are showing are dependent on this array that we are mapping through so if we only wanted to show for example if we only wanted to show for example the first five rows out of you know 17 rows in total well we can slice our array and say we want from index 0 to 4 and it will only show the elements in those index and you can see here the way it's doing that it's just taking our page the page that we're currently on times the rows per page so the page we are currently on is 0 times the rows per page which is 5 so it's gonna start at index 0 times 5 which is just 0 and then it's gonna end at page @ at the index page times row rows for page which is the same thing 0 times 5 plus our rows per page so it's so that's gonna be 0 plus 5 which is gonna be 5 so we're gonna go from index 0 to 5 the rows we are gonna be showing are in array indexes zero to five now when we switch it to page two all of a sudden page becomes one so we're gonna show everything from index 1 times 5 which is 5 - 1 times 5 plus 5 which is 10 and that is how this slice operation work is working it looks really complicated when you see the example in code but if you sort of just break it down it becomes really simple and all we're doing is we are just making a new array from our original you know desserts array from indexes 5 to 10 and we are displaying all of those now that is really important to understand and once you understand that there's really not much to this there's only one other thing that you use to make patron ation look nice and that is for example if we get to the end of our table you can see here that it shows the last two the last two indexes the last two items in our table because obviously we're sorting by 5's and there's only 17 items so we're showing item 16 - 17 16 17 but there's not enough to fill up the whole table so what they do at the very end over here right after they finished displaying the rows is they create blank rows are yeah blank table rows for every single rows that they are missing out of the thing so we are missing three rows here because we only have 17 we're missing row 18 19 and 20 to display on our you know five rows per page so what they do here is they create three empty rows so it takes up the space so the table doesn't like you know randomly shrink when you go here if I were to for example comments out you'll see when I get to the last page the table will automatically string shrink to that size and you can see if I'm just like you know trying to go through all the rows it's sort of not a good user experience sorry that was my runescape runescape notification it's not a good user experience to have the table just sort of shrink so all they do here is they pretty much make a separate table cell at one table row that takes up the space of the amount of anti rows times the amount of height each row takes up so each row takes up three and we have we should have three empty rows so 53 sorry pixels and we have three empty rows so it takes up height 53 times three and this empty rows is just calculated with this very simple mathematical formula it's just the rows for page minus the minimum these are the rows for page if for example you have an empty row or the rolls that length - how much page how much pages you have in total and that is pretty much how pagination works like I said looks really complex on the surface but once you sort of break it down into these individual parts it becomes very usable and very easy and if you're interested in doing sorting and selecting I highly recommend sort of just copying what they have on the on the documentation because it sort of looks very complex as well but once you break it down into parts it's sort of the same way and there's not really any way you can do it to sort of deviate from the way they've already done it but yeah if you found value in this video I hope you consider subscribing leave in comment like I said it really helps with the channel it helps with YouTube's algorithm to get these videos out there and I'm really grateful for all of you watching and finding value in these videos it really means a lot to me that it's helping a lot of people and I hope I can just continue doing this every single week so thanks a lot for watching hope everyone staying safe and I'll see you guys next week

Channel: Anthony Sistilli

Views: 28,290

Keywords: Material UI, Material UI React, Material UI React Table, Material UI React Table Pagination, Material UI Table with pagination, Material UI Pagination table, Material ui table pagination example, MUI Table pagination, MUI pagination, Material UI Pagination, MUI Table pagination example, Material UI Tables, Material ui table example, Material UI add pagination to table, Material UI Table sorting

Id: C5hGv5-A_Ik

Length: 14min 34sec (874 seconds)

Published: Sun May 31 2020