MUI Table with pagination in React JS | Load MUI Table with api data | React JS - MUI Tutorial

tutorial so today we can Implement material UA table with pagination okay first let me go to my application so as usual we can create a new component so it is a JS file I am going to provide the name is mui table okay so then we can use the sfc stateless function component mui table okay so next we can include one headstone tag mqa table okay after that we can include this component into our routing side so in this app.js so let me include like the path value is table so in this element point of view you can include mui table okay so next in our header side we can include one more link for our table see so this is our new menu delivery table okay so next we can start the implementation from our material UA table component I'm going to use this paper so this is for the designing purpose only here using the CSX props option we can set the width is 90 percentage okay okay this is fine so here we can include the table container so this table container also belongs to this mui material so next we can include the table so whatever common I am using it will be imported top of that so let me format it so next in this table we have to include the Header information so here we can use the tag is table head okay so in this header side we can include the row so then our element name is table row okay now the next thing is we have to include the columns so before that let me Define my all the columns okay it is kind of array so there we have to include the objects first ID so First Column is mapping to the ID and the name so in this display side we can provide as the ID okay so similarly we can include the other fields also the second one is name and the third one is email and the fourth one is four okay okay we are getting this here okay so let me include this constant variable columns okay now let me go back to our header side so here we can generate the for Loop from this react we can use the map option okay so here we have to use the table cell so table cell is nothing but the column okay so in this element first we have to use the key so key is nothing but our ID okay so similarly this name we can bind it here so let me save this one we can see the output now okay and this alignment point of view after this width I am going to include one more property margin left let me include five percentage okay now it is moved into the sender okay now we have completed our table header next let me move on that table body okay we can use the table body here so in this table body we have to load the data in this Dynamic manner so I am going to use the Json server rest API okay so let me run this Json servers TPA Json server watch db.json So currently our application running in the port number of three triple zero so we can run our AP in the 8000 okay port 800. okay new file is created and here we can remove this Command Center profile section so instead of the post we can change this into employee I am already having some data in this handy manner so let me include it here so let me include it here okay so now this is our APA endpoint URL see this returning the data so the fields are ID name email and phone number okay so next in our component side I am going to declare one use State variable rows and the event is row change use state of so the default value is empty array okay so let me save this one and then we can use the use cf8 hook so here we can include zero dependency okay so let me format this one so in this use the effect hook we can use this fetch option so using that we can call our APA okay so already we know our APA URL I mean the AP endpoint so let me copy this one we can use it here okay so then if it is having the data we can convert this into Json so next so here basically we will get the value so finally if there is in any error we can put in the console okay So currently our APA value available in this variable so we can assign this into our rows okay so let me use this row change function so here I'm going to pass this stress that's it okay since we have the data we can populate our table body okay so we can use the conditional template so first I'm checking this rows have this value if it is yes we can use the map option okay we can get the in digital draw and also the index so here we can return so inside that we can create the table row okay so next we have to include this key so in this key we can provide this index so okay our row is ready then we have to populate the columns also okay so again I am using one more conditional template so now we can use these columns so again I'm using this map option in digital column again here also we can use this index so let me format this one so here let me declare one value row of column dot ID next let me return one second so inside that we can create the table cell that's it so in this table cell we can find this value and also in this key here also I am going to provide the same value okay so let me save this one so here it should be a rectangular basis okay so let me say this one we can see the output so let me say this one and we can see the output okay see so data's are loaded currently I'm having 11 records all are loaded in the same page itself okay so next what I'm going to do is in this header let me make use the sticky header so let me use the directory of sticky header in our table so next in our header column I am going to include one style background color let me provide black so similarly for the color we can provide weight see now we have changed the color okay the next important thing is we have to include the page Nation after this stable container we have to include the table page Nation and next let me declap to use State variables so already we have this rows so after that we can include the first one is Page so the event is Page change okay so the default value is zero and the next one is row per page so the initial value I am going to provide us just to 5. so let me save this one and next in our table page natal side Row for pagination option okay so it is kind of array so we can provide Phi 10 25. so there are three options I have provided so similarly it is having this page option so for that we can use the same page so similarly next one is rows okay for that we can bind the row per page okay so let me save this one and this component we can consider as the due so next I am going to include only event on page change okay we can add like handle change page so let me Define this one it's in this top of that here event and the new page or the parameters using this page change function we can set the new page okay and one more thing it's a kind of spelling mistake okay so similarly I'm going to include one more event chains so the next event is on row per page change okay so the function name is handle so let me copy this one we can Define the function also here it is having this event so next to using this function plus E1 Dot target.value and also we can make this page also into zero and the next thing is in our binding side I mean in this table binding so before making this map we have to use this slice option we have to input like base into row per page cover just beige into Roper base plus so let me format this one and we can see the output okay see now okay we have some different error so that actually we can resolve so meanwhile if you noted so if I'm changing this into 10 it is loaded to the 10 records so then 25 it's loaded all the 11 records okay so anyway let me verify this one okay okay here so let me remove this one we have to include this page so in this page we have to bind this value and then we have to include the count also okay so in this column side so already we have our final data in this rows dot length so let me save this one see now it is working fine see now this row but rows per page fire cards it is showing 125 out of 11 records so if I'm clicking this one see it is showing 6 to 10 records so in this final page we have a single record okay so similarly if I'm changing this into row per page is 10 okay in order to our base nation is working so next what I'm going to do so this header is the sticky header so then we can include the scroll for this table container okay for this container side I am going to include maximum height so maximum height I have provided 450 see now so our table in this fixed mode but our roles are just scoring so if I am giving 5 so there is no issue so in case if I'm providing 10 a 25 so still our header is in the stable mode but the datas are moving okay so now we are in the end of the video still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 164

Keywords: MUI Tutorial, React js MUI tutorial, material UI in reactjs, how to install material UI in react js, MUI Tutorial for begginers, material UI Introduction in react js, how to use material UI components in reactjs, MUI Textfield, nihira techiees, react js for begginers, how to use material UI components, mui dialog, implement MUI tables in React JS, mui table with pagination, how to implement pagination in React Js, Load MUI table from, MUI table with sorting and paginationation

Id: out4chmZo3E

Length: 17min 16sec (1036 seconds)

Published: Mon Jun 19 2023