Angular Sorting and Filtering Data - Without Any Libraries

in this video you will learn how to implement custom angular table without any libraries with such things as sorting and filtering [Music] really often you need to implement a table inside angle and you might think okay I need a library for example you could take tables from Material UI but the main point is that you must understand their documentation sometimes it's not flexible enough and it is easier to support your own code additionally if you don't have lots of tables but just one it makes a lot of sense to implement it on your own because it is not that difficult this is exactly what we want to do in this video as you can see here I already prepared an API localhost 3000 for slash users where we're getting array of our users we have here ID name and age and this is exactly the data that we want to render inside our table which we will render in our module users table this is why here I already prepared an empty project you can see I don't have anything and now I want to create a new module by new module because we want to completely isolate our feature with user stable in side and module so let's create here a new folder users table and inside our module users table module TS now inside let's create NG module and inside our inputs we want at least to register common module in this case we can use things like ngf and G4 inside our components now here we must export our class which will be users table module so our module is there now we must create our component this is where here let's create new folder components and inside at least we must create Azure component user stable and later we can create more components if we need to so here is our folder users table and inside we will have users stable component HTML user stable component TS and user stable component scss now let's write something inside our HTML for example users table and let's register our our component so here we have a decorator component and we can say that we have here a selector for example users Table after this we must provide our template URL which we just created and it is user stable component HTML and also our style URLs and here it will be user stable component scss and we must export here our class which will be user stable component now we must register this component inside our module so let's jump in our module and here inside declarations we can register our user stable component but it is not all we also must export it because we want to render it inside our app component this is by here we can export our user stable component and the last step that we need to do we must use this module inside our app module TS so here inside Imports we can add our users table module and it allows us Insider app component HTML to render our component this is where here we can write users table and this is exactly the component that we just created let's check in browser as you can see we don't have any errors and here is our component user tables it is rendered which actually means we successfully created a module and the component inside now we can start to implement our table but actually I want to start with the interface because as I already said we want to get from the API this interface for this object and this is actually a user and it makes a lot of sense inside the users table to create a new interface this is why here let's create a new folder types and new file for user interface TS and here we can export our new interface which will be our user interface and as you can see inside we have ID which is a string name is string and age is a number so let's do this now here is our 80 name and age we which is a number and our interface is ready and we can reuse it everywhere now we need to somehow fetch this data from the API to rendered inside our component because typically we're not rendering inside table some static data we're getting this data from the API this is by here inside our users table we can create services and here we need new service for example users.service.ts verb will fetch our array of users so here we must register an injectable service and let's export here our class which will be user service now inside we need just one method which will be get users and this method must return fast and observable of our array of users this is where here let's write that we're getting back an observable of user interface array this is where it is really nice that we created this interface because we can reuse it everywhere as we want to fetch data we must use HTTP client this is why here inside Constructor we must inject HTTP client and we are getting it from HTTP client now inside our get users we can prepare our URL and as you already saw our URL is localhost 3004 slash users and now here we just want to return an observable this is right here HTTP client dot get and we are providing inside our URL and we don't need any options and as you can see here we're getting an error the type observable object is not assignable to observable user interface because by default HTTP client get is giving us back an object and here we want to specify that we are getting back a user interface array in this case here we are getting the correct data and it is typed correctly so our service is ready now we must register it inside our module this is where here we can create providers and throw it here it will be our user service and now we can fetch this data on initialize inside our user stable component for this we must add here implements on init and create NGO unit function so here engine in it and we want to fetch this data here but for this we must use Constructor in order to get our user service that we just created so here is our user service and now we can fetch this data inside engine in it and it will be this user service and here is our method get users which has given us back an observable this is where here we can use subscribe and we are getting here users and now we can assign them to some property this is where here we can create a property which is called users and we know that this is array of user interface and by default we can set it to empty array after this Insider subscribe we can simply assign inside this users our users that we got from the API let's check if it's working for this I will simply write here console log users and then an initialize we must get here in browser our array and as you can see this is exactly our array from the back end we can see it inside console and inside Network we can see the request which is 200 and it is localhost 3004 slash users which actually means we successfully implemented fetching of the data from our API now let's start to render our table this is by in our HTML we can simply write table and inside we want a standard markup of the table from HTML so here we have our Tech head and then the body and inside our head we must have a row with all our cells of the header so here we will have table row and inside we want the age but we need to Rend it in the loop so essentially here we want to render all our columns but what columns do we have we didn't specify it this is why here inside our TS file we must create all our columns so what I want to do on the top I want to write that we have columns and this is just array of strings so here we can write we have 80 then name and then age this exactly properties that we want to render inside our table and now we can use these columns to render our markup this is why here we have th and we can write here in G4 Loop and here we're getting our column of columns which is an array of strings and now inside we can simply render this column as you can see in browser we successfully rendered ID name and date which means it is working correctly now after our the head we want to render the body and inside the body we want to render our rows and essentially for every single object inside our array we want to render a row which actually means with wand and G for Loop for every single row and here we can write in G4 and here we are getting every single user of our array of users and now inside for every single user we want to Trend several cells this is why here we have TD and it also must be a loop and here we have exactly the same Loop like in the headline it will be let column of columns and inside this TD we can render information from the user so here we will have our user and here column and just to remind you here we're getting the user this is this object and the column will be either 80 name or age and we simply render this information but here we have a problem let's check the terminal here we are getting an error element implicitly has an any type because expression of type string can be used to index type user interface what does it ever mean where rendering here our user and this is user interface and our column is a stream and actually user and this string is not defined in any way and typically if you use such construction it must be a key of our user and here it can be any string this is why it is not valid typescript but there is a really easy way to fix that we can simply jump inside our TS file and instead of string array here we can write it another way we can say that this is an array of key off user interface and as you can see we don't have any errors because this essentially all the keys of our user interface and now our columns is key off user interface and as you can see now we don't have any errors because this code in HTML is completely valid because every single column is essentially the key of our user and as you can see in browser it is working totally fine because we successfully rendered the content of our table and every single object is there but now I want to style it a little bit this is why here inside our scss let's create first of all users table and here I want just to set table layout to fixed then width to 100 and board a collapse to collapse also I want to style every single cell this is why here users table cell and here inside I want first of all to put some border for example one pixel solid of this color also text line left and Pad in 8 pixels now let's use the Styles inside our markup so here inside our table we can add a class and it will be user stable and now inside our th we want also a class users table cell but also here inside TD we want a class users table cell as you can see in browser now it is looking much nicer we have a full width table and here all our cells are correctly styled but it is not all I really want to capitalize the names in our header and for this we can create an additional function and we can name it for example capitalize actually this function can be reusable across the whole application but as we have just a single feature we will write it here so we want to capitalize the string and get back also a string this is where here we can return string character add zero this will be the first character we want to transform it to uppercase and then add here strain substring 1 which actually means we're taking all symbols except of the first symbol and now inside the HTML instead of this column in th we can use our capitalize function where we are providing a column and as you can see in browser all our headlines are capitalized so we successfully fetched data from the API and render them inside the table but typically you also want to sort this data and every single time when you click on the headline you want to refresh data which are sorted differently this is exactly what we want to implement but for this I want to create a new type for example here we can say that we have a certain interface task and inside we want to Define what is certain this is right here let's create an interface sorting in face and it has a column which is a string and also an order and Order can be either ascended or descending and with that certain interface we can now create a property inside our user stable component so here on the top let's create a default sorting so we can say that we have a certain property which is a certain interface and by default we are sort in column ID this is where here we have column ID and here is our order and our order will be ascended this is exactly what you see here on the start and now inside our HTML here after the capitalize column we want to render arrow down or Arrow up depending on our sorting this is why here we want to provide this pen and inside we can render a utf-8 symbol and right here in gef and actually here we want to check if we have a descending certain so is descendant sorting and we're provided inside this column which actually means we're rendering this span only open this specific column is sorted in descending order now we must write exactly the same but for ascending order so here inside span I have an error up and here let's try it one more NG if is ascending sorting and here inside we're providing our column and now we must create these two functions which will accept a column so here on the bottom let's create this descendant sorting and here we are getting inside a column and this is a string and back we want to return a Boolean now here we want to compare this sorting dot column and this is exactly the Sorting that we already have and we are comparing if our column that we provided inside this function is exactly what we are sorting and we want to check here this sorting order and it must equal descending so if we are sorting this specific column and it is descending then this function will return fast true now here we can copy paste this function and change it to ascending order we're getting here column and we're returning Boolean and the only difference is that here we have ascended let's check if it's working as you can see in browsing now we have this Arrow top because we're sorting our table by ID and it is ascending but actually it is not true because by simply calling our localhost 3000 for slash users and we don't provide any sort in there yes we are getting data in exactly the same format but we must provide inside our fetch function as sorting this is by here I want to put our fetch in additional function for example fetch data and this function must return void and now we have our subscribe inside and now inside NGO needed I want to call this fetch data and now here inside git users I want to provide our sorting it will be this sorting and luckily it is never empty now let's jump inside this get users function and we know that we always are getting here sorting which is the Sorting interface and now here inside our URL we can provide this sorting because our data will be always sorted so here we can set that we have a parameter underscore sort and it equals sorting dot column and additionally we have here underscore order and it will be a property sorting dot order this is exactly how certain is provided in this API let's check this out I will just open inspect and jump to the network and will reload the page and now as you can see we don't call just slash users but also sort ID and Order ascending and now it is completely valid and we're getting our data The Next Step here will be to change our sorting and for this we can jump back inside our component inside HTML and here we will click on our th which actually means here we want to provide the click event and it will be sort table where inside we're providing a column because we want to know by what column we want to sort so now we need to implement this table function so here inside our file we have sort table and we're getting here column that we want to sort but it is not that easy by that because actually maybe we already are certain by this column and it is already descending or ascending or maybe we are not searching this column we need to check all the stuff this is by here what we want to calculate is future sort in order this is an order what we want to apply this is why here let's create a property future certain order and what we want to check is this is descendant sorting and here we're providing our column in this case we know okay we have this current column and it is sorted descending if it is sorted descending then we want to apply here ascending in my other case we're applying descending which actually means with the help of this function we can know what is our future certain and now after this we can simply change our property this sorting and what we must provide here is our column and secondly our future sorting so here we will have our order which is a future sorting order but it is not all after this we want to call our this fetch data to refetch our data from the backend and as you see here we will use this certain property which means we wrote it correctly because we updated certain property before we called Fetch data let's check if it's working I will just reload the page and hit on ad and voila as you can see our ad property is sorted descending now we can click on the name and it is also resorted correctly which actually means we update our certain property and we refresh data from the API and our table is being rendered which actually means we successfully implemented sorting in our project and the last thing that we need to implement is obviously filtering of our table and our filtering must also go through API because we might have lots of data and we don't want to filter client data we want filtering on the backend this is why here we want to use reactive forms because it will be easier to implement a form and an input this is why here what we must do we must jump inside our module and inside our inputs we want to add reactive forms module now we must jump inside our component and inject inside our Constructor new property which will be private FB and this is our form Builder now here we can create our form so let's name it search form and here we can use this FB and we have non-nullable and it means that we will have the form which can't be now and inside we are providing our controls and here we will have just a single property search value and by default it will be an empty string now let's write a markup for our search form so inside our HTML somewhere before the table we can create this search bar so here I will just create a div and inside the div we will have our form which actually means this is just a form for this search and here we must provide the form group and it will be exactly the form group search form that we just created and here we also have NG submit event and here we must create on search submit function now inside this form we need an input so here will be input type text placeholder search and form control name is exactly the property which binds this specific input to our reactive form and here we must set it in search value now let's Implement our on search submit function so here just inside our TS file we can create on search submit function and here we want to console log our search value and it will be this search form dot value dot search value let's check this out I will reload the page and inspect our table and when we're typing something inside search nothing happens but if I'm hitting enter we're getting our search value inside the console this is exactly how we implement form by using reactive form but here is a small problem our CSS is not looking that nice this is why here for our div we can create here a new class which is called search bar and just put there some margin so let's create here search bar and here we just need to provide for example Merchant bottom 20 pixels and now our search is looking much better our next step here is to store our search value because essentially we must do exactly the same what we are doing with sorting we have here default setting and we can create also search value and it also will be default and this is strain and by default we have a named stream which means we don't search anything now we want to change this search value when we are submitting the form this is why here this search value equals this search form dot value dot search value and as you can see when I'm saving this I'm getting type string on undefined is not assignable to the string this is totally fine we can simply check here that if we don't have a value we want to provide here an empty string so when we are submitting our search form we just change this search value but it is not enough we also want to refetch our data this is right here directly after we are calling this fetch data but our fetch data function does not know anything regarding our search value this is why we must provide here inside also this search value and this is totally fine because by default it is an empty string and then we will get all our items now here inside our get users function we can create a search value and we know that this is always a string now here we must provide one more parameter and it will be and name underscore like equals and here we're providing our search value what it does it checks like which means it is not strict equal it is just that we have these symbols that we're searching inside our name and this is totally fine to have here an empty string now here we are providing always search value which means it will work even on initialize correctly let's check if it's working we don't have any errors here let's reload our page and as you can see on initialize we are getting exactly the same data but here inside the network as you can see we are providing name like empty string this is totally fine now here we can simply write Jack and where reflection data from the backend with name like ja and it is only check now here if we will just remove our search we are getting all this data back again this is exactly how you implement filtering inside the table as you can see it is not the difficult to implement tables inside angular on your own and then you have full control of what you are doing and actually if you are interested to know how to implement pagination inside angular make sure to check this video also

Channel: Monsterlessons Academy

Views: 7,611

Keywords: custom angular table, angular table

Id: bRqKImogb2k

Length: 24min 11sec (1451 seconds)

Published: Thu Nov 24 2022