Building a table with sort & search using VueJS | Manoj Singh Negi | Recraft Relic

hey guys welcome to reclassified channel and i hope you are doing well so today we are going to build a table in vue.js with the ability to short its column and searches column all right and yeah before starting if you like these live coding sessions that i do every saturday please subscribe to the channel like the video and share it with other people all right with that being said let's get started so as always i have this uh dummy uh you know dummy project view project that i already have built so i'm just going to remove these things and i'm for styling i'm using tailwind css as always um and i have added the cdn link here you can see tailwind css right uh basically the whole idea is to build a table load data in it and then allow the ability to sort its column and also search its columns you know so you can search the records basically and filter them out all right so um let's get started uh first and foremost i'm just going to remove these uh you know dummy things instead of hello world i'm just going to say table and i'm going to remove this as well table import table i'm going to go into the components hello world rename this to not this um hello what do it view to table dot view and i'm going to re remove all of this i don't need this uh maybe not this as well right and uh i don't need the styling because i'm using tailwind i don't need this and the name of the component will be table right so i'm just going to open inspect in case you know we run into an error or something all right so let's start by creating a table so instead let's keep that um it will be a table right table with a head and a body so on the head right and t body and inside the body there will be a you know like a tr a row right and inside here there will be t h right so these will basically be our column so for example let's start with a name um our name you know we can go with age and then we can go like i know maybe profession yeah let's go with that so profession right so this is our like basically our columns and then the really body so let's style it a bit uh first and foremost this div i'm going to give it a class of m or not m padding from everywhere 10 so i have given give it some padding and great then this tr right not tr but let's start with the th so i'm just going to give it border two and uh yeah that is pretty much it right oh no so let's uh give it also the padding p5 p5 is too much let's give it p2 right and then i'm just going to copy this class over all the th and it's going to make us a perfect you know columns and stuff right now let's go to the uh t body and say uh tr right uh we we are going to make all of this dynamic i'm just doing it so i can get the structure right uh at first and then we'll basically change this to you know dynamic content so tr td great uh let's start with my name age 24 profession software developer right and i'm gonna do the same going to do the same class thing with this because i need uh you know i need to be same and yeah here we go right so looks pretty cool great i don't want uh this to be like centered i want it to the left so what i'm going to do is i'm just going to say text left here and it's going to move it to here here as well and here as well right so so we have name age professional software developer great if you want to add more data we can do like um like maybe uh year of birth you know and add it and say 1997 for me right so yeah so it looks pretty cool the design and stuff let's uh try to make it dynamic uh what i'll try to do i'll try to um pass the data from the right so let's go here let's say data here and say return right and return and it will have rows and then we'll have columns as well you know which you can see above right so rows and column great and then let's create a row so rows will be array of row array of array so first will be like i know manoj uh 24 so i'm going to make everything uh string for now just to make it easier for certain stuff but in real life scenario you can uh always you know mix it with different data types for the tutorial sake i'll just uh keep them in string i'll make it john make these 26 software developer i can just say lawyer and according 26 it should be 20 um and yeah let's do one once more one more um say lily say 34 say um sales woman [Music] and yeah i'm very bad at math so i'm just going to assume 20 24 right so i have to minus 10 right so 1987 right so this will be our rows and column columns will be name name h profession and year of birth right so let's uh map them here so instead of this what i'm going to just say um so i'm just going to refactor it a bit yeah so instead of t uh like static data i'm just going to say v4 equal to column index in columns right and i'm going to bind the key we bind key equal to index right and here i'm going to display the column uh this will be double right so once and i'm going to remove this let's see how it works without this page yeah it works great and now instead of this what i'm going to do is i'm going to say v i'm just going to copy it because it's much more easier to do it that way so v4 just going to say instead of column i'll say row in rows row index and rows this will be index and for this i have again have to do a uh a v4 the reason being it's an array so it's an array inside an array so what i'm going to do is just refactor it a bit first and just say the same thing but instead of row it will be raw it will be rows it will be row and item and this will be item index and i'm just going to go here go here do this to this save and yeah you can see uh we successfully have dynamically shown the data here right uh i'm just going to add more rows to it so i'm just going to say maybe rachel you know sales oh man that's fine i'm just going to say ross i'm going to say uh you know maybe a bubble right and i'm going to say no who is actually was ourselves now right or he was accounted i'm not sure but yeah um just go with this and uh i'm just going to make it 30 going to plus 4 into this and yeah so yeah i can you can see this great so now let's make it searchable first you know let's go with the searchable uh part first and then we'll make it sortable as well so for the searchable what i'm going to do is here i'm going to create another dev and an input type type will be text right and type will be text i'm going to give it some classes class equal to border two right i'm going to give it margin from bottom maybe five and i'm just going to make it border rounded and uh let's increase its height as well right um this is too much maybe um i don't know if there is a 8 is there maybe a 12. 224 maybe um i think it's fine it's fine like this so um all right so i'll we are also going to give it a placeholder placeholder equal to search records uh and we are going to give it padding because it's not looking good so padding from everywhere too right and yeah i mean all of the fields were will be searchable so we're just going to keep it lightweight like all the fields are searchable and great search records let's start um how this work how this will work um and then we're going to define some methods here the first method will be on search what will happen on search and we're going to take the event we're going to extract the term from the e dot target dot value so whatever the text is was inside that search we are just going to take that um right term is assigned available oh yeah so now what we have to do is we have to perform a search right so one thing is there so there will be a uh like you know uh our raw rules the reason being this will be the um you know the uh basically um what we have to show to the users right but we are going to show the user and then there will be another uh variable called rows so this will be like the true data source which will hold like all of our data and these rows will uh will be will be the you know rows that we want to show to the user right so that's how it's going to work right and what i'm going to do is i can just say mounted and on mount i'm just going to say this dot rows is equal to this dot our rows right and i'm going to just do this for now just to see if this work right so you can see it works so it's still uh even if our rows are empty on mounted we are just assigning that this dot draw rows value to this and it's basically being shown here the reason i'm doing it because i want to modify this dot rows according to the filter so i'm just going to filter the records and just basically you know save them in the state and display them there so now what i'm going to do is this dot rows so let's create a function outside um this so yes here go ahead create a function called const um perform search perform search and we are going to take the [Music] all of the rows and the term as well and we are basically going to return the result site so i'm just going to say return results return results and here i'm going to say const results equal to um rows dot filter row and what i'm going to do is i'm going to join all of the uh you know all of the items basically so this is the row so this is a single row right so i'm going to join all of this into one string and then perform search on it so something like this um row.join using a space and then dot includes the term so basically what uh this will do is it will convert this into a single array manual space 24 space software develops per space 997 and then perform the search on it that if it includes the term that we have uh provided in the search box and if it matches it it will return the result you know so it's basically it will be like that so perform search uh what i'm going to do is here this dot rows is equal to perform search rows term will be uh the term that we have right so rows is not defined it says yeah it's not because it's this dot rows right and then i'm going to go here and say at input uh on search so who don't uh some of you if you don't know what is an at input event it is same as on change but uh you know in what happens with on change is that unchanged only fires when input gets blurred when you click outside then only on change gets fired but with add input whenever you just start typing it will you know as you start as you type another word it's basically going to call that input so it's going to be like real time uh you know change so let's get uh let's you know let's try to search say manoj so search great um let's say type ros but it doesn't search again the real reason is that you know um once you search like manoj then the rows get modified and the next time the only record inside rose is manoj and that's what's happening uh that's why we don't able to find royal ross so instead of this we'll do raw rose because it is like you know the row rows always have the um you know like all the data so it doesn't uh we don't modify that variable so it will always hold it so i can say manoj and you can see it again goes through it i can say john i can say ross right i can say barber it will search it as well i can say developer it will search i can say 87 it will search everything with the 87 i can say nine one nine nine it will search all the record with the one nine nine i can say one nine eight as well same story right 24 you can say four right so basically the whole table is searchable right um yeah so that's great but there's one problem with this table which is this so for example this is a case sensitive search so for example if i type manoj it will not uh match the record the reason being the term that i provided the m is in small letters right uh where uh the name uh in the actual data record isn't kept capital rate right and m is a capital so what i have to do for that is whenever you're searching um and this is very common whenever you're you know making a search functionality is to convert everything to lower case uh if you don't want your search to be such like case sensitive right so it will make everything case insensitive and you have to do it for both uh the term and the record that you are matching the reason being someone can type like you know uh like a capital m or capital l or whatever so now if i do this it works and even if i do this it works right so that's basically what we wanted to achieve so our record is searchable now that's great let's implement shorting and you know get this get done with this session so for uh sorting what i'm going to do is i'm going to um keep a sort index okay which is null in the start so basically it will be you know our track uh according to which column we have to short right so we are basically tracking which column we are shorting and at a time we can only short using one you know index right and yeah and yeah so let's uh get started with that another thing that i want to do is short direction right so are we so you know shorting in which direction asc or dsc whatever right so by default it will be null as well so let's get started with that what i want whenever i click on any of these column it will call on short all right so v on click uh let's say handle short or short records i think that's a better name short records and i'm going to pass the column index basically you know which property we want to index using so great short records why this is in capital so now let's um let's define our method here on uh not on short records and go here go here the comma great so we received the index here great and i'm just going to say this dot sort index is equal to that index and what i'm going to do is this dot rows equal to this dot rows dot short row right um let's don't worry about the direction right now and uh just perform a short in ascending manner so i know the index right so it's going to take two rows right not one so it's a shorting uh method right so it's basically going to give us two rows to compare between so what i'm going to say is return row a dot local compare to row b index and index here as well so i'm going to explain what's happening here in a sec but just uh let's save this work somewhat okay local compare is not a function yeah local campaign let's see if this works c j l m r right this c g l yeah so shorting works for this so if uh you know just reload this click on name and then you can uh see uh in all of these getting shorted click on profession they are getting shorted as well year of birth great and age great shorting works that's great so basically look i'll compare what we do is basically you know compare uh strings and see you know which strings comes first and just short this is not the best method to implement shorting i think you should implement shorting according to the data type for example if it's a integer you have to uh basically implement the shorting differently if it's a string you have to implement it differently if it's a date then you have to do it differently but in our case this is a simple example we can go ahead with this and it will be fine but yeah i know the implementation implementation will be similar you just have to keep track of what data types uh you know you're shorting using so for me they are simple strings i'm just going to go with that great it works so let's implement directions now so how we're going to implement direction so we're just going to say if there is already a sort index if short index if this start index and the index that is that we want to short again is equal right um basically what we're going to do is switch case this dot short direction right if it's null then uh not like this if case null then we're just going to set the uh shot that like set the sword direction equal to asc right if it in case it is asc already then we are just going to say this dot short direction to d e s e and in case if it's d s e already then we are just going to uh short the like key set the saw direction to null uh okay if it's already [Music] right or else it's already not set right um then we are going to say this dot um this dot um short direction equal to asc because by default it should be ac right great great great great if it's not then it's asc makes sense yeah i think it will work so basically what will happen if you click on one column uh the short direction will be now so it will be set to ac then you again click here click on it then it will become desc because the short index and the index is common and then at the last you know if it's dsc and click then it will become null right makes sense um there's another thing that i have to do is if this dot short direction is null you know so null means that we don't want to short it then we are just going to overwrite the record with this right and return the reason being we don't want to short right so we'll return to the original arrangement original arrangement of the you know items basically expected a break statement yeah obviously there should be a break um break and break it makes sense now here what we have to do is if right so if it's ascending let's keep it that this way you don't have to worry about this uh but if this dot short direction is equal to d esc then in case you have to like basically switch it back so you basically switch the direction right i think this will work all right let's see if it works i click on name let me see what's happening so i click nothing happens let's see why so it should be shorted right um uh it should be i rather can just say not it should be not right so basically we want to uh you know get back to our original arrangement only when the short direction is null click on it uh it basically you know shorted according to ascending order now descending order it should get back right it is not so it takes another click let me see console.log this dot short direction so let's see uh click on this asc click on this dsc it should be null right this is null right okay i think i know what's the issue [Music] so yes let's do one thing let make a difference let's see because we are shorting right and yeah okay it worked so now if i click ascending order descending order and then back to the real result the reason it it was not working before is uh reference sharing so basically you know the reference of both of the arrays were shared so they were like actually pointing to a single address in the ram or in the memory so basically what was happening when i'm shorting and basically the short is like a you know modification method so whenever you shot it actually modify the real array so what was happening is it was uh modifying these dot rows but because these dot rows uh has a reference shared with this dot rows it's basically modifying that this dot draw rows as well so once i did this basically you know spread the raw rows basically happened that it created a new area and assigned it to this dot oh so now this dot rows and the the original error these dot rows are like you know two different arrays you know not pointing to the same address in the memory so now it works because you know uh they both are like different early so now you can click and it works h same goes with age same goes with this as well let's load this right and uh yeah i mean that's pretty much it the one thing i want to do is i want to see if it works with search as well so for example if i'm searching for 34 will it work with search you see what is happening the reason is i'm resetting it here so instead of doing that what i actually have to do is do this and where i will got the term i think i have to do this dot term here as well so basically what i'm doing right now is let give me a second so let's see if our search works right now or not it do so for example let's say 34 now if i click on this click on this right so it's working uh yeah so basically uh the reason i uh did a perform search here is because um when you're shorting right uh what i was doing is i was doing i was assigning this dot to arrows which is like the uh you know the whole whole array we don't want the whole error in your search right when you're searching right so when you're searching you only want to short those records right and yeah guys this is pretty much it you know you can go ahead and play with this i'm going to provide the github repo in a bit uh in the description so you guys can go ahead and check that out and yeah so we basically created a table we uh loaded dynamic data into it we implemented search and shorting into it and yeah so next saturday i am going to come up with another live coding session if you want me to uh you know do a video on this a specific topic please do let me know and i'll try to make that happen and yeah so catch you guys on saturday till then have fun

Channel: Recraft Relic

Views: 256

Keywords:

Id: kNmnhXItK0g

Length: 36min 30sec (2190 seconds)

Published: Sat Aug 07 2021