Ant Design Editable Table Cells | Validate and Edit Data within Table Cells | ReactJS Tutorial

hello guys welcome back in this video we will see how we can edit table data within the table cells and how we can add the validations within the table cells so let's get started i have an empty react.js project that is using and design and right now it's showing nothing so let's go ahead and import the table component from and design and start using it so table let's add its columns and data source so columns is equal to columns we will declare these variables soon and data source right so let's add a few columns let's keep it simple and add maybe or two columns maybe name and address so with the title of name and data index of name let's copy it and add one more column for maybe address with the data's index as address as well uh let's add another column uh that we can call actions and on that we will have the added action that and the same actions so there will be no data index instead we will render [Music] the record such that we can return maybe uh two buttons when we call edit and another we can call it save so if we save it now data source is defined not defined so let's define the data source so let's use the state maybe you can say data source and set data source you state with the default value of an empty j and let's add few records if you save it it should show yeah empty table name address and actions okay so in a use effect let's add a few records in that maybe you call okay call it on the component load and here maybe we can see maybe let's set maybe seven rows and here we can say const theta is equal to an empty ray and here we can add different rows so we will say with the key of maybe index and then name we can say name and then index and then address similarly so what we are doing here is uh we're generating our random data but it is also unique so we can see that which row is this one okay so we have it added a key name and address and once all of this data is prepared we can set data source to this data right so save it here we go name address and actions uh let me the actions with the type of link and type of link here you go name address actions and edit save right so right now it's doing nothing so let's add the actions on edit and the save button okay so on edit what we will be doing is uh we will be setting in our state that which row is being edited so for that maybe we can declare a state we can call it edit row and set edit thing row maybe editing though retain row and set editing row and with the default value of null so no row is editing right now and once we click on it we can say that set editing row to record dot key so we are getting record uh in each of the column and in each record we have a key that is equal to the index so 0 1 2 3 right so here what we are doing is on click of the edit button we are setting which row is being edited right and once this is set we can uh populate these uh that particular row instead of the these text we can populate the input fields so that user can type into those right so for that uh what we can do is we can encapsulate the table into a form and we can add the form item here and format item here as well so if you are new to the form i have a separate video on that i will add its link to description below also in the eye icon so that you can take a look and get ready how the form works right so form that's also from the and design right so it should be from the anderson right form okay so we have encapsulated into the form and here uh we will give it a custom render the text and then the record each center we will get the text whatever is the dress and if you wanna have the full record so that will include the key as well as the name as the address so that was the second parameter right okay so here we can say that if the editing key editing row that we set here if that is equal to recorded key then we will show uh form dot item and otherwise we can maybe return the p tag saying whatever the text is right and return it so form dot item and insert that we will be adding an input and here we can give it a name so the name of this field that is name and if we want to make them required so username the name and address if we need them to be required so we can add the rules sorry it should not be named it should be addressed same as this one okay so we can add our rules and we can say it is required and if user has not entered anything we can say please enter your address right okay if you save it there you go and let's copy it and replicate it for the name column as well and i didn't create this one so it's it will be the name please enter your name and say okay the text will be for this data index right save it and if you click on that it you see as as soon as i click on edit so it is converted to the these fields right so whichever row i click on the edit it converts that into the uh these inputs but uh it is not populating whatever was already there so we can do that using the forms set values so for that let's use the form use form hook cost form is equal to form dot use form and here where we have the form we can say form is equal to the form we have declared above okay so once we have the reference to the form so whenever you uh we are setting any row in editing mode uh we can populate these values as well so the name and address for that particular row so we can say that form dot set fields value and here we can give the key value here so we will say that name is equal to record dot name because we are getting the record here so we can get the name from the record and uh address to be record dot address right so now if we save it and edit this one so you see name 0 0 is there add this row one one two two and so on so forth right so now if i make it empty it says please enter your address here you go yep so if you want to make maybe we can say name is required but maybe the address is not required we can skip these rules you go refresh now i can make it empty but i cannot make this empty right so this is how it goes okay so now let's implement the the save feature so on save so once once using hit enter or click on the save we can declare the save as the html type of submit so whenever user hit on the save or hit enter this function should be called on finish on finish on finish so let's delete this function cost on finish is equal to it will give us the values that user has entered in okay so [Music] ah so if user has updated these values so what we can do is we will update the data source so that as soon as user has operated this uh our data was updated and it table read enters and gives us the latest values so we can say cost updated data source is equal to whatever is the data source right now and updated data source dot supplies so we have [Music] we will give the start where we want to replace these values and how many and records to replace and then we'll give the value the third parameter so this is the normal array function so we have the row in editing row okay so this is the row number and we will be replacing only one entries and we will be replacing with the values okay so before doing that let me show you uh what we are getting it in the values console.log values so in the values we will be getting only the name and address so we won't be getting the whole data source uh what we have declared here the key name and address so key will be missing so let me show you quickly in the console so when we edit it and then it's save okay so on finish and we have not saved it so here you go values so it's giving the two keys address and the name so the key is missing so uh here once we are updating it we can add the key ourselves so we can say representative with whatever the values we are getting from the form plus a key whose value will be the whatever that rows was dating right so we are adding the third uh key or the third parameter for each row ourselves and then we will be setting the data source to the updated data source right and we will then set set editing row to be null once it is saved so will go back to the normal these texts save it let's okay so this one address maybe zero zero zero save it here you go this is zero saved if you add for this one maybe we can say name one zero zero and hit on the save this is saved right so whatever we are saying you will make a change it again so we can say 999 save it here we go up all right so this is how we uh saved the data sources uh locally so suppose if we want to save whatever user has edited we want to make an api call to the backend so we can do that here right so we get updated values we know which row has a was under editing so we can make an ap call saying that for this particular row these are the values updated on the backend and we on that response they give us updated uh data source uh we we know uh whatever the data source is locally so we can show that from the local data source and updates on the server as well all right also i have a separate video on how to populate that the tables from from loading data from the servers so i will link that video in the description as well all right so that's it on exploring the rating of the table data within the table rows so if you have any question please let me know in the comments below and if you have learned something in this video please hit like subscribe to my channel see you in the next video thank you

Channel: CodeWithAamir

Views: 31,158

Keywords: antd, ant design, reactjs, codewithaamir, Ant Design Editable Table Cells, Validate and Edit Data within Table Cells, ReactJS Tutorial, edit table data, update antd table data, validate table data, edit cells, edit antd table cells, ant design table tutorial, ant design editable table cells, editable table, editable table cells, antd editable table cells, useForm hook, setFieldsValue usage, ant design table component usage, populate data antd table component, ant design system

Id: Kifluk4YGDc

Length: 18min 51sec (1131 seconds)

Published: Thu Feb 17 2022