Material UI - Nested table in angular 17 | nested table loading with dynamic data | Nihira techiees

Hello friends welcome to my channel niir Takis in this video Let Me Explain how to implement Nest table in angular sounding application using material mat table component so before going to the implementation let me provide one demo this is my parent table for the example purpose we can consider this is the company so in this subtable I loaded respective branch and EMP information and this data loaded from APA dynamically so in this row click event and for the example purpose I just loaded two tables so using this concept we can load n number of tables also and in this nested level we did the first level only if record we can do the multi-level nested table also using the same concept okay so this is my existing angular sounding application we can start from the data I using Json server htpa so this is my main object company uh it's having some basic information for the detail I'm having one more object based on this code we will get the branch and this emply information let me take the AP URL okay and for the branches and employee information we can use this AP link so here we are just passing this company code okay see we will get the respective bran and imply information okay and the next step is based on this data I have created one model okay this is my main class the name is company it's having the basic information and additionally it's having two reference one is for branch and also the CM D okay and then we can move on the service side so in this service side I have two functions the first function will return the list of company so the API URL already seen the same one we are using here and the second function is get company data by code it will return the employee and Branch information based on the company code okay so the AP URL we have seen so next we can move on the component side so first let me inject this services and then let me create one function get all company information and let me declare one variable here for having the compan information so the default value we can provide the MTR okay so next in this function let me call the services so whatever data is coming we can assign to the variable and let me declare one more variable data source and we can convert this company list into Mt table data source okay this is fine next let me Define an array for defining what are the columns we are showing in our table so let me provide the name is columns to display we can provide some static values code name area and branch so the example purpose I just included limited columns only okay and the same way we can Define two more uh arrays that is for our subtables one is Branch to display so in this array also uh we have a code then Street City and for the employee code name and age okay so let me save this one so next we can move on the HTML side so already I have included this m card in this MAT card content uh we can include our table and then adding this direct to mat table anyway we will use the sharting we can include this mat sharting also and for the data source we can use this declared variable and a designing purpose uh including one class so next we can Define the table row and also the header Row first in this header row we can use this mat header row directory and for the definition we have to include our array okay and next we can create the table body row so here the directory is matro and in this matro definition we have to include the data so let element we are making a loop and in this columns so next we can Define our columns using NG container for defining the columns we can do one by one and also if you have the similar columns using for Loop we can directly generate in other case we have a similar column so let me generate using this for Loop logic and then adding this mat column definition we can include this in our column value okay using interpolation so next we can include the T and the direct is Matt header cell on the text we can use the same name we are getting from our column array and and we can include the title case pipe okay so the same way let me include the TD also here first it should be TD and then it should be mat cell and in this mat cell definition we can generate the loop and the data should be which should be like this so let me save this one see the output now okay there is the spelling mistake and one more thing I missed for these definitions we have to include the star okay and one more important thing we missed so we just created this function let me call in our NG on okay so now we are good to go let me verify so our main table loaded the data okay so the next thing is in this click event we have to load the subtables uh for showing some difference in this header we can include some style so in this header area okay this is fine so next in this row click let me include one event just a click event only so here we can pass this element so let me copy this one so our TS side I'm just defining so the input is and the data type is company and let me Define one more function load subtable data it's having one input that is our company code so in this to will click we can call this function so next let me call the service from here and the method is get company data by code and we can pass this code so whatever data is coming we are getting from this uh response data so next let me have the null check so basically we will get the single object only uh but in the format of Json server we will get as the array only so we can take the first record here I'm checking one more condition we are first doing for this Branch the length is more than zero and if it is array okay and before that let me generate the for Loop for this company list because this is our final object okay and in this Loop only we are checking with an respective code if both are matching only we are just checking this condition and also assigning the variable okay so in this branches so whatever data is coming from our API we are converting this into mat table data source and since we have the records in this has branches also true the same thing we can apply for the employes also just format this one this is for employe the simp okay our function is ready next let me declare one more variable this is for handling this expand and collapse so the data type is company it can be null also and in this row click event and in this row click event we can assign the value also so first we are checking this expanded element data equal to our your parameter value element if it is matched we are providing null otherwise whatever data is coming I'm just assing okay so let me format this one so next we can move on the HTML side uh this one also matter only so in this definition we can create one Dynamic column okay let's R so the column name we can provide expanded detail and including one class next for this uh column let me create one more NG container first in this m column definitions we can include this newly created column expanded detail and then including this TD we can include the call span okay because we need to cover the complete uh row and then let me including uh one more du we can have one class also and for handling this expand and collapse uh we can include the animation so let me Define that this animations for these animations I may create the separate video video for provide the complete explanation So currently we can resolve the issue by importing all the properties so this detail expand is the key value we supposed to use in our uh HTML site let me copy this one for triggering these animations uh we can use we just checking this element Tri equal to our declared expanded element if both are fine I'm setting value as expanded okay so that we can get it from our animations so we are just switching this state okay so in this El scenario it should be collapsed for showing the difference uh let me include one h2 tag details okay we have done so and one important thing we have missed so if you are including this Dynamic columns we have to include this property multi tempate uh data arrows okay so now we can verify the output see get showing like this and expand and collapse is not working so let me verify okay the LC scenario it should be collapsed okay now it is fine see the expand to collapse is working so the next thing is uh we need to load the table only because we have the data already so let me copy the complete table structure first we can load this branches okay so here including one h2 tag and saying branches and then including this table and including this table row so this background color some different color and this columns to display we can use this Branch to display and this total click is not needed the TR is fine next we can include the TD using this uh NG container and in this NG container also we need to change this into Branch to display and in this inner table let me include uh one more class so this is for uh maintaining the 100% width and one important change that is our data source okay so the data source should be element. branches so let me save this one if I'm clicking the second row I'm getting the information so in this third row I don't have the data so no need to show this content for hiding this one we can use this has branches has parameter property so I'm just including this uh ngf if it is having the data only I'm adding like this see in this so in this scenario it's not showing anything so the same way uh let me include the next table also because the data side already we have done the changes now it is very easiest only so the first thing is uh we are checking whether it is having the data using this hasm and then need to change this uh data source and then display column instead of the branch to display we have to use this imply to display and in this uh TR definition also we have to include it and then this multi- template data R is not needed so in case if you are using multi-level Ned table then only you're supposed to use okay so current scenario it's not needed okay the text also show it should be emply so instead of having the separate de uh we can use the common one okay now it is fine see so in this last record it don't have any branches it's having only this employe so this is the way our Nest table is working uh 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: 1,858

Keywords: nested table in angular 17, nested table implementation in angular using material UI table, multi level nested table implementation in angular 17, mutiple nested table implementation in angular 17, nested table implementation with dynamic api data, angular material nested table with dynamic data, how to implement nested table in angular 17, create nested table implementation in angular 17, nihira techiees

Id: 5aDFxFlGvSc

Length: 20min 25sec (1225 seconds)

Published: Fri Dec 22 2023