Build Advanced Data Table in React using Ant Design

hello everyone welcome to my youtube channel in today's video we will be working on this advanced data table with react using and design so basically we are going to implement lot of functionality in this current data table so let's have a quick demo of all this functionality that we have in this table component without wasting any time so we are taking help of this json placeholder fake api to display the data in a table component so this api basically returned around 500 data which is very helpful to display in our table component and if you scroll down here we have a pagination and if you click on second you will navigate to the second page likewise you can navigate on the third page as well and by this way you can also move forward and you can move backward and you can also control like how many items you wanted to so per page okay so you can also control this one so i'm just going to reset back to the 10 per page now the user can also perform the delete operation so if you click on delete button you will get a pop-up like are you sure you want to delete if you click ok this record will get deleted but if you refresh the application you will get all the data that we have in this json placeholder fake api so basically we are removing the data from our front end only so here we are not making any kind of api request so now let's perform the edit operation if you click on edit button this delete will get disabled and you can update this thing okay and we have also some validation okay so you can see that we got some error message like please input some value in message field so we have also covered basic validation in this table component as well so let's give some value here like updated message and if you click on save this will get saved but if you refresh again this application you will get back all the data that we have in this json placeholder fake api because we are just updating from our front-end side only we are not making any kind of api request now you can also perform the search operation so now i am going to search a name here like nikita you can see that this nikita is present here at third row let's click on search we got this one nikita okay so we got two row which contain nikita keyword and if you cancel this one you will get back all the data that we have in our json placeholder fake api now you can also perform the sort operation so you can sort the column okay and if you wanted to reset you can just click on reset you will get back all the original data so we have performed the sort operation as well you can also perform the column level search so you can also search the indivisible column so i'm going to search with the keyword alias and let's click on search so you can see that our table draw got filtered out with the alias keyword so it's showing only those row which contain the alias keyword and we have also highlighted the search keyword you can see that so this alias keyword is highlighted in each row you can see that for this particular name column and if you click on reset you will get back all the data that we have in our json placeholder fake api so we have also performed the column level search in this application you can also perform the filter operation so here we have a filter so let's select this one 22 and if we click ok so our table data will get filtered out based on the age 22 let's reset this one now let's see the next functionality in this application so if this row contains some additional information then you can expand this row so we have here plus icon and if you click on this one here you can display some additional information if this row contained okay so this way you can display the additional information for this particular row so we have performed the expandable draw functionality as well now you can also do a drag and drop row so let's assume i am going to drag this row and i'm going to drop here okay so you can also perform this drag and drop operation in this table so let's click on reset now i'm going to perform the last operation in this application so let's perform this export functionality so let's click on this one so once you click on this export button so basically it will generate a csv file in the form of excel sheet so let's open this one excel sheet which we have just downloaded so it's going to show all the data that we have in our json placeholder fake api so we have around 500 data which we are displaying in the form of csv into a excel speed okay so this is the overall application that we are going to build in today's video and i hope you are very excited to work on this application with me and also i don't think you will get all this functionality in a single video on this current youtube platform so before we start working on this advanced data table in react if you haven't subscribed this channel then please subscribe this channel and if you find out that video is useful then please press the like button and share this video with your friend and colleague so let's start working on this application without wasting any time so i am going into the directory and i will create a react project so now we are going to create a react project so i am going to open a terminal here and i am going to create a react project with the command and press create react app and the project name i'm going to give here react advanced table okay so this will take around two to three minutes to set up our react project so i'll be back once the process get completed okay so guys our process is completed over here you can see that the project got created so let's go into this directory first because we need to install some packages which is required to build this advanced react table so it is react advanced table okay now we have to install the package like and design we are going to use access as well and we are also going to use low dash at some point in this video we have to also install and design icon so let's install this packages and i have already opened this project in my visual studio code so let's go to the vs code so you can see that i have opened this project in my vs code and here i'm just going to simply create one folder like data table okay and inside that i am going to have one file only index.js for now let's generate a snippet and this is data table okay so this is data table data table with and design in react i'm just giving heading here and let's see whether our package got installed or not so it's look like our all package got installed and let's do some cleanup here so i'm just going to remove all of this thing and i'm just going to import that data table so you can see that vs code automatically suggest me this component okay and let's put inside in any tag h2 tag so let's save this file and we have to start our react development server so i'm just going to do here npm start let's wait for the application load into the browser and since we are using and design in this application so we have to import the css file for the android design so you have to import the and design css file in this index.js file so let's save this one and you can see that our application is getting load into a browser so let's wait for the application load into the browser so you can see that our application is successfully loaded into the browser and we have got this our content now after that what we have to do so let's go to the vs code first so here we need to bring some hooks like us state and use effect after that we have to bring axis and we have to bring table component from our and design so let's bring our table component and after that i am going to define some state here so [Music] cost grid data set grid data use state it will be empty error after that i am going to have loading state so loading set loading equal to use state and initially it will be the false and after that i am going to write one function to load the data from our json placeholder fake api so it will be async and then set loading will become true now paused response is equal to await axis dot get and we are going to use this json placeholder fake api okay so it's return around 500 data okay so let's use this api after that set grid data response dot data set loading will become false here okay once we get the data from our json placeholder api now we have to run this use load data inside our use effect so whenever our app load so we will get our data from our json placeholder fake api so let's use it here okay now we cannot directly use this data in our table component because the data is not enough to fulfill our objective in this video so we will basically append some more data inside each object in this array okay so first i am going to add a ace property inside each array of object so let's define a variable like data with age and we are going to use your grid data from map and we have the item and here i'm just going to spread out item and i am going to append age property inside each array of object so we have to provide some random value of a to each array of object so you can see that i have just added one line of code here to this age property that is so basically it will generate a random edge okay now we have to do some more modification inside each area of object so i wanted to add one property called key and this body i wanted to rename to message so what i can do over here so i'm going to have one modify data cost modified data and now i'm going to use here data with age okay map and here what i have to do so this time since i have to rename one property here from body to message so the property which we are going to rename we have to write here body and i am going to spread out the item here after that it will be item here and i have to add one property first key so this property will be helpful once we perform the edit operation in this data table so key nothing but i'm just going to add the item id only and we have to rename this body value to message okay now our body will become message so this property body will change to message in each array of object so this way we can do this one now let's save this one and after that we have to define our columns okay so let's define our the columns property so it will be array of object so first we are going to have title it will be id and data index we have to provide and it will be id okay let's format this one the second column we are going to have name okay title name data index we have to provide which will be name align it will be center and editable so yes it will be editable so the column will be readable so we have to provide this value to true now i'm going to have other column as well for email message is okay so this will email okay this will email after that i am going to have a age property so now this will be age this will be age and editable will be false in case of age so you cannot update the age and and the last one will be the message this will become message and this will be the true after that we are going to have one more column where we are going to perform our action like delete or edit so the title will be the action and this will be the action and we can remove this one because inside this column we are going to have the buttons so no need this editable property now we can save this file and after that what we can do so we can remove this one and we can use our table component that we have bring from our android design and we can pass the columns that we have defined outside this return data source we have to provide which will be our modified data only let's keep border and let's give loading here let's save this file and let's go to the browser so we are not getting the data okay so let me see in the console let's open network tab so we are getting the data but it's not displaying okay inside this table okay so let me see what is the issue so here we did a small mistake here so we have to put inside this object okay let's save this one now let's go into the browser now you can see that we are getting the data with id name email age okay and message and inside this action column we are going to have our delete and edit button and if you scroll down so you can see that our pagination is also showing below this table and you can move forward by clicking on this pagination number you can also move forward by clicking on this arrow and you can also adjust like how many item you wanted to see per page so this will also getting change okay as per your requirement so pagination is also working so whenever you use table component with android design so this pagination come by default with the table component in and design so the first part is completed here like getting the data in our table component now we have to perform each operation one by one like delete edit search filter all this operation so now we are going to perform the delete operation so let's do that one now we have to delete an item from our table component so we have to add a button inside this action column so i'm going to have a render and then the first argument will be underscore only and record after that modified data dot length greater than or equal to 1 then we have to use one component from our android design that is pop confirm so we are going to show a small pop-up okay once you click on the delete button so let's use that component pop conform and we can provide your title like are you sure you want to delete okay and after that i am going to have on confirm message and after that i am going to have one event handler which will basically delete the item from our table component so we have to use with this on confirm and we have to provide one handle delete function and we can pass here record okay now inside that i can use here button so we have to bring the button component as well from our random design so let's use here button and this will be delete and since it is a delete so i'm going to provide a danger type primary okay and after this i am going to have null okay because we are using a ternary operator so we have to provide the null now let's save this one and let's define this one so let's define here only const handle delete and we are getting a record okay so record nothing but is a value and we can have our data source here so data source is equal to so i'm just making a copy like modify data and then and after that i have to just filter out the data so filtered data and we can use here data source dot filter item so this is a very basic logic i am writing over here to delete an item from our table component so if id is not mesh then we have to keep all the data and we have to remove the item for which id is matched so basically it will keep all the item in the table component if the id is not mesh and once the id is matched so that particular data will get filtered out from our table component now we can do here like set grid data and we can pass here filter data okay now let's save this file and verify whether it's working or not now you can see that we have got our delete button inside this action column so i'm going to refresh one more time in this application and let's delete the first record and if you click on cancel it won't delete let's click away and if you click ok this will get delete now after deleting that item from our table component this message is coming empty okay so there is a workaround so while modifying the data we have to write one logic here so what we can do over here so we have already installed loader so we can use that one so from loaders we have to bring ease empty and here we can check like is empty so if that one is empty that is body then i am going to use your item dot message else it will be body okay now let's save this file and verify again in our browser refresh this one so i'm going to delete the first one let's click on ok so this is called deleted and our message is still there okay and if you refresh this application you will get back all the data that we have in our json placeholder because we are not making any api request to delete the item from our table component even if you make an api request to delete the item from table component with the json placeholder fake api in that case also data will not get deleted because json placeholder doesn't maintain any kind of database behind the scene so we are just removing from the front end okay so whenever you delete an item from table component it will get deleted from front end but whenever you refresh the application it will get back into our table component so we have performed the delete operation now we have to perform the edit operation in this table component so performing the edit operation is very complex so let's do that one so now we have to edit the item in our table component so we have to bring couple of component first so let's bring your space and form also we need and we also need input okay so first let's show that edit button beside the delete button so first i am going to use your space okay this component let's put this one inside space okay and after this we are going to have our button so we'll having edit type will be primary and on click we are going to have one method so for now let's just give here console log only okay let's save this file and let's go to the browser so now you can see that we have got our edit button okay so now next thing what we have to do so once you click on this edit so we are going to get two button like save and cancel and this field basically will become input field so this name email and message will basically convert it into a input field so that we can update the row so after clicking on this edit we have to convert into this input field that is name email and message column because only this three column is editable so you can see that in our column configuration this name email and message column are editable so we can only edit those column okay so we have to basically replace this content with the input field and we have to put all this content inside that input field so we have to enable here input field so we have to do couple of things to do that one first what we have to do so first i'm going to convert this one into this way and i'm going to add here that bracket and this will return okay and here you have to check editable so so we have to write one method here like is editing so we have to check whether user is editing that particular row or not and here we can pass that record now we can define this function here so cons is editing we are getting this record okay and we have to define one state here that is edit row key set edit use state and it will be empty and we can use that one like editor record dot key is equal to editing key editing row key okay now we are passing this one and we are checking so if you click on edit so all that row will basically converted into the input field except the each column okay now here what we have to do so we have to check like editable and in the else part we have to basically put this content okay let's cut this one and here we have to give some content like span and space size so it will be in middle and we are going to have one button that is saved and we are going to have one more button that will be the cancel and i am going to wrap that cancel button with the pop confirm so let's wrap this one and we can give a title like are you sure to cancel okay and we are going to have onconform as well and here we are going to have cancel method so let's just define this one so let's define here const cancel and here we are going to have one click and we are going to have one same method in which i am passing key so record dot key and type will be the primary and we can give some styling here so that will be margin right and i'm going to give here 8 and i think we have some typo here so now here we have to put a semicolon now save this file and let's define this one as well so i'm just going to copy this one and we are going to have one more edit okay so we did and we can define the edit here and we can pass here record okay and we don't need here event so let's remove this one let's save this one and let's go to the browser so we don't have any issue so once you click on edit so edit will become save and cancel so we have to show that save and cancel button and this delete will become disabled once we are in editing phase okay so we have to show that save and cancel button once you click on the edit button so we have already write the code we have to just show that one so what we have to do so we have to do some changes inside this function edit so first here what we have to do so cost form form dot use form and we have to wrap our table component with the form okay so form let put all this thing inside this form component we can pass here form and the component we have to pass here false okay now we have to work on this edit function so here what we have to do so form dot set filled value and name it will be empty email it will be empty message empty and this you did function is basically receiving the record so we are going to just spread out the record and after that we have to set the editing row key okay so set edit row key and we can pass a record dot key so for editing purpose only i have added this key inside this modify data you can see that where we have written this modify so for only editing purpose i have added this key okay so with the help of this key we are able to update the data in our table component so let's save this file and let's see whether it's working or not first now let's click on edit so now you can see that we have got save and cancel so once you are in edit mode so we have to also make we have to also make sure that this delete button should be disabled so you cannot perform so you cannot perform the delete operation while performing the edit okay so in the delete button we have to make sure to disable that one okay so where is delete button [Music] so here we have a disabled property and we have we are getting already editable okay so we can pass this one now let's go into the browser so now you can see that our delete button got disabled because we are in edit mode so once you click on this edit so we have to basically provide your input fill in order to update this row so we have to place here input field and we have to populate this value inside that input field so we have to do this for message email and name okay and we have to also write some logic inside this cancel and save so first we are going to bring this input field here okay for this message email and name column once you click on the edit button so what we have to do here now we have to basically modify this column property okay so for that we have to write one function so cost merged column and we are going to use this columns dot map we are going to have column single column and here we have to check if the column is not editable so for example es column is not editable so we are going to simply return that one return column else what we have to do so i am just going to spread out the column property and i am going to append few thing inside this on sale method okay so record so record and data index so column dot data ended we have already defined this data index in our columns property now title column dot title and editing okay so he is editing we can use here the function and we can pass here record okay now we can pass this merge column inside this one so we can replace this one and we can pass this one so once user click on this column so now this column will become editable so once you click on this one so this will become editable so we are passing on each sale this property okay that is record data index title editing after that we have to write one function to place a input field on each editable column okay so we are going to have here cost edutable cell and this going to receive that is editing data index title record children and rest props okay now after this we have to store our input field so i'm just putting this input component inside this input variable and i am going to return here so it will be td table data and here i'm just passing rest props and we are checking here if we are in edit mode so we have to basically show that input field okay in each row so form dot item here we can provide name so it will be data index we can give some styling so margin i'm just going to give here zero and we have to give here rules okay so we have to provide the rules like this way required so we are providing here true so if you left that field empty so we are going to show a message okay like please input some value like okay so please input and we are putting the title here so it will show the error message for that row okay so you can give like please input some value so title is nothing but it's a column name only so if so suppose if you are in edit mode and if you just remove all the content that we have inside this name column so in that case if you wanted to save you are going to see a message like please provide some value in this name field okay so we can give this message after this i can show that input okay now in else part we have to just show that children okay let's save this one now this editable cell we can use here okay so inside this table we have components and here we are going to have like body and we can provide this one editable scale so this way our table become veritable okay so i guess we can check this one so let's go into the browser refresh this one let's click on it so we are not getting that input field so i think we have to do some more changes so we have done some mistake here so it will be inside sale okay then here we have to pass irritable value now let's verify this one reflect this one let's click on edit so now you can see that this is converted into input field and we are populating the value into each respective input field okay so now let's refresh again and let's click on this edit so now we are able to populate the value into each respective input field for this message email and name column now we can edit the row for this column this column and this column and if you left empty so now you can see that we are also getting the message please input some value in message field okay so this is also working now we have to basically save the data once user click on this save button okay so let's do that one as well so you can see that in this columns we have one save function which we have right here so in columns property you can see that we have write one save function which we have wrote over here so this is receiving a key and this will be the async so try so count row await form dot validate field okay so first we will be validating the field okay after that let's create one variable cons new data and modified data now we need index basically which row we are updating so new data dot find in the item so key we are receiving from this column property and if we match that item dot key then we will update so if index -1 so cost item equal to new data we can provide the index here new data dot supplies so here we have to pass index 1 because we are updating one row at one time and here we can spread out item and row then we can set the grid data new data and set editing key so set edit draw key will become empty and here we have to write cache as well because we are using try catch block and here we can just put a console log so we can just console of the error message if we have any kind of error and in cancel method we can just simply do like hit edit row key to empty let's see whether it's working or not so let's go to the browser refresh this one now if you click on edit we are getting this input field with the populated value and if you click on cancel so if you click on ok now we are getting out of edit mode so let's update this one so let's keep here updated message filled okay and if you click on save this is getting updated but if you refresh the application you will get back your old data because we are not updating in db we are just updating only on front end so this way you can basically perform the update operation so update operation is completed over here now we are going to basically work on the sorting functionality so we can sort each column so we have to work on that functionality let's start working on the sorting functionality in this application so i am going to create one state so i'm just going to copy this one and i'm going to have state like sorted info okay set sorted info and this will be object empty object and we have to adjust our columns property so here what we have to do so we have to provide one sorter okay and we have to check length so a dot name dot length minus b dot name dot length okay and we can just copy this one you can just paste it over here and we have to just update this one so it will be email it will be email and this will be name actually same thing we have to do for the age column so it will be age and the same thing we have to do for message column so it will be message okay now we can check this one whether it's working or not so let's go into the browser refresh this one so still compiling our application is still compiling let's wait for the compilation end so now here you can see that we have got our sorting icon so you can sort this one okay so sorting is working here now we have to also store the sorting information so we have defined one state here sorting information so we have to store the sorting information because we are gonna having a reset functionality as well later in this application so for that purpose we need to store that sorting information so on table component we are going to have one on change okay and this one having one method handle change okay and let's define this handle change here somewhere i think we can define here only okay so cost handle change and it's gonna receive a sorter okay that we have defined here okay after that let's just do a console log so i wanted to show you something so let's refresh this one let's open the console let's open this console okay let's do a sorting so you can see that we are getting some console log over here so you can see that at second index we got some information so you can see that column key is undefined here so we have to set the column key to email here in our sorted info state okay so we have to so we have to provide this email to this column key as well so it will be helpful once we implement the reset functionality later in this application so we have to set all this information in our sorted info state so what we can do over here so we have to destructure those property so in the second index we have that order and field okay after that we have to set the sorted info and here we have to provide the value to our column key so it will be filled and we are also storing the order so this thing we have to do after that we have to add some more thing in this columns array of object so sort order sort order sorted info dot column key now we have this column key and sorted info dot order now the same thing we have to do for the rest of the column so it will be email this will be it and this will be message let's save this file i hope we didn't break anything so let's verify again refresh this one okay so everything is working now you can see that we are getting proper sorting order so there is no issue after adding those logic so we are done with the sorting functionality now we have to work on our reset functionality in this application so let's go into the vs code so now we are going to have the reset functionality in this application so we have to add one button so i i'm going to use your space component from android design and i'm going to provide some styling so that is margin bottom and it will be 16 and here i'm going to have button and this will be reset and i'm going to give you on click and this will be having a method reset okay so let's define this one so i'm going to define here only so reset and we have to basically set sorted input to make empty object and we have to again load the data so we can call this one so we have defined this load data here you can see that so let's save this file and verify this one whether it's working or not so here you can see that we have got one reset button so let's perform sorting here so i'm performing sorting and if you click on reset so our entire table component is got the reset after clicking on this reset button and our original value got restored in the table component so you can see that it getting reset to the original value so the reset functionality is completed in our application and the next functionality we are going to work on our search functionality in this application so let's implement that one so guys now we are going to implement the search functionality in our advanced data table so we have to define some state to implement the search functionality so let's define here const search text okay set search text use state and we are going to have and we are going to have one more state that will be a filtered data and this won't have any kind of setter so it will just have a normal state okay let's save this one and we have to add one input field along with the search button so we are going to add here only so we have already bring that input component from our and design and here first we have to give placeholder enter search text something you can give here and we have to provide unchanged method so handle change we have to give and type will be the text allow clear and we have to pass that value that we have defined in our state search text okay so first let's work on this one okay so we are going to have one handle here where we are going to set the text value on each typing so first we have to do like select search text a dot target dot value and if you are clearing the input field by manually so we have to also do that one so let's assume you are clearing the input field and it's become empty so in that case i wanted to load the data from our json placeholder fake api okay so this is done for handle search sorry this will be the handle change not handle search okay now let's add search button here so i'm just going to copy this one and this will be a search type will be a primary and we are going to have a onclick method so we are doing here global search so method will be also global search because we are going to search a particular value into each column we will also going to have column level search later in this application so first let's focus on this one so let's define this global search so const global search why we are getting a error here so handle input change it will be so let's give here handle input change here what we have to do so filter data equal to modify data dot filter value and here i'm just going to return so we have to check each column so value dot name dot to lower case includes that value search text dot to lower case so it will be lowercase two lowercase and we are doing here global search so we have to basically check for each column so we have to give here our condition and we can just copy this one and this time we are checking for the column email okay and here let's format this one and we are going to have one more or condition for the column message so here we can just copy this one and this will message and i think that's it and after that we have to set the grid data to filter data okay and once you click on reset button so in that case i wanted to basically clear out the search input field as well so we can do like set earth text to empty let's save this one and we have to do some small adjustment here as well so here we have to check if we have the filter data that means the user is doing search operation in this table component so in that case we have to show the filter data okay it will be filter.length else we have to show the modified data let's search with the name jn okay so we have one name here jn okay and if we search we are getting this data and if you clear out this one you will get back all the old data and if you just type something here and if you click on reset then it will basically clear out this input field and if you just type this one gen and if you search this one and now you are basically manually clearing the input field so in that case also you will get back all the data that we have in our this json placeholder fake api so we have implemented the search functionality in this application as well now we have to implement the searching at a column level so you can also search the value at an individual column and we have to also highlight that search text as well so we will be implementing this functionality now and i wanted to provide some margin at the top so first let's add some margin so i'm just going to give here margin top so it will be 20 pixel let's go into the browser so let's refresh this one now you can see that we got some margin at the top so now we have to implement the column level search functionality so we can perform the search operation as well on the individual column and we have to also highlight the search text so we have to install one package so we have to install a react highlight word one package so let's install that package npm install react highlight words okay let's wait for the package installation so to implement the column level search we have to define some state i'm just going to copy this one couple of time and this will be like first column text and set search column text and this will be search column okay so basically which column we are searching so we have to also store the information and this will be set first column okay so this will basically hold in the information about which column we are basically searching and this is state basically holding what text we are searching in that particular column now after that we have to define one function over here now function name will be get column search props it will be a function we are going to receive a data index okay and remove this one because this will be error function and by doing this way so we don't have to write a return keyword so it gonna having a filter drop down so we have to pass some value set selected key then selected key conform and clear filter okay after that we are going to have our dvr with some inline style so we wanted to give here padding zero we are going to have input field placeholder i am going to give here like search so we are applying the column level search on name email and message column field so here we can provide data index so data is nothing but it will contain our column name okay that is name email or message after that we are going to have value so selected key and we have to select zeroth index on change we are going to have it will having event and set selected keys so e dot target dot value so if you have any value so we have to basically set that one into this error e dot target dot value else it will be empty array after that we are going to have if you have press enter so in that case we are going to have one function that is handle search call selected keys we have to provide confirm along with data index okay we have to give some line styling to this input field so that is width 188 margin bottom 0 display block and after this input field we are going to have a space so once you click on that search icon so we're gonna having a two button like search and cancel so that button we are going to basically display below this input field so we are going to have our button component and the type will be the primary then on click we are going to have so you can search the column by pressing the enter or you can click on that search button so both way you can search the value in the column so again we can write this handle search only and we can again pass the same value so i'm just going to copy this one and i'm just going to paste it over here let's format this one now after on click we are going to have icon so we are going to bring that search outline so we have already installed this add design icon at the beginning so make sure uh import from that and design icon so you can see that at the top we are importing this one search outline and after this icon this size will be the small okay and style i am going to give so button value basically will be this small and width will be 90 and let's keep the button value search here okay let's format this one after this button we are going to have one more button for reset okay so i'm just going to copy this one and i'm just going to paste it over here so this time it will be handle the reset column okay and here we have to provide clear filter okay and this will be clear filters okay so it will be clear filters now we don't need icon here and the rest of the thing will be stay as it is only the value of button will be the change to reset okay so this part is done now the next thing we are going to have a filter icon filtered that outline and color will be filtered so i'm going to give here color like else it will be undefined then we are going to have one render okay render text so searched call is equal to data index so in that case we have to use the highlighter so we have already installed that highlighter package so we need to bring that highlighter so i'm going to bring that highlighter component and let's use highlighter here highlighter and here i'm going to pass highlight style inside that i'm going to give background color so the color i'm going to give here [Music] 0 6 9 and padding i am going to give zero then search words so it will highlight only that search column value okay so whatever you type in that search input field so it will highlight up to that value after that auto escape we have to give then text to highlight and if you have the text then text to string okay as it will be text okay let's format this one and we have to define this two function that is handle search column and handle reset call okay so it will be handled reset column okay so let's define this one below this function only so cost handle that's column so it is receiving selected key conform and data index okay so so here it will be confirmed and then set search column text we have defined that state and here we can pass the selected key and it will be a zeroth index only and set search call basically which column we are searching so we have to provide here index so data index basically containing our column name that is either it will be named email or message now after that we have to define handle reset column okay then clear filter we have to give here and we have to just execute this one and we have to also make sure search column text will be empty okay now we have to use this method will get column search props in our columns area of object so here we can use like this way get column start prop and here we can pass the column name that is name okay same thing will goes for email and message so here we can pass email and for methods we are going to pass here method okay and for each column we are going to apply a filter okay so we will implement that one later first let's focus on this individual column search so let's save this one let's refresh this one so we are not getting that icon so let me see so we have to write one more property here like on filter value and record and here it will be record so if you have that record then record data index dot to string dot to lower case includes value dot to lower case else it will be empty so let's save this one let's go into the browser refresh this one so now we are getting this search icon you can see that here okay this search icon we are getting over here we have to basically make sure to remove this one type primary from reset button and here we have to give the padding 8 okay so let's save this file let's go into the browser so if you click on this one we are getting this input field search name and let's keep some margin top as well [Music] around this button and input field so so in space we can give like style margin top let's skip to okay um refresh this one let's give some more margin so now we have some space between this input field and this button so let's search with the alias on this column so now you can see that we are able to search the column individual column with this functionality and the text is getting highlighted as well so whatever the text you are giving over here it's getting highlighted and if you reset this one so it will remove okay so this is working okay now the next thing basically we wanted to add a filter here so for each column we don't wanted a search we wanted to place here filter and in the application the way we have said that it will always vary in between 20 to 30 okay so what we can do over here for that age column so to implement the filter for each column we have already written this one on filter so we have to use that on filter here in columns area of object so what we have to do over here so here first we have to provide the filter okay and then we can have a text here value so you can just copy this one couple of time so the age we have set in this application it will always vary between 20 to 30 so i'm just going to filter out up to 25. you can add more if you want so it will be 22 23 24 25 okay and after this i am going to have filtered value filtered info so first we have to basically write one state here for filtering so it will be having one filtered info state filtered info set filtered info and we have to use this filter info here in our handle change so now uh this will so now this we have to change little bit so the first argument will be like this and here we have to give filter and then we are going to have sorter okay and here we are going to have set filter info then we are just passing here filtered okay and make sure the set filter info also we have to use on our reset function okay so here also it will be set filtered info it will be a empty object and initially state for this filtered info also it will be empty object only now we have to use this filtered info here okay inside this columns array of object so filtered info dot age if you have then use this one here else it will be null after that we are going to use on filter which will having a value record we are going to use a string record dot age dot includes value okay so let's save this one and let's go into the browser refresh this one so now you can see that we are getting this filtered icon and if you select this one let's click on ok the filter is not applying make sure this sorting is working or not so starting is also got hampered here so let me fix this issue so sort functionality got broke due to argument change over here so now we can deal structure this way only and let's save this one first and let's go into the browser refresh this one let's do the sorting so sorting is working refresh this one so our sorting functionality got fixed let's see this one is working or not so now you can see that we are able to filter our column as well in this application based on the value that we have here okay so filter functionality is also working on this age column okay now the next functionality we are going to implement like expanding a row so suppose uh this row contains some information so we can provide some kind of expandable so if you click on that plus icon it will show some information about this particular row so to implement the expandable feature we have to basically add one information to our uh this data grid data so here we are basically modifying our data you can see that here so i'm going to add one more piece of information here like info property so it's just a random property i'm just adding in this modify data so e0 will have this info property so we have 500 record and 500 data will have this info property okay so once you click on that so once you click on that plus icon it will show some information about that particular row now we have to do some adjustment in this table component okay so here we can have one more props like expandable and we can provide here one expandable row render render i'm going to use your p tag okay let's give margin 0 only and it will be basically record ok not render so we have to show the info property so record dot info okay after this row expandable and record so record dot info not equal to not expandable so let's save this file and let's go into the browser uh refresh this one so now you can see that we are getting this plus icon and if you click on this plus icon it will show like my name is this and i am 25 year old so basically what i have did here in this modify data so you might be wondering what i have did there so in modify data you can see that i am just using this email and i have split from this at the red so basically i am using this word before this at the rate as a name so this is basically become name and i am using this age property which i have added here okay so this basic information i have just add on each row you can see that okay so guys expandable draw feature is completed in this application so you can see that we have implemented this extendable row feature now we are going to implement the functionality of dragging the row up and down so we can basically drag this row up and down so we are going to implement that feature so let's go into the vs code so in order to implement drag and drop feature in this application we have to install some packages so let's install those packages first then we will able to implement the drag and drop feature so we need to install package like react dnd and react dnd html i backend and e mutability helper helper okay so let's install these packages first so let's wait for the package installation so guys you can see that our package got installed so let's close this terminal and we need to import something from those three packages so from react dnd we need dnd provider use drag and use draw focus after that we have to bring html5 backend from our react dnd html5 backend so we need this html5 backend then we need to bring update from this immutability update helper okay from react we need here use ref okay and we and we might also required use callback here so let's bring this up now we have to define here one type const type pixel to draggable row okay draggable body row after this we have to define one ref for our table so table trap equal to use ref okay now uh we can basically define the function here only let's define const draggable body row it's going to receive some props so index move row class name and style and the rest of the rocks okay so cost ref is equal to usrev now we are going to use that to use drophop so from use dropbox we are going to this structure is over and drop class name okay and inside that we have to pass like except it will be type which we have already defined at the top you can see that now after this you have to define collect we are going to pass here monitor and const index const and monitor dot get item if you have the item then we will grab that item it will be empty object so it's gonna having index and drag index okay so it will be index actually if drag index equal to index so we have to just return the empty object so if the index is same while dragging then we don't have to basically move because because we are placing the table row on the same position after driving so in that case it will return 0 if the index are matching and index are not matching then we have to basically move to that specific position so in that case we are going to return is over monitor dot over dot ease over drop class name so drag index is less than index then i am going to specify some class name here drop down down word drop over upward okay now we have to drop that uh row on to that specific position so basically here we're gonna have that item item nothing but that entire row and we have to basically move row to that specific position that is item dot index and that's okay now after that we are going to use here drag use drag so use drag and again we have to restructure drag here so you have to restructure drag and again we have to specify here type item index collect monitor is dragging sorry is dragging then monitor dot is dragging after that we have to use here drop drag rep okay now we can return here a row okay so we can return a table row here and it will be self-closing so we can remove this one and we can pass here class name we can pass here so class name and here we can check if is over and then we can use here drop class name else it will be the empty now style so cursor i'm going to use here move and rest of the style i'm going to pass as it is and let's pass the rest of the prop to that table row that will contain the information like name email message is okay so these are the thing like uh name email age message so these are the data that's come under the red pro which we are not going to touch okay so that's why we are passing as a rest props so let's format this one now we have to define this move row function okay which we haven't defined yet so let's define this one so cost move row and i'm going to use here use callback and inside that i'm going to have drag index and over index okay then let's have a drag row modify data i'm going to use here because we are modifying the data here modify data drag index set grid data and here we are going to use that update component that we have bring from this immutable helper package inside update we are going to have modify data then i am going to use here splice and here we have to basically specify the index so drag index 1 and hover index 0 comma drag row okay so here we have to pass that dependency that is modified data okay now let's format this one so this look good okay now this move row basically we are going to pass from our table component okay then it will receive as a props here now we are going to pass this draggable body row to our table component then only we are going to receive this props like index move row class name style okay so what we are going to do now so this is our table component now we are going to use here dnd provider and let's cut this entire table and i'm going to put here and inside this dnd provider i'm going to use here backend and let's give your html5 back-end okay now in body we have to provide row and here it will be draggable body row okay let's pass this props on row and we are going to have record index and here we are going to pass index and move row okay so this function we have already defined here so most of the thing we have completed over here now we have to specify the styling for this class name that we have used over here okay so let's minimize this one so let's go to the index.css file so i'm going to paste the styling for those class name so this is the styling i'm going to use that is drop over downward and drop over upward so you have to add this styling in your index.css file now let's save this file and let's go into the browser whether our drag and drop feature is working or not so something issue okay let me see the problem so to fix this problem basically we have to do some kind of patch in our node module okay so let's go to this path and so we have to go to that path so first let's search here react dnd so this is our react dnd we have to go to the test folder then we have to go to ecm esm then core and then which file we have to go dnd provider dot mgs okay so here what we have to do so we have to basically remove this dot js extension okay so let's remove this one and save this file now let's go to the browser so it's look like we have solved that problem but we have another issue so let's open the console so you can see that we are getting cannot access modify data so what we can do here so let's go to this vs code and we can just cut this one and we can put it below this modify data let's save this one and guys we have to also use this one table drive okay that we have defined here so we have to use this one here in our table component so we're gonna having a ref here let's go to the browser so now you can see that we are getting the data in our table component so we have resolved that issue so make sure to update this import statement at the line number 28 then only your issue will get resolved so we have provided a patch in this node model folder so let's minimize this folder and now let's verify our drag and drop feature is working or not so let's uh drag here and drop here okay so you can see that our drag and drop feature is working as expected so we have implemented this drag and drop feature in our current application so now let's move on and work on our last feature so we are going to implement the export functionality in this application so that you can able to export the data into csv file so we are going to implement that export functionality in this current application so let's go to the vs code so now we are going to implement the export functionality so first we have to install one package so i'm going to install one package like reacts csv so npm install react usb let's wait for the package installation so our package got installed so let's close this terminal and we have to bring psp link from our react csv so csb link we have to bring and here under the return we have to basically add one button so i'm going to add button inside that i'm going to use csv link okay and we can have here like export and here we can provide the data so we are going to use here modified data you can also use this condition like if you are doing some kind of filtering so you can also do like this way okay so you can also get the partial data as well if you are doing some kind of filtering so now i am going to provide some styling to this button so background color i am going to give here so it will be as c 2 1 5 e color i am going to give here of the text that is white only so i'm just going to give triple f let's save this file let's go to the browser and verify whether this working or not so now you can see that we have got our nice export button here so let's click on this one so now you can see that we have got one csv file in the form of excel sheet so let's open this one so now you can see that we have got our data into excel so we have 500 data you can see that it's displaying in the action so we have also implemented the export functionality in this current application so guys we have implemented the last feature in this current application so now we will be working on some bugs and installing issue that we have in our current application so in current application we have some bug and styling issue so first we are going to work on the bug then we will be working on the styling issue so if i open the terminal you can see that we are getting this kind of warning okay so this is something related to the and design styling issue so what we can do to fix this issue so let's go to the index.js file and here it will be and design.main.css so we have to bring this stylesheet from this path okay so let's check our terminal so now you can see that we are not able to see that warning message in our terminal so this issue got resolved now we have one more issue in our application so let's go to the browser and see what is that issue so let's search with the alias here so you can see that it's highlighting only the fourth row and it's also not getting filtered out and it also should show the all the sentences that contain the keyword alia so it's not getting filtered out and it's also not displaying the other sentences that contain the alias keyword so it is happening due to this filter okay so to fix this issue what we can do so while searching we can disable the filter okay and if you are not searching then you can do a filter so we are going to disable this feature if you are doing the column level search so let's fake this issue so we need to go back to our vs code and what we can do here so we have to define one state here so cost so filter and set so filter okay then we are going to have use state and by default it will be the true so whenever you load the application so we are going to show this filter okay and after that what we have to do so since it is happening due to filter so what we can do so we can just cut this one okay and i am going to define one here variable that is filter object for cost filter object and i'm going to paste over here okay and here i can do like fast so filter edge okay so so filter so by default is true so it's gonna having a filter object else it's gonna having a null okay and here inside this edge we are just going to spread out that is so filter is okay first let's save this file okay we have to search here handle search column so what we can do here let's remove this console log we don't need this one and here we can do like set so filter to false that means once user doing column level search then we have to basically disable the filter and if you click on reset in that case set so filter will become again true so let's save this file and see whether it's working or not so let's go to the browser refresh this one now i'm going to search here that alias so now you can see that this data is also getting filtered out and we are also getting only those data which contain the alias keyword in their sentence okay so now this is working and the filter is disabled here you can see that okay and if you reset our filter will get back okay so this issue we have fixed from this application now we are going to work on our styling issue so we have some installing issue in this application i am not going to say that that is a styling issue but i'm just saying like it's not looking good so this icon should be beside this column name so it will look more elegant okay so let's fix this first styling issue so what we can do so i am going to index.css file and here i am going to add one styling so basically what i am doing here so i am just going to overwrite the styling that is provided by our and design so if you give this styling to this column then that sort icon will look much better now you can see that this thought icon is looking good okay now the next styling issue we have related to our pagination okay so i wanted this pagination to the bottom center so what we can do here so let's go to this index.js file and here we're gonna having like pagination props we can use here and here we can give like position and we can give that bottom center inside this array okay so let's save this file and let's verify this one whether it's working or not so now you can see that our pagination is showing in the middle below this table component now i wanted to provide some kind of uh padding around this table component so let's go to the vs code and inside this app.js file we have to provide this this styling so i'm just going to uncover this one so let's give this one like margin padding max with align content so let's give all this thing and let's go into the browser so now you can see that our table components look more elegant so this is a small small styling issue we have fixed in this current application so guys we have implemented all the features that i have showed you in the starting of this video so we are successfully able to complete this application and i hope you have enjoyed building this application with me and i hope you have learned a lot from this video and if you find out that video is useful then please share this content with your friend and colleague so kindly share my knowledge with your friend and kali and before we wrap up this video if you haven't subscribed this channel then please subscribe the channel and like the video as well i will see you in the next video till then good bye and take care

Channel: CodeWithVishal

Views: 21,588

Keywords: Build Advanced Data Table in React using Ant Design, Advanced Data Table in React, react table tutorial, react table pagination, react table filter, react table sorting, react table component, react tabs component, react drag and drop grid, react table advanced, react table editable row, react table expand row, react table export, react table from json, react table from scratch, react antd tutorial, react data grid, table in react js, react complex project

Id: XYgT1KsSgwk

Length: 123min 18sec (7398 seconds)

Published: Fri Apr 08 2022