How to Create a Table in React JS | React Table Tutorial from Scratch (CRUD Operation using React)

hey everyone welcome back to go to the Disney Channel in this video we will create a table using react.js and also for card operations creating deleting updating in this operation for example I would like to add a new element to it okay Salim Acer gmail.com okay and also a pool number 66889 okay I would like to add this yeah I have added a new record here okay if I would like to edit this click the edit and I change it you slip okay yes everyone else I would like to change okay update this yeah see it we have updated this record and also if you would like to delete one of these so just click that we have deleted that so let's start guys yeah so first I have created accompanied by the name of table and also CSS file to design our table and I have imported it in the index file okay so now let's start a coding first of all I will import the react yeah first of all sorry okay so I have to create a file another for the data I will create that file data.json okay I will create a Json file here and I will add the data here in Array of objects ID for example one and also the name so for example email again yeah I have created this one object and I will copy this and to create another one from this yeah I have three objects I will change the IDF name and that's for the name foreign objects so now I will import them I will import them here data from data dot Json okay let's display this uh first of all I will create a state accounts data see data is equal to I will use U State hook state and I will pass the data here okay let's pass this data here okay so now I will just displayed data.map function callback function here current so I should wrap it in a table and also we write here TR tag first of all foreign okay so let's see it how it looks like so I will run the server and game start yes indexes in default yeah I will I will export it I didn't export there table component for default table yeah see it we have these data so now let's design it first of all we will add here the th to the table so I will use here RTR it is good to use the T head and here I will die th for first of all they have a name and then we have email then we have the phone and also let's write this CCS code here I will import first of all the CSS o.css and here I will write table border of table ta and also table TD okay have a light border on pixels blank and also I will write here order collapse collapse okay here we have now got the name didn't display it let's come vertical T head oh it is the heading yeah we have this right now so let's bring it to the center yeah so I have designed this table I have wrote the CSS code for Table Rock du and also for the th and TD so now we will add an add component to add in another row to our existed table okay for that I will create in another component are the important for example here I will add another member I will create a forum for me should have two input field foreign [Music] number yeah we have created so now we will add in a button here the button will be add into yeah so let's just import our component here under the tube on the top of the table so here I will add member let's see it how it looks like okay so it is display click so let's make it you have to make it available in another view yes so now we have it okay so let's make a little bit difference between these two this is good I will just try to some CC score to design these input fields and so these buttons I will just design all of them so as I have designed by adding add component like this okay using the CSS code yes input field art form button and that's your I have designed it and also I would like to add and another column for Action which will there will be add edit and delete buttons in that column okay so let's add that column we should add that here that I will add two buttons one will be provided the second will be product so let's see it okay we have these so now I will add here the th2 here I will add one another th column by the name of action so now we have these so let's design I will Design This edit and delete buttons okay that's why I have added this this column also but I didn't delete buttons so now let's add the functionalities first of all to add another row or another member so let's do it here we will come here to yeah for the previous design I avoid this design to those buttons and columns here first of Allah to the may add member and here I will just call whenever we click on and click them or you can see and submit okay here on Forum on submit handle for example values fabricate this component handle values and event here I mean that prevent default it will prevent the default default so now we will just uh drop the values from these input fields and we will see them for example first of all the value of name .target dot elements dot name dot value I will save this in first name is equal okay I will do it for three also for the email and also for the whole number and Ali it will be email so it will before phone number okay by this name I have now I have the videos on how I should save them in our data okay in the Json file so to do that I'll be creating another object Advanced new new member is equal to here the ID for example the ID will be for we had three you can add here a random function to take random values and also for name we have name and also for email we have mail and circle number we have the phone we can write the same for example it means like it's okay it is the same [Music] so now I have created in another a new object so now I will add to our previous object how to do that so we should use the sit function okay set data okay we should use this function so to use that so we should pass it to the add member okay I will pass it to the order number say Theta is equal to set data okay I have passed it foreign just use it here seek data previous data so previous data Dot concat new member here I will add it's pretty attack and cat new member so now let's see it what happened come around KF gmail.com add it okay yeah it has added right now okay you see it it has added so after adding these input Fields should be empty okay for to do that we should use the use rep context to use rep hook okay your zip is used to take the control of any element okay I will just use the use rate so first here I will I will create the array bar every element name Rip is equal to use or if okay usage same I will create for you and also I have created this so now I will just add it to the input fields here rape is equal to name rate okay rate is equal to email free and also it is equal to boom all right so now after adding this new list I will make him empty okay I will use like this the name memory dot current that value is equal to empty okay I will do the head to head for all of them email and also oh so let's see it okay refuses to remove the previous video I will add it camera on krgmail.com and also phone number audit okay it has become empty so now we have did our first functionality which is ADD so now we will do the edit functionality okay so how to edit a list so let's start that yes so now I will create another component you can create this component in the separate file add the name up a date to member error you would like to edit edit our less inline and the same Row for example here we have a list like it looks like this we would like to click on this button it will looks like this in this field okay here will also input field here also in here also so to do that we should add in another row here at the edit component and also we will add here 3D component another 3D component we will have the input field okay these input field we have added before he would like to have these three input field and also a button for update I will just copy this and just come here and paste it here in just RTD let's do the top of them to the end of it everyone I will add them here and here I will add s2k so it will be update and also type will be submit so whenever we click an edit button so it shows us this forum okay so let's add here a pattern thank you and click window hit it okay so I will create that function here by date so before we should create one another variable that will be const it comma set edit state use date by default it will be -1 okay because we don't have minus values in our list ID so to do it so here now to show our edit Forum so we should use here alternative operator yeah here before this we will use this variable that we have created right now okay edit state I will use it here edit state a fidget state was true for example so yeah I will sign here files to it I will assign -1 to this okay so here at the map function here I will use if edit state was equal to equal to current dot ID so what it should show to us it should show to us this edit component okay it will show us this edit Forum okay member it will show us this otherwise it will show our row Our member okay so let's just try it was we will click on that we will just whenever we click on this button so it will call this function in this function we will change set edit state to the ID and which we have clicked okay here we will pass the ID of this row on which we have clicked okay we will pass that ID here dot ID we pass this ID to this function here I will change that in here I will just change that to here I will display explain it right now like this for example I created this variable okay I have assign minus one value by default it is we don't have an ID which is equal to this okay it's not equal to this so it will show us our list the list of our members okay whenever we click on this edit it will pass that ID to this function so it will sit this variable to that ID okay whenever we see that you see that to this variable so here an ID will equal to this okay whenever that ID equal to this it will show us the edit form instead of that row so let's try that yeah we have the here name Rip is not defined where is the error yes we have here and the edit Forum we don't have the rip so I will just remove this yeah so let's see it here we have this right now for example I would like to click on this so it will show us that input Fields instead of therefore I will just load the size of this is too much so I will just make it I will design it so they come here and I will Design these input fields all right it's okay okay design is no matter just to we will see the functionality okay it is okay so whenever we click and edit function so here it show us the previous videos for example here was the camera on or whatever that was so it will show those images in those names and that phone number to us so to do that so here in edit Forum we will just pass the current you have to edit Forum we will pass the current the current member okay we will pass here the current member okay current is equal to correct okay I have passed this so now I will come here to the edit so here the video is equal to is equal to current start name okay and also it will for all other here it will be female here it will be pool number okay you see it automatically it has came okay right let's click on this one okay by default the values has came here so now we whenever we update these videos so after updated updation we click on update it should be updated automatically here okay so let's do that so here I'm clicking and every input field so we should handle that for example on change we will handle name we will call handle name function I will create that handle name okay event Vehicles name is equal to event Dot dot orgit dot paleo you have just accessed the video yes so now I will update the state okay so to update the state we need the lists all lists and also the seat list function which is used for updating the list so I will pass those two variable and functions to this component okay the data and also see data these two I should pass them to the update component okay sorry to this one okay data is equal to data and also the data is equal to sit data yeah I have passed these two data NC data to the edit component so now I will just take them here data and Associate data so now I will just use the map function I will create a new accounts to new updated data is equal to data.map and here I will current ly the data d here whenever D dot ID was equal to equal to current dot ID so what it should do it is a ternary operator should update the state okay the previous spread operator is used for the previous data and also now I will update the name is equal to name and also otherwise if that was not equal let's change this to this if that was not equal it should return on the the date okay sorry I should write it outside it will return the D this current list of member so now I will use the set data set data function to update hit OK updated data yeah it has updated so now I will do it for all these three input fields and it is for update per email and also one another for I will copy this function okay it is for email and also it is for boom so here I will use the email and also I will change here the email and also here it is cool and also here phone oh okay so here we have updated the states so now whenever we click after the updating the state those values so whenever we click on update button so here when we click inform okay sorry come here to the edit function edit component yeah it is the edit component whenever right click on this update so it should update the state like yeah it is included every video click this so it will you we will use Forum here for those in footprints for this edit member I will use a forum we cannot grab it in a forum here so I will use a forum here on the top of the table okay yes it has done okay and submit and submitted and then update it handle update okay handle update I will create this function right now and update so here I will just change the state of this variable okay I will just call sit to edit status 2 minus 2 for example the ID part is to the minus one okay before we I change that state yeah in this function we have changed the state now again we state it to -1 because we don't have a minus 1 iD in our record so it is okay let's check it okay so let's click on the update button let's change it to the domain okay to me it is not updated let's see it so first I will add here the type button because these are type button winners just that upbeat button is type submit with us that form is for that button and here yeah here we should add no no sorry we should not use the return statement here okay let's check it once again a date just one thing that first of all we should take those values because the name is equal to here we should have the event dot Target dot elements dot name dot value the same for email and Safari price uh sorry for and also here we made okay so now I will update the state can't stop rotate it stay updated data is equal to so here I will use the data data map data okay now I will update the state D dot ID is equal to equal to to the update State okay edit State uh edit State okay previously we sit and the current ID to this variable okay whenever the in a list and ID equal to that ID so what it should do it should update our state okay comma name is equal to name comma email is equal to email and also code is equal to 4 otherwise it will return the list okay just I will change is equal to sign column so now we will update our state yes it data updated data okay foreign so now let's see it what happened whenever I click this button and I click this okay updated click the object function it didn't work let's see what happened to the inspect come to the console thank you come here I just see that oh sorry okay we should not use this curly braces [Music] foreign okay it is game Let's update it all these message hit okay it has updated but not thank you [Music] [Music] okay we should write even third prevent probing default okay I forgot this function so let's see it right now okay we have this updated okay we have updated this video and also you can update the email name whatever is that and also the number of digital key that has updated so it was all about the update edit or the update function so now we will come to the delete function how to perform a delete function so let's come for the delete function we will just perform here and click for example and click OK is equal to handle delete okay I will let our create and also I will pass the current ID to the handle update ID okay the current dot ID I will fast that ID to this function to the handle delete function okay I will come here and just create under this button function handle delete okay we pass the Knight to that so here what we should do we should use the map function okay and the data cast updated data is equal to data Dot filter okay we'll use the filter function for that the filter function it will return the data if the ID was not equal to equal to the D dot ID what it should do it should determine that record otherwise so here we don't have the capital it will automatically return those filter those records which is not ID whenever the ID is not equal to the current ID so it will filter the record otherwise it will not filter for example the second ID is and we pass the second ID there okay it will not filter the secondary card and the other records will be filtered by this okay now we will update our state select data update it data okay so let's see it for example I would like to delete this so create a related that has deleted if you'd like to add another record and also you would like to add a phone number you can add that edit the phone number come run foreign functionalities and also creating a table using react.js if you have liked the video please subscribe our YouTube channel thanks for watching

Channel: Code With Yousaf

Views: 12,623

Keywords: How to Create a Table in React JS | React Table Tutorial from Scratch, how to make a table in react, react table, react, table in react js, react table tutorial, material table in react, create table in react js, how to build data table in reactjs, material ui table react, table in react, create a table in react, table header react mui, create a table in react js, table, react material ui table, how to make table in react js, building a table in react js

Id: pxCVDT8_TWE

Length: 41min 13sec (2473 seconds)

Published: Sat Sep 17 2022