MAT-TABLE | Material UI Table with pagination sorting & filtering | |Angular15 - MaterialUI Tutorial

Hello friends welcome to my channel Hira techies and in this video let me explain material weight table in angular application and also I am going to cover the functionality of pagination charting and custom search functionality now let me go to my application where we can start our implementation one by one and the first thing is we have to import the required models so here I am going to import three models the first one is for table and the second one is for page nation and the final one is for charting so table and the model name is match table model and the second one as I mentioned it's a pagination and the final one is shorting okay we have imported the record models now let me generate one component foreign table okay great the component is created now let me include in our app routing model so already we have this slider out of that we can include our table component okay this is fine now let me go to the browser here we can use this table see the text coming from our component next let me go to our table component we can remove this one so instead of that I am going to include this table tag so before proceeding this one we need a data so let me run my Json server okay our db.json is ready so we can remove the existing items and let me change this into customer so here we can include our properties one by one okay we have included the basic data and this is our API endpoint okay next let me go to our service side here we have a created one service there Master service so here I am going to use the HTTP client so before that we have to import HTTP client model in our app dot model client model okay so let me save this one and in this Constructor we can inject the HTTP client next we can create our new function for getting the customer and let me generate one model class also so in this folder already we have this model folder so there I am going to create an interface export interface the customer so here we can include all the properties code name email and the final one is active that also a string only we can form it this one so again let me back to the service side and here or method type is get and the end point is customer so already we have the model so we can convert this data type into exact over model so default all return types are observable so that's what I'm also using like this and basically this observable belongs to the RX Js so let me import it first observable okay and our model name is customer and customer array and this resulted type also we can convert okay our service point of view we ready now let me go to the component side since this TL file section first we can create the Constructor so there we can inject our services and inside that we can call our services get customer you can subscribe this one basically in this response only we will get our complete customer information so here I am going to declare one variable the customer listing alter customer array we can set our service data into this customer list and here we can declare one more variable data source the data type is CNA and then we can have one array that is for displaying the columns so basically this is the string array so here we can include all the fields one by one the code name and email phone status and the final one is action for showing the buttons so next we can assign the values into data source using mat table data source and here our object customer and then we can pass the existing data customer list so let me format this one So currently we have done the basic changes in our TS file I hope we will get the data also so next let me work on the HTML side so already we have declared one table and here I'm going to include one directive math table so already we have one data source same thing we can use it here and the next thing is we have to Define our columns so before that let me include on tier tag and this is for the header so the directive is matte header row another matte matte header row definition equal to the display columns okay and here we can have one more TR tag so this is for the bad information and the directory is matte row okay and then Metro definition let's row and the columns is or display columns okay so next we can Define all the columns one by one using NC container and the First Column is for code and here we can include the th and also TD okay this is for header and the TD is for our body columns okay and in this case we can directly put this value and we have to include one more direct View match header cell okay and matte header cell definition the similar way in our TD so the directory is math cell so next mat cell definition and here we can bind the value code okay I added on columns till I am getting some error cannot bend the data source since it is not the known property of table okay okay the problem is uh we have to include the directory like this now let me include all the columns one by one it's not going to take much time because already we have done one column name and the date also name and the third one is email and the fourth one is phone and the final only status and the last one is action so initially we can have the emtd download so let me share this one okay see now currently it is showing our table okay okay see now it is showing the data that actually coming from our APA so the look is not that much good so what I'm going to do so in this HTML side I am going to include this matte card so the mat card already we discussed in our previous video okay so inside the mat card content we can move our table see now it is somewhat fine in our table I am going to include one class and in our MAT card we can include one one custom CSS scenes see the output now it is somewhat teamed okay and the next thing is instead of the single data let me include some more records I am already having some records handy I'm going to include it here so let me refresh the screen once again see we have lot of records and one more thing so in this action set we can include two buttons okay this is server action we can have one button under the name is edit and back directly smart race to button and the color is primary at the similar way I am going to include one more button and the color is one see the button is included now let me include some space here again in our CS file okay it is somewhat fine and the next thing is I am going to include the page Nation here okay for the page Nation I am going to use the element this matte paginator and we can include the property page size options so basically it is the array so I'm going to provide 5 10 then 20. okay these are the options and also direct you first last buttons see here here we have the page Nation so the option is 5 10 20 and we have the buttons everything in the disabled because the page Netter not exactly synced with our table so that's what it is showing like this so in this case what we supposed to do in our TS file we can use this view child option and here we can use like a matte paginator and our object is match paginator matte paginator okay and in this data source paginator recruiter server paginator so let me say this one see the response now okay still it is not working okay the spelling is Bay generator okay great to see now it is working so in the initial page it is showing fire records so if I'm clicking the next to file and the final screen we have the single record so if I'm selecting as the 10 records the same page we are able to get the 10 records okay so anyway let me keep it as the fire cards and that is fine and here I'm going to include on BR tag also okay now I am able to see the difference right the page generator and also our table and the next property I am going to include the shorting here the starting also almost the same the first we have to include the direct View match shot and the next thing is in our TS file because similar to our matte paginator we have to use matte shot match shot so after that so in this data source we have to use this short option and let me set this one okay this is fine and finally you know what T hit set we have to include one more directive match shortcutter all right just to included for the column of code only see we have the aroma see the sharding is working so the same way if you want include for all the columns the same direction we have to include in our all of the th section see for the all columns having this charting option also and it is working fine and the final functionality is filtering for the filtering I am going to include one form field that we can include in our card header section okay and here one input tag from the placeholder is under the text and the directories match input see now we have the search box also and here we can include on the event key up the function name is filter change now let me Define this function otherwise it will show the error data typically so instead of this any let me change this into event for the next constant value equal to this data dot Target s HTML input element dot value so finally so in our data source we have to include this filter option and the value the same value we can use it here so let me say this one so I'm just typing Surya see in the second page I am having this Trisha So currently I'm in the first two ways I am trying to search this yeah it is coming so that means server search functionality also working so let me show the final demo I am just refreshing the screen and you see all the details are populated from our APA and we have this pagination so after that we have the Sorting and the final one is our filter operation okay so a lot working fine and if you required to include any custom colors that actually we can handle it from our style itself so let me change the table header color so the background color I'm going to give black and let me Mark this as theme button and the color I mean our text color should be we can give weight that's fine see the screen yeah okay great now we are in the end of the video still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 13,740

Keywords: Angular Material Tutorial, Angular 15 - Material UI Tutorial, Material UI Course for begginers, angular material UI example, mat-table in angular material ui, material ui table with pagination, material ui table with sorting, material ui table with filtering, mat paginator in angular material UI, mat sorting in angular material UI, Implement material UI datatable in angular, how to implement pagination in angular, create custom serach in angular material UI table, nihira techiees

Id: jT5D8Ks5N8w

Length: 22min 26sec (1346 seconds)

Published: Tue Apr 18 2023