Angular Material Data Table with Paging, sorting, search filter & Pagination

hello beautiful people welcome to another tutorial on the coding youtube channel in today's video we'll be doing another tutorial on angular material but this tutorial is going to be about data tables what we're doing in this tutorial is to consume data coming from a public rest api called json placeholder which it all of us are familiar with so we're going to get the data from this json placeholder api and then populate it in our data table and then this data table will have functionality such as search functionalities pagination filtering as well as sorting so let's quickly take a quick demo of how the data table looks like so i go straight to the tab where we have the completed project and as you can see we have pagination here where we can go to new pages and then we can also specify the amount of items we have per page so for instance if you want to have 10 items per page right click on 10 then we have 10 items on the table then we can also search so if i search for probably this particular test let me grab this and then paste it into the search input field is going to filter through the data we have coming from the rest api and then display the item with a particular text value we can also do some source functionalities that's it for this tutorial that's what we're gonna do so do stay tuned as i break everything down step by step with no steps keeps also do not forget to like as well as subscribe also click on the notification bell so anytime i create a tutorial you can be aware of that so without wasting much time let's get started [Music] so to follow along with this tutorial you need to create a new angular project and then add angular material to the project i explained how to do this two videos away from this tutorial i'll drop the link in the description box um below so do check that out it's pretty straightforward all i did was generate a new angular project then head over to the angular documentation i'm glad mature documentation rather clicked on the get started button then i pasted this in my angular directory in the terminal and then i answered some prompts about steaming and browser animation i likes so you can check that serial it breaks everything down on how to install android material i've already done that as well so if you can check my if you check my packet.json file you can see i have angular material on the angular material version 13. so with that confirmed as installed the next thing we need to do is to create a service to consume the rest api so i'm going to stop this server right here to generate a new service the command is ng generate service and then let's call the name of our service table since we are trying to get data on a table on a data table so now that our table service has been created let's open the src directory as well as the app directory we can see that we now have the table service so we need to configure this service in our app module.ts file so i head straight to the app module.cs file and what we need to do here is to import and inject the http client module as this is what we need to be able to create a service in angular so i'm just going to type in http client module and then we try to inject this we try to import this rather so i go on top of the file and then type in import let me just grab http client from at angular slash command http that's all we need to do in the app module for the service so we save that and then head straight to the table service file so inside of the table service file we need to bring in the http client so right under the injectable we can just type in imports http client from at angular slash common slash http so now that we have the http client configured the next thing we need to do is to create a base url so i can just create a variable right here call it base url and then this is going to be the url for our api so i straight to the to the json placeholder documentation and then i scroll to the bottom of the page and then we have different apis we have the slash post slash comments albums photos to-do's and users for this tutorial i'll be making use of the post it has android posts on it so i'm gonna click on four slash post and then from there we can see the api results which comes in form of an array of objects so i'm just going to grab the api url and then straight to the angular project and then paste it in so with that we can now inject our http client private http htcp and then injects the htcp clients so with this we now have an instance of the http client when we want to create the function for our api so what we can call this function is get data inside of the get data function we can just return and then say these dots http dots because it's a get request will make use of that gate and then we call the base url so this is the base url which is the variable we created up here so once again i save now to implement this in the component view we're going to head straight to the app component.ts file for this tutorial um i don't need to generate a new component so we just make use of the app component html file as well as our component cs file to create our implementation before i go for that let me just add straight to the component cs file select everything on there and then clear it off we don't need the boilerplates templates so we can now extrude to the app components.cs file so what we can do in the app component.cs file is try to log the results coming from api from coming from the api into the console so to do that we need to import and inject the table service so we need to create a constructor to be able to do that so right under the title we have that can just create a constructor and then inside of the constructor we can just create a private variable by saying private service and then the name of our service class we created let me grab that so that's a table service so i'm going to grab this and then inject it inside of our appcomponent.cs file we need to import it for us to get rid of these red warnings so i'm just going to use intellisense to do that as you can see the table service is imported into our app complexity as file so we now have access to the table service so now let's try to um get the data coming from the table service into the console we can do that right in the constructor so right inside the constructor i can just um make reference to the service by saying this dot service dot get data which is the function we created in our table service file so the get data function is going to return an observable we need to subscribe to so i'm going to say dot subscribe so inside of the subscribe you can create a variable on there and then try to log this variable in the console so i can just say console.log data so we can save everything we've done so far and then try to run the server so i can just type in ng serve and then press enter so now the app has compiled successfully we can add straight to the browser and then let's see if we can get the data in the console by clicking on inspect yeah we are getting the results in the console as you can see we have an array of android objects which is what we want so each object contains four items which is a body an id a title and a user id so now we're gonna take note of that later when we are trying to create a table but for now uh what we need to do next is now to design our table so to design our table we need to import some of the things we need to create a table in angular material some directives in angular material or we can call them components in angular material so let's read straight to the app module.cs file and import everything we need to create our table so let's do that first so the first one we need is the math table mat table module so i'm going to import the mat table module from at angular slash material slash table so this is the first one we need to import then the next one is the math paginator module because we'll be making use of pagination so i'm going to quickly do that so math paginates or moji which is coming from at angular 4 slash material slash paginator the next one is going to be the maths sort module so quickly we bring it in math sort module which is coming from at angular slash material sorts so the next one is the form field module so i'm going to import that as well import smart form fields module from angular slash material slash form dash field then the final thing we need to import here is the mat input module so i'm gonna import math impute module from angular slash material slash impute so we've import everything we need to create a data table so let's inject them quickly so i'm gonna grab each and every one of them and then inject them in the import array so every of the angular material components we need to create a table has been imported into the app module ts well so with this we should not be getting any any errors when we try to um implement the design so for us to start implementing design we need to air straight to the app component.html file so i'm going to close this and some of the other tabs we don't need and just leave the app components app.component.html5 so let's start off with the design we try to implement as much as possible what we saw in the demo in the beginning of this tutorial so let's start with the smartphone field so i'm going to create tag with the math form field and then inside the math form field i'm going to give it an attribute of of appearance which is going to be called standard so next we're going to create is the math label so to create a math label i'm going to create a tag for that and then inside of the tag i can just give it a text or filter table then still inside the math form field we're going to create an input tag so inside of this input tag we're gonna give it an attribute of math impute he's also gonna have a placeholder of such so i'm gonna give his placeholder he's supposed to search within spell search properly i think that's all for the maths form field um design so right undies we're gonna create a div tag which is going to wrap in all our tables so instead of this div tag we're gonna give it we're gonna create our table right in inside of it so let me open a table tag and then our table is going to have an attribute called math table as well as math sort so inside of this table we can now start creating our columns so the first column we're going to create is the column for the id because we want to display four items on the table that is one to display the when you check our results in our objects one display a column for the body id title and user id so we can just um do that by creating the separate columns for each of them so we can just wrap everything right around the ng container inside the ng container we can have the table header it's gonna be called id let's give it a text of id and it's going to have some angular material attributes so the first one is going to be called maths dash header dash cell the next one is going to have an aesthetic share called math header cell def and the last attribute to obvious math source header all these attributes allows angular material to know the function of each of the tags we are creating so right under the table where that we're going to have the table data which is cd so inside the cd we have some attributes as well so the first one is the mat cell you can just say this is the id um so with that done we can do for the rest of the items so the next i'm just going to copy these strip down three more times so the next one we have is the user id so i'm gonna change this to user id and then i'm gonna say this is the user id let's make id uppercase so this is the user id and before i forget the ng container is also going to have an attribute called maths column def and the math column dev is also going to contain the name of our headers so for instance this is going to be id and this is going to be called user id and then the next header is going to be called title so i'm going to give give this a name of title this is the title i'm going to change this to title and then finally this is going to be called the body so inside the energy container i'm gonna change the title to body and this is going to be called body as well and then we'll say this is the body so that's it for all the editors for now let's just um let's save and see if we have anything displayed in the console or on the page rather so let me see if let's see if we'll get any errors or we'll get a look of our table looks like so the error says missing definition for eda footer and row cannot determine which rows which columns should be rendered so i think we've not created some table attributes like the table row so we're gonna have a table row tag and inside of this table root tag we're going to have some attributes so the first attribute we're going to have is so it's going to be called maths edda dash row so allow which allows angular materials to know this is the row so we're going to have the math header row def so math header row def and inside of this we're gonna we need to create a variable called displayed columns or something so for now let's just type this in we'll create it in a minute or in some seconds so this display columns is going to have an array of the columns so we're going to have displayed columns and then we're going to assign it a type of string which comes in form of an array and we're going to say equals to so the first column is going to be called id followed by the user id followed by the title as well as the body um with that we are able to display the columns as we want it to be so this this column smart dev columns will have the associated so for instance the user id is built here is not the same we're having the ts file so i'm always going to use what we have in the ts file so we have uppercase for the i and lowercase for dd right under the table row we create another table row once more this table row has some attributes as well so quickly let's type in the mat attributes it's going to have it algebra of match row matro depth and inside of the macho dev we're going to look through the columns so i'm going to say let's rows let row rather then columns and then we pass in the displayed column variable we created in the ts file and i believe we can save everything we've done so far and we check the browser if the table shows and if the error disappears so as you can see we have table here uh rows here we have the user id the id the title as well as the body we also have the filter table showing so it's like this because we haven't done any form of styling so we can do that by adding to the app component.tss file so instead of this file you can just give the table let's give it a width of hundred percent so it's gonna have a width of hundred percent and then another first we can style is the math from field let's make it a bit um feasible to the user so i'm gonna give it a font size of 14 pixel as well as a width of 20 um so it won't be too white but it will be wide enough for what we want so let's extra browser and see how our new styles show on the page cool we're getting there so the imp martin p field looks um just the way we want it but i noticed everything is so close to the side so we can also style this style.css file so this particular file here we can kind of um give it a margin of 10 pixels the html body you can give its imagine 10 10 margin of 10 pixels i think that should be enough so i save once more let me close this particular tab and then i think that should give it some nice margins on the side we can't see it properly now because we don't have data showing on the table so with the table design showing the way we want it to let's quickly um extract the app component.cs file and then import the necessary angular material components we need to show the data coming from the rest api so to do that we're going to bring in the mass paginator the merge sorts as well as the math data source the math data source allows us to populate the data in the html but we need to configure it right here in the tsi so quickly let's import it so i'm going to type in import and then bring in the matte paginator first so much passionate so from at angular material match paginator then we bring in the math sort so import math sort from at angular material math sort no matter that angular material sort then finally we bring in the math table data source so multiple data source from angular material for slash table so with these three components imported from angular material we cannot configure the functionality for our projects also quickly before i forget we need to bring in the view child as well the view child serves as a directive that allows us to inject the various elements coming from angular material into this project so i'm going to bring in view chart before we go further i need to also create an interface of how we want our data to show for instance our interface is going to be in form of this variable we have here so interface export interface i mean you can create this in a new file in another file and import it into spray bowl for this tutorial i'm just going to create it here and then call it user data and then we're gonna all the data we are getting from the rest api which is the id the user id body and title we're gonna give it their various types for the id i'm gonna give it a type i'm gonna give them all the type of string the user id it's gonna also be the type of string then the title type of string then finally the body is also going to have a type of string so we now have an interface in which we can configure the data we're getting from our api so quickly let's now implement the data source so i'm just going to type in data source and then data test was going to have the mass deserved source we import from the angular material table so i'm just going to assign it to the data source and then it's also going to have a interface which you called user data over here so we have an error showing here data source has no initiator and it's not definitely assigned in the constructor okay what we can do is just give it an initiator by putting an exclamation mark in front of it and the arrow disappears for us to now assign the data source to the data we get from the api we need to create another variable i'm going to call this post this is going to hold all the results coming from our api so i'm going to give it a type of any and then right in our constructor we are going to make reference to the data source by saying this the data source it's equals to new i can't spell new properly math table data source so i'm just going to grab this and then we're going to pass in we're going to assign the data we have here that is data we are logging into the console and just say this dot post is equal to data so this does post now as access to all the data we have in the console so all the under posts so i'm just going to pass it into the map data source and then right under it we can also use it to configure our page detail on our source but because i don't want to do that for now i just want to log the data on the console for now so i'm going to head straight to the html view and in the table tag i'm just going to bind the data source variable we created in the cs file to the table so i'm going to have over here a bracket a bracket that says data source is going to be equals to data source so what we can now do is to look through the data so since the table now has the data for data source and then we need to look through it by passing in the mat cell dev so right in the td dtd over here so i'm going to pass in the math cell def i'm going to say let row then it's going to be row.id i'm going to do some interpolation so it's going to be row dot id so we do that for the rest of the table so the next one is the user id so i'm just going to say right inside of the td i'm going to have row dot user id then the next one is the title so i grab this once more and then inside of this smart cell um i do some interpolation as well so it's going to be row dot title and finally we have the body so inside this dot body we're gonna have this body so row dot body so i believe once we save all the data coming from the api should show inside of our table so as you can see we have all the data showing the android posts and it's this way because for now we don't have pagination we don't have the field strain implemented we don't have the sorting implemented so notice gonna work we just have a bunch of data coming from rest api showing on the browser so heading straight to the visual studio code what we need to do next is just to configure the pagination and the sorting so to do that we need to make use of the view chart which we imported earlier the view child is just an angular directive that allows us to implement or configure the paginator and the sorts to do that i'm just going to call the view chart so i'm going to say at view child and then it's going to take in we can start with the paginator so i'm just going to grab the paginas all right here and then paste it in we need to create a variable called paginator so this paginator we're going to assign the math paginator component to it so the math paginator components right here so with that we have the paginate or configured but we have an error about the initializer we are dealing with the data source we can avoid this by using the exclamation mark so i'm going to copy this down using shifts alt and the down arrow key and then i'm going to replace the paginator with the salt and then i'm also going to replace it with the matte sauce as well so i'm just going to grab the mask paginator and then paste in the matte salt so with that we have configured the sorting so we need to pass the data to both of them so to pass data we need to reference the variable we created that is the paginator and the sort so but first we need to pass it through the data source so i'm going to say this data source dot paginator is equals to this dot paginator and we're gonna repeat this with this sort as well so we're done with that we can now go to the html file and then implement this as well for this sort we do not need to bring in any angular material components but for the paginator we need to bring in the math paginator component tag so right under the table i'm going to have mat dash paginator and then i'm gonna close this it has a closing tag but nothing is in between all we need to do is to pass in the directives so the first one we're gonna pass in is called the page size options page size options if you remember it at the beginning at the beginning when i showed you the demo we sort of add some page size options so we're going to have an option of showing 10 items at once another option of showing five options 10 options then we have one of 25 and then the one of android since our data is limited to just android data so we don't need to have anything beyond that um so we can pass in the other attributes which is the um aerial labels so i i don't think this is compulsory but let's just do this so i'm just going to say area the bells is equals to select page of users no he's not in the quotes let me just grab that and then paste it right in the quotation mark so with that i can save everything we've done so far and then check our pagination in the angular material table so as you can see we have our pagination here so let me click on this to see if it works so as you can see it's working we have 11 to 15 then 16 to 20 we can also increase the items per page to 10 um we can increase it to 25 and also click on next and it's showing the next set of data and it continues to do this up until 100 and for the sorting let's see if this works this works out well as you can see we can sort through the items in the editor we can do that with the user id with the title as well as the body so the we've done like 90 of our implementation so i think the final thing we need to do is to um apply the search filter that is in this input field we type we can't filter so let's quickly do that so through that we are straight to the app component.ts file as usual and then create a new function called apply filter and then it's going to take in a parameter of event and a type of event i'm going to open a bracket so inside of this bracket will create a variable called filter value because we're trying to filter out the values coming from the api computer value then we open a parenthesis or a bracket rather and then we're gonna say events dot targets normally would have saved into a target or value but in this scenario we're gonna make use of the html input element so we're gonna import the event as events the targets as html so html impute element dot value so with that we can now make reference to our data source so i'm going to say this the data source which we created above dot filter is equals to filter value dot stream converted it into lowercase i'm gonna make use of the dot lowercase with that we can now create a condition right underneath it that if the data source that is if this.datasource.paginator if it exists that is if there is a pagination then it should display the filter based on that so it will be this data source dot paginator dot first page so if the data source that's paginator exists and you try to filter through it it's going to reset the page to the first it's going to start searching from the first page so that's what that first page means so we need to now configure this apply filter function in a html file so i edge to the mats filter mat form field table rather so everything we've done inside of this input field tag um we can do that through the key of event handler so i'm going to type in key okay just type in the apply filter so the apply filter is going to take in the event parameter which we created well when we did this in the cs right this event that is every event.target.value it captures everything we type into the math impede field i think that's all we need to do but before we go you know sometimes in a scenario where when you start to search for something that does not exist you might want to show it to the user like a form of user experience that we are searching for does not exist in the database so we need to display something to the user and we can do that right inside of our table so right below this table row i can just show let me type in a comment that says shows when data does not exist i don't know don't waste too much time on this i'm just going to create this comment here and then right under it we can just create the table row tag that helps us with this functionality so right inside of this tableau tag we created table data that is cd so this cd is going to have a class of mat cell math maths.cell and then it's going to have a column span of 4 and then inside of it we can just type in the filter does not match any item in the data so we can also do one more thing we can display for this text that is want to show like the text they typed into the input field so i'm going to do some string interpolation so i can just pass in the inputs.value so i'm going to say input.value so anytime anything they typed into the input field it's going to let them know that for that particular test does not show so as you can see we have an um arrow here that says error of course on templates on the component shadow so i can just scroll up and just create a template reference right in our impute tag so i'm just going to say input so the input is going to carry the values of the tests that are typed into this input field um as you can see the arrow this appears so with that i think we've implemented virtually all the functionality so i'm gonna save and let the app compile and then we test everything out in full and see if it works so let's start off by um let's say let me grab this text but this particular test here let's let's filter through it as you can see our filter works perfectly we're able to filter through the particular test and then when i clay it off um like i tested the pagination area we see it works so virtually every functionality works oh before i forget let me also test for the condition we implemented in our app.component.html file like if we data like if you search for something that doesn't exist an error message shows like live um let's see if that works um wow that doesn't work okay i think we might have made a mistake somewhere let me head back to the we just do code okay right in this table row i think we there is a particular attribute in material ui that that implements this functionality straight of the boss and that is called the math no data row so we didn't pass it to i'm going to have mass node data row and then let me save and then we test this one more time so quickly we head back straight to the browser and let's search for something that doesn't exist so as you can see what we have here the filter does not match any item in data for this text hhh so as you can see that error message we can probably put this in quotes just for the user to know that is the data they are searching for to differentiate it from the other tests this is what i mean so you see this is in quotes the demo i noticed we have some sort of card format like the the table has this beautiful card so i think there's a particular class we used for that so i'm going to implement that now so in the div that covers all the table this particular dvd so i'm going to give it a class of math dash elevation z8 i don't know why this quotation marks is giving me some trouble today so let's see if we are able to have a cut sort of look just like we have in the demo beautiful you can see this shadow showing like um we have in the demo everything looks beautiful and so this is something you can use in your real world projects probably you work for your company and they want to create a table with pagination and then filtering and sorting you can just replace the rest api we implemented jsonplaysub api with your own api and just try to look through the data and just put it on the table so with that we call it a day so please if you enjoyed the tutorial give it a like as well as subscribe so the youtube algorithm can favor this channel so thank you very much for watching and i will see you again in the next one take care

Channel: The Code Angle

Views: 26,016

Keywords: angular material tutorial, angular material, data table, Angular Material Data Table, Angular Material Data Table with Paging, sorting, search filter & Pagination, angular tutorial, angular material tutorial for beginners, angular material for beginners, angular, angular pagination, data filtering in angular, sorting in angular, search in angular using api, data table in angular, angular material sorting, rest api angular, material design tutorial, json placeholder angular

Id: 5C9tY8npeFM

Length: 33min 21sec (2001 seconds)

Published: Fri Apr 08 2022