How to Add, Delete, Edit and Display Records in Ant Design Table | Antd Table CRUD | ReactJS

hello guys welcome back in this video we will see how we can perform current operations on and design table by adding different records in the table by deleting different records and by editing different records so let's get started i have an empty react gs project that is using and design so we will be using the table component from the end design so let's import that and use it here so table and let's add its uh column and data source as well so columns and data source so let's declare the variables against this so suppose we want to show the data of a student uh suppose we want to show a student id its name then email and address so let's declare those columns so for the first column with the key of one and the title of id and data index to be id let's copy this one and paste it for other columns so it will be second will be for the name that index could be name and this third can be email and then this fourth can be addressed right and these are the columns let's add this this here so let's declare the data source as well for the data source let's delete the state so that we can change it later on let's add a few records in that so you can add a id one and name can be a random name we can say and then email can be john gmail.com and its address can be your own address right let's copy it and add few more records let's add four records with the id of two and we can say david and also david's address we can say id of three let's say james james address and then we can say same same and same address right so data source is also delayed uh this let's import the use state state from react right and we have added the columns and you can add the data source here let's save it and here you go the id column name email and address right so let's try adding different functions of the cart so we can create or add different records in the table and then we will add the edit and delete so let's add a button to add a new student right and let's save it there you go add a new student and on click of it let's add a function you can say that on add student and in that what we will be doing is we will be updating the data source in such a way that we add a new record at the bottom right i think it's id is one that is wrong and it should be four okay and here uh what will be doing is whatever we will be returning whatever is previously in the data source and then a new student so let's add a new student first new student is equal to that will be a uh data similar to this one so let's copy and add it here right so for the id ah here for the demo purpose or for the purpose of this video we can declare a random id but in reality it will be may be coming from the back end or somewhere so that is unique so random may be within 1000 and because it will generate a number with the decimals so let us pass it to end and maybe we can use this random number for the name email and address as well so let's copy it and declare another variable called random number and paste it here and we can say the id is random number and then the name can also be named then a random number and then email address can be a random number plus sorry it should be a random number okay random number at the red [Music] gmail.com and then you can say address plus random number so it is one two three something right and let's add a student here on add student this function will be called and it will generate a random number and then new student object will be created and we we are adding the new student object at the end of this data source let's save it add a new student a new student added its id name and email address let's add one or two more so here you go so adding a new student so let's add another column here uh we can call it actions and that we can add the added action or the delete actions so let's go ahead and add a column we can say with the key of 5 and title could be actions and we don't need the data data and x instead we will be rendering our own we can say our own ui so here we can return few elements in a fragment or few icons from the end design so i have already created a video on how we can add or manipulate or customize different icons from the end design i will add this link in the description below as well so that you can take a look so let's add the few icons from and design icons so let's edit the edit outlined and then the delete outlined okay so let's go ahead and here we can add the edit outlined and then the delete outlined right save it here you go actions edit and delete let's change the color of the tree to maybe red so let's toilet and it's color to be red let's add a little margin here as well so we can say margin left to be maybe 12 yeah itself okay so now let's add a function similar to we have added on add student we can add a function on delete student and in that we will be getting the record of that row which the user is wanted to iterate it so here on click of this delete icon what we will be doing is we will be calling on delete student and we will be passing the record whatever we have got here right so record and here again we will be manipulating this data source so it will be set data source to be its previous filter over the value from the data source whose id is equal to that this records the id so it will be p dot filter and it will be giving us the student and what we will be doing is student dot id is not equal to record dot id right and we will be returning it okay save it let's refresh and if you know call this delete that john is dated so if you want to read this david that is actually related and a new student new student suppose this 461 deleted it is dated right so here here you see that we have accomplished that delete action from the table uh but as soon as you click on the delete it deletes that record right away so if you want to add a confirmation pop-up in between this delete and the record deletion so we can add that as well so let's go ahead and import the model from the end design and on delete uh before deleting it we will be saying that model dot confirm [Music] and we can say the title uh are you sure uh you want to delete this let's do wrecked it right and on okay it will be calling a function in that function we will be doing this one right so we will be on delete action this on click of this icon we will be displaying a confirmation model that will display this function and this message and on click of ok we will be doing the deletion so let's give it a try so delete are you sure you want to do this true record if you cancel do nothing if i press ok it deletes it but you see that okay doesn't look good so let's add a are you sure would want to read it yes so let's uh customize that so okay text we can say that yes and also uh let's say make it red so that it looks like it is a something little bit delusional danger so okay type could be danger right okay okay save it refresh johan here you go yes delete it new students edit 927 delete it yes 22 delete if you cancel do nothing and if i delete this one then that request will be deleted right so that was related to the delete so let us implement this edit now and here similar to delete student function let's add a function for the edit student and we will be getting a similar record here as well okay so let's add the on click you can see that this one and this one here on edit united student what is wrong here now on edit only student there you go and we will be passing the record right save it and uh here uh sim we can display a model uh with with these values already populated and in that model we can edit these values and then we will be saving it or canceling if we want to cancel that so uh let's add a model here so maybe we can call it uh model and of course we will be adding similar things we have added here as well so we can say that the title would be added student right and if it's visible we can declare our state here for its visibility so you state is editing maybe you can say false and as soon as user click on this as edit we can make it easier to true let's say set is editing to true and here we can see is editing right and on cancel we can set the dating to false right save it and also on ok we will be set is editing to false right oh sorry uh function then this one right so is it it added student we will be adding a ah fields here and cancel doing nothing okay do nothing and we on for the okay we can uh make this okay test tube maybe save right so okay save right so let us add different input fields here okay so let's add fields here and let's import the input field and also whenever there is edit we can save that record in the state so whichever the record is under editing so we can say that editing student and by default it will be null and whenever there is only click set it into two and also set editing student to this record so this record is being updated or maybe we can we do not change this one so we make a copy of this right here and here input for input its value the first could be uh the name so we can cut that editing student dot name and its value can be reduced it can be null initially here so we make it optional chaining right like this way so that it does not crash so if you remove this one so it will say that we cannot read the name property of null so we add a question mark so that if it is null so it will run the undefined all right here you go so john this is david and this is james right so let's add other fields as well this is input for then the name then this is for the email and this is for the address save it and here you go john is email and name let's add a new student this one edit name email and address right and here if you start editing it it is not doing because we have not added the function for the uh its own change so let's add that on change and that will be giving uh uh in on on on change what we'll be doing is we'll be setting the editing student it's previous value to pre dot uh we will be returning whatever is available previously plus its name to be e dot target dot name right so on change we will be returning all of other fields i mean all the fields and overriding uh this name uh pro name key for the dating student right so we can add this for the other inputs as well here and here and here we were overriding the name here we will be uploading the email and here we will be overriding the address save it and now if you open it so oh okay value is email address on change e oh sorry either target dot value right save it if i change it it is getting changed right but right now we have not written any thing regarding when it is we can say that on okay we are only saturated to false so [Music] we can say uh also set return to false or maybe we can add a function that we can say reset editing and here we set these two files set it into false and set editing student to null right and here on cancel we call the reset editing and also on okay we call the reset editing but on okay we need to update that record as well so here we will be doing set data source to so here we what we'll be doing is we'll be mapping of all of the records and uh what whichever the record this one is we will update that record so we will be doing return three dot map it will be giving us the student and in that what we will be doing is uh we will checking if student dot id is equal to equal to uh that editing student dot record uh it is student dot id if it is equal to that one then return the editing student because we have uploaded dating student here right as soon as it changes we have updated its record so we will be returning that one and in ah if that is not equal to that we will be returning uh whatever the student is previously we are getting here right so let's save it refresh john one two three save it here you go john one two three that's your tablet email address to suppose one one one one so here you go one add a new student let's uh change this to maybe not its center it is suppose amir's 754 gmail.com here you go right so in this way uh we have covered that how we can add different records in a table how we can delete a different records in a tables and also we can add a confirmation popup before deleting and also we can how we can edit different records and in the edit we can add up different fields here and maybe we can add a different we can say validations here if needed so it's up to us whatever we want to display and we can add validation that something even we can add different fields here which are even not available in the data source so that's it on the crowd operations on the end design table if you have any questions please let me know in the comments below and if you learned something in this video please hit like and subscribe to my channel see you in the next video thank you

Channel: CodeWithAamir

Views: 75,295

Keywords: ant design UI, reactjs, website ui development using ant design and reactJS, how to use Table component of ant design, how to show list of data in reactJS via ant design, paginations, antd table crud, add rows in antd table, delete rows in antd table, edit rows in antd table, display antd table data in Modal, confirmation modal for delete, random data generator for antd table, add delete edit antd table records, antd table CRUD, codewithaamir, ant design system, antd react tutorial

Id: y4_nSE-aZhc

Length: 26min 17sec (1577 seconds)

Published: Tue Oct 19 2021