React & Material UI Data Grid Table Tutorial - Rendering Data Dynamically Using a REST API

[Applause] [Music] hello guys welcome to another video on the code angle youtube channel and in today's video i'll continue with tables just like i did in my last video and today's table is going to be about material ui there's a certain component in material called data grid it's a data table which is able to work well with react it is fast and extendable as you can see from the documentation here so there is a commercial version and there's also an mit version we'll be looking at the commercial version this is the mic version so i'll drop the link to the documentation in the description below so this is what we'll be doing but the data will be working with is going to be coming from an api and as we all know the api i've worked mostly with so far on this youtube channel is called jsonplaceholder so this is the public api we will be working with so as you can check the documentation here you have um some boilerplate code so i'm not going to be copying any of this i'm going to write it from scratch and i'm going to show you some of these certain functionality and also the pagination fortunately this actually comes in inbuilt into the data grid so um with all this said and done um i would like to also emphasize on the fact that um i would like you to please like and subscribe to the uh youtube channel and also please drop a comment on the type of videos you want me to to drop as you got them react angular javascript i really appreciate it if you can let me know as this will help me to create better content so thank you very much for doing that and let's get started so the very first thing i'm going to do is to open my my terminal actually so i already created my project using creation apps app so i'm just going to run npm start to open the project in the browser and i already opened it in the visual studio code so as we're waiting for this to load up in the browser i can tell you that you need to install two packages in fact you need to install the material ui call and also the material ui data grid so i will be leaving the commands with this uh installation process in the description down below so this is a boilerplate reaps templates in the browser so i'm just going to quickly clear out the header and um also create a components folder and a file called data table dot js so let's generate a template it's called data table so to show this in the browser i can just write h2 data table and then import this inside the app.js file and one more thing is to add some margin to our class so i can just imagine it's 20 px so let me save all that and then check the browser so there you have it web data ah not sybil it's gonna be table so uh data table file loads in the browser so the next thing we're going to do is so i believe you've already installed the material ui core and also the material ui the target so without that this is not going to work so next we're going to do is um import the data grid in our project so i can just import data grid from at material ui data grids okay i think that's all we need to import so the next thing we need to do is to um generate the columns because when you look at the jsonplace of the documentation the particular api we're doing which is the posts we have um the user id the idd title and body so we'll just be dealing with the id the title and the body as as the columns in this um particular project so i'm just going to create something like consts columns is of course two so it's going to be an array of objects so we have a field key and it's going to be tied with id and then the editor name this is we're getting all this from the documentation actually so there's nothing strange yes so this is gonna be id let me make it capital letters so the next one is gonna be the title so it's gonna be field name field is gonna be called title and then the other name is going to be called title and lastly the last error we'll be having is called the body so the field is going to be called body and also okay this supposed to be in quotes body and and also the other will be called bodies so i think that's all for the coulombs so the next thing we're going to do is to load out our api and to do that we make use of the fetch api the last video i did i make use of axios today we're making use of fetch so before i do that i need to import some react book custom reacts look under the use dates and also the use effects custom oak so to do that to make those work we can create a make use of the use data um if um react hook by declaring a variable any function so the first one is going to be the we're going to call the variable table data table data and then the function is going to be called set table data so use dates and we set it to an empty array so the next and final we're gonna be making a reference to is the use effect we know this loads immediately the page loads in on the browser so use effect making use of fetch api we can just say f e c c h i don't know why i get confused anytime i want to spell fetch so we can just get the the url to that from the jsim odor so i paste that there then what happens is we get a promise it's a transit promise so we can just say dots then and then subscribe to that and then assign a variable called data and we set our data as json format so i can just say data.json and also we get another dot then and let's try to log the data to the console to show um we are getting we are doing the right thing so i'm just going to say console.log data so let me save that and then check our console so there you go we have the data android posts loaded to the browser so we can now display that in our table the data grid components table coming from azure guys so to do that we are going to call this function called set table data and then assign our data coming from this place whether to eat so that makes it perfect for us to do or want to do that so finally i'm gonna call the data grid so coming from material ui so i can say data grid and close that particular component so what we can do is we can assign the rows and append the data coming from the rows which is called table data yeah then up next we can assign the columns which we did earlier the columns are these three columns id title and body and then the page size so the page size is kind of like the pagination i'm gonna make it 10 and then finally the check this is like the check box so check box selection this is the attributes the default attributes coming from a try ui so we can also um what we can also do is um you know add some styling so i can just style the height give the table the height of 700 and a bit of 100 percent so before i load this in the browser one more thing i like was to do is to assign some widths to our columns so we can also do this um this is not something out of the box it's all in the documentation so i can just assign some width so this can have a width of 300 because the title and the body have a lot of a lot of data like long data is coming from them so this kind of needs some expansion so for the body we're gonna give the width of 600 so let me save and then let's look check out the browser okay we don't have any errors which is great so let me increase this so as you can see the data displays on the page perfectly well so it plays displays on the page perfectly well so we get 10 data per uh power outputs from what we can see here so if i press next get another 10 so for instance if i go to the per page size and i increase it by zero and i save it you can see all the data we load on the page all the data it's going to 100 of them is going to unload on the page as you can see but there won't be any pagination but if i reduce it to something like let's say five or let's say 12 so we're going to have 12 data per per page as you can see here so with the help of imagination come to the next page and also we can apply some sorting either using the body the id or the title so that's it's for this particular video you can check the documentation which i'll drop the link in description for you to see how much you can do with this you can also select some of the rows and then maybe delete it if you want you can add some delete functionality to this so that's all i'll be doing for this particular component in the material ui so one more thing i'm gonna do is um i'm gonna look at one final table probably um in the next coming um days and before i do that i think i might also create a video on how to set up reacts using webpack and parcel just stay tuned and um let's see how that goes so thank you very much for watching this particular video once again please like and subscribe and drop the comment on the type of videos you want to see i would like to hear from you thank you very much for staying tuned and i'm going to see you next time bye guys

Channel: The Code Angle

Views: 41,845

Keywords: material UI Data Grid Tutorial, material ui, material ui table, data table, react, rest api, rest api tutorial, fetch api javascript, fetch api react, fetch api tutorial, react material ui, react material ui tutorial, mui table react, material ui table tutorial, the code angle, material ui pagination, table in react, material table in react, react and material ui, table header react mui, React & Material UI Data Table Tutorial, MUI Data Grid Table, Data Grid Tutorial

Id: S_mgSHCWCmA

Length: 13min 12sec (792 seconds)

Published: Tue Apr 06 2021