title
Angular Material Data Table Tutorial

description
This tutorial explores the Angular Material data table and how to use it! Join the full Angular Material course: https://acad.link/ng-app Exclusive discount also available for our Angular course: https://acad.link/angular Check out all our other courses: https://academind.com/learn/our-courses Learn how to work with the Angular Material Data Table, a component which makes displaying data (including sorting and pagination) a breeze! Angular Material is a rich suite of pre-built Angular components that follow the Google Material design spec. ---------- Full Playlist: https://academind.com/learn/angular/angular-material-a-thorough-guide/ Source Code: https://academind.com/learn/angular/angular-material-a-thorough-guide/data-table/ ---------- • Go to https://www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts • Follow @maxedapps and @academind_real on Twitter • Join our Facebook community on https://www.facebook.com/academindchannel/ See you in the videos! ---------- Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

detail
{'title': 'Angular Material Data Table Tutorial', 'heatmap': [{'end': 130.293, 'start': 82.699, 'weight': 0.747}, {'end': 182.987, 'start': 136.575, 'weight': 0.783}], 'summary': 'Learn how to integrate angular material data table with paginator and sort header, create a default dummy data table with pagination and sorting functionality, understand data manipulation and merging using observables and operators, implement javascript sorting and pagination methods, and configure column structure and pagination for customizing angular material data table.', 'chapters': [{'end': 69.327, 'segs': [{'end': 30.882, 'src': 'embed', 'start': 2.498, 'weight': 1, 'content': [{'end': 5.461, 'text': 'Welcome to this video in this Angular Material series.', 'start': 2.498, 'duration': 2.963}, {'end': 8.583, 'text': 'In the last video, we had a look at a responsive navigation.', 'start': 6.021, 'duration': 2.562}, {'end': 16.57, 'text': "In this video, we'll have a look at the Angular Material data table, a nice component we can use to present data to our users.", 'start': 8.823, 'duration': 7.747}, {'end': 26.338, 'text': 'Now, just as mentioned in the last videos, if you wanna see all these things and more in action, a real full project combined with Angular Fire,', 'start': 17.25, 'duration': 9.088}, {'end': 27.839, 'text': 'NGRX and more.', 'start': 26.338, 'duration': 1.501}, {'end': 30.882, 'text': 'check out my Udemy course where we build a full Angular app.', 'start': 27.839, 'duration': 3.043}], 'summary': 'Angular material series exploring data tables for presenting data to users.', 'duration': 28.384, 'max_score': 2.498, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ao-nY-9biWs/pics/ao-nY-9biWs2498.jpg'}, {'end': 77.734, 'src': 'embed', 'start': 51.161, 'weight': 0, 'content': [{'end': 59.207, 'text': 'And it actually also has two other components that are kind of connected to it a paginator, which makes well paginating,', 'start': 51.161, 'duration': 8.046}, {'end': 66.974, 'text': 'so splitting our elements across multiple pages, very easy, and our sort header here, which allows us to sort our columns.', 'start': 59.207, 'duration': 7.767}, {'end': 69.327, 'text': "That's the data table.", 'start': 68.206, 'duration': 1.121}, {'end': 77.734, 'text': 'The question is, how do we now get it into our project? Now, just as with the responsive navigation, there is a schematic we can use.', 'start': 69.367, 'duration': 8.367}], 'summary': 'The data table has a paginator and sort header for easy navigation and column sorting.', 'duration': 26.573, 'max_score': 51.161, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ao-nY-9biWs/pics/ao-nY-9biWs51161.jpg'}], 'start': 2.498, 'title': 'Angular material data table', 'summary': 'Introduces the angular material data table component with a paginator for easy pagination and a sort header for column sorting, and mentions a real full project combined with angular fire, ngrx, and more available on udemy.', 'chapters': [{'end': 69.327, 'start': 2.498, 'title': 'Angular material data table', 'summary': 'Introduces the angular material data table component, which includes a paginator for easy pagination and a sort header for column sorting, and mentions a real full project combined with angular fire, ngrx, and more available on udemy.', 'duration': 66.829, 'highlights': ['The data table includes a paginator for easy pagination and a sort header for column sorting. This component provides a paginator for splitting elements across multiple pages and a sort header for sorting columns.', 'The video mentions a real full project combined with Angular Fire, NGRX, and more available on Udemy. The speaker references a real full project combined with Angular Fire, NGRX, and more, available on Udemy for further learning.', 'The speaker introduces the location of the data table under components, data table, at the very bottom. The data table is located under components, specifically under the data table section, at the bottom on the left.']}], 'duration': 66.829, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ao-nY-9biWs/pics/ao-nY-9biWs2498.jpg', 'highlights': ['The data table includes a paginator for easy pagination and a sort header for column sorting.', 'The video mentions a real full project combined with Angular Fire, NGRX, and more available on Udemy.', 'The speaker introduces the location of the data table under components, data table, at the very bottom.']}, {'end': 239.612, 'segs': [{'end': 130.293, 'src': 'heatmap', 'start': 69.367, 'weight': 0, 'content': [{'end': 77.734, 'text': 'The question is, how do we now get it into our project? Now, just as with the responsive navigation, there is a schematic we can use.', 'start': 69.367, 'duration': 8.367}, {'end': 78.935, 'text': "So let's use it.", 'start': 78.035, 'duration': 0.9}, {'end': 81.918, 'text': "But I'll then, of course, also explain what happened and how it works.", 'start': 79.016, 'duration': 2.902}, {'end': 92.608, 'text': "We can use that schematic by running ng generate at Angular material colon, and then it's material dash table like that.", 'start': 82.699, 'duration': 9.909}, {'end': 97.612, 'text': 'We also have to define a name because this will create a new component where it stores the table in.', 'start': 93.228, 'duration': 4.384}, {'end': 104.038, 'text': "So we add dash dash name equals and then any name you like, I'll name it data dash table.", 'start': 98.173, 'duration': 5.865}, {'end': 112.746, 'text': "This will generate a new component in the project, the data table component, which has five files actually because there's one extra TypeScript file.", 'start': 104.759, 'duration': 7.987}, {'end': 114.028, 'text': "We'll come back to that.", 'start': 113.167, 'duration': 0.861}, {'end': 121.73, 'text': 'And in the app module, it automatically adds the data table component to declarations so that we can use it.', 'start': 114.788, 'duration': 6.942}, {'end': 130.293, 'text': 'And it imports a couple of other things, like the mat table module, which is the module holding the Angular Material data table,', 'start': 122.57, 'duration': 7.723}], 'summary': 'To incorporate the angular material data table into the project, run ng generate at angular material, material-table, and define a name for the new component, resulting in the creation of the data table component with five files and automatic addition to the app module declarations.', 'duration': 23.241, 'max_score': 69.367, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ao-nY-9biWs/pics/ao-nY-9biWs69367.jpg'}, {'end': 140.336, 'src': 'embed', 'start': 114.788, 'weight': 1, 'content': [{'end': 121.73, 'text': 'And in the app module, it automatically adds the data table component to declarations so that we can use it.', 'start': 114.788, 'duration': 6.942}, {'end': 130.293, 'text': 'And it imports a couple of other things, like the mat table module, which is the module holding the Angular Material data table,', 'start': 122.57, 'duration': 7.723}, {'end': 136.575, 'text': 'but also the paginator module, which holds the well pagination module and logic, and the sorting module,', 'start': 130.293, 'duration': 6.282}, {'end': 140.336, 'text': 'which holds the logic for well adding sorting to the data table.', 'start': 136.575, 'duration': 3.761}], 'summary': 'The app module automatically adds the data table component to declarations, imports the mat table, paginator, and sorting modules for angular material data table functionality.', 'duration': 25.548, 'max_score': 114.788, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ao-nY-9biWs/pics/ao-nY-9biWs114788.jpg'}, {'end': 218.103, 'src': 'heatmap', 'start': 136.575, 'weight': 2, 'content': [{'end': 140.336, 'text': 'which holds the logic for well adding sorting to the data table.', 'start': 136.575, 'duration': 3.761}, {'end': 142.917, 'text': "let's see what the data table looks like.", 'start': 141.036, 'duration': 1.881}, {'end': 154.446, 'text': "for this, i'll go to my app component and inside of main nav i'll add data dash table, because that is the selector of the data table component.", 'start': 142.917, 'duration': 11.529}, {'end': 155.787, 'text': 'you can check this here.', 'start': 154.446, 'duration': 1.341}, {'end': 158.089, 'text': 'of course, selector is data table.', 'start': 155.787, 'duration': 2.302}, {'end': 161.783, 'text': 'With that added, it will look ugly by default.', 'start': 159.159, 'duration': 2.624}, {'end': 169.513, 'text': "So let's quickly add a class to that div which conveniently was created in the data table component HTML file.", 'start': 162.303, 'duration': 7.21}, {'end': 172.257, 'text': 'Maybe name this class data table.', 'start': 170.334, 'duration': 1.923}, {'end': 173.218, 'text': 'The name is up to you.', 'start': 172.557, 'duration': 0.661}, {'end': 175.48, 'text': 'and give it some styling.', 'start': 174.239, 'duration': 1.241}, {'end': 182.987, 'text': "here i want to give it a width of 80 so that it doesn't take up the full width of the page,", 'start': 175.48, 'duration': 7.507}, {'end': 190.753, 'text': "and i'll add a margin to top and bottom of 20 pixels and auto for left and right to center this.", 'start': 182.987, 'duration': 7.766}, {'end': 196.62, 'text': "now let's restart ng surf and let's take a look at what we actually got from that schematic.", 'start': 191.534, 'duration': 5.086}, {'end': 198.141, 'text': 'so what it gave us?', 'start': 196.62, 'duration': 1.521}, {'end': 205.61, 'text': 'i can already tell you it gives us a default dummy data table which already implements pagination and sorting.', 'start': 198.141, 'duration': 7.469}, {'end': 206.49, 'text': "so let's have a look.", 'start': 205.61, 'duration': 0.88}, {'end': 208.078, 'text': 'Here it is.', 'start': 207.418, 'duration': 0.66}, {'end': 218.103, 'text': 'this is the table and you can see we get these arrows when we hover over the column titles and I can indeed sort by name or by ID,', 'start': 208.078, 'duration': 10.025}], 'summary': 'Added sorting to data table, achieved default dummy data table with pagination and sorting.', 'duration': 55.8, 'max_score': 136.575, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ao-nY-9biWs/pics/ao-nY-9biWs136575.jpg'}], 'start': 69.367, 'title': 'Angular material data table', 'summary': 'Explains integrating an angular material data table into a project, generating the component, importing necessary modules, and applying custom styling, resulting in a default dummy data table with pagination and sorting functionality.', 'chapters': [{'end': 239.612, 'start': 69.367, 'title': 'Angular material data table', 'summary': 'Explains how to integrate an angular material data table into a project, including generating the component, importing necessary modules, and applying custom styling, resulting in a default dummy data table with pagination and sorting functionality.', 'duration': 170.245, 'highlights': ['The Angular Material data table is integrated into a project using a schematic by running ng generate at Angular material colon, material dash table, and specifying a name for the new component, which generates five files, including an extra TypeScript file. The ng generate command is used to create a new component for the data table, which includes five files, and automatically adds the data table component to the app module.', 'The schematic also adds necessary modules such as mat table module for the data table, paginator module for pagination logic, and sorting module for adding sorting functionality to the data table. The schematic automatically adds the data table component to the app module and imports modules for the data table, pagination logic, and sorting functionality.', 'Applying custom styling to the data table, such as setting its width to 80, adding margin, and centering it, results in a more visually appealing appearance. Custom styling is applied to the data table by setting its width, adding margin, and centering it, improving its visual appearance.', 'The default dummy data table obtained from the schematic includes pagination and sorting functionality, allowing sorting by name or ID in both directions and displaying pagination, albeit without active pagination due to the low element count. The default dummy data table obtained from the schematic includes pagination and sorting functionality, enabling sorting by name or ID and displaying pagination, although not actively due to the low element count.']}], 'duration': 170.245, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ao-nY-9biWs/pics/ao-nY-9biWs69367.jpg', 'highlights': ['The Angular Material data table is integrated into a project using a schematic by running ng generate at Angular material colon, material dash table, and specifying a name for the new component, which generates five files, including an extra TypeScript file.', 'The schematic also adds necessary modules such as mat table module for the data table, paginator module for pagination logic, and sorting module for adding sorting functionality to the data table.', 'Applying custom styling to the data table, such as setting its width to 80, adding margin, and centering it, results in a more visually appealing appearance.', 'The default dummy data table obtained from the schematic includes pagination and sorting functionality, allowing sorting by name or ID in both directions and displaying pagination, albeit without active pagination due to the low element count.']}, {'end': 589.136, 'segs': [{'end': 267.996, 'src': 'embed', 'start': 240.313, 'weight': 1, 'content': [{'end': 243.114, 'text': 'This is the interesting part, the mat table component.', 'start': 240.313, 'duration': 2.801}, {'end': 244.394, 'text': 'This is the data table.', 'start': 243.254, 'duration': 1.14}, {'end': 251.037, 'text': "And as you can see, what it has is it has a property to which we're binding, which holds the data source.", 'start': 244.914, 'duration': 6.123}, {'end': 254.178, 'text': 'And that is the meat of the data table, you could say.', 'start': 251.117, 'duration': 3.061}, {'end': 261.68, 'text': 'A data table needs to be connected to some data table source, which feeds in the data that should be rendered.', 'start': 254.578, 'duration': 7.102}, {'end': 265.133, 'text': "now i'll come back to what else we have here.", 'start': 262.631, 'duration': 2.502}, {'end': 267.996, 'text': "let's explore that data source first of all.", 'start': 265.133, 'duration': 2.863}], 'summary': 'Mat table component holds data source for data table.', 'duration': 27.683, 'max_score': 240.313, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ao-nY-9biWs/pics/ao-nY-9biWs240313.jpg'}, {'end': 332.725, 'src': 'embed', 'start': 305.436, 'weight': 2, 'content': [{'end': 310.417, 'text': 'We import it from data table data source, so from this extra TypeScript file.', 'start': 305.436, 'duration': 4.981}, {'end': 319.62, 'text': 'And it is indeed a class we define here, or it was defined for us, but we could do this on our own if we were to build this from scratch.', 'start': 311.377, 'duration': 8.243}, {'end': 323.362, 'text': "It's a normal TypeScript class, but it does one important thing.", 'start': 320.221, 'duration': 3.141}, {'end': 332.725, 'text': 'It extends data source, which is a generic type where we define essentially how the data we feed into the table is structured,', 'start': 323.762, 'duration': 8.963}], 'summary': 'Import typescript class from data source to structure data for the table.', 'duration': 27.289, 'max_score': 305.436, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ao-nY-9biWs/pics/ao-nY-9biWs305436.jpg'}, {'end': 395.278, 'src': 'embed', 'start': 368.228, 'weight': 0, 'content': [{'end': 373.756, 'text': "To be precise, there's one important method which we actually implement here, and that's the connect method.", 'start': 368.228, 'duration': 5.528}, {'end': 379.323, 'text': "Connect is automatically called by the data table component when it's first rendered.", 'start': 374.437, 'duration': 4.886}, {'end': 386.032, 'text': 'And connect returns, an observable, which in turn will eventually yield an array,', 'start': 379.864, 'duration': 6.168}, {'end': 395.278, 'text': "because it's a table more than one item an array of items that follow our own data table item structure, and you're free to define this structure,", 'start': 386.032, 'duration': 9.246}], 'summary': 'The connect method yields an observable array, automatically called on initial rendering.', 'duration': 27.05, 'max_score': 368.228, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ao-nY-9biWs/pics/ao-nY-9biWs368228.jpg'}, {'end': 540.464, 'src': 'embed', 'start': 489.374, 'weight': 3, 'content': [{'end': 492.257, 'text': 'Not possibly, we always sort it in some way, even by default.', 'start': 489.374, 'duration': 2.883}, {'end': 499.603, 'text': 'So then we merge all of that into one observable, which just yields an array of our data.', 'start': 493.041, 'duration': 6.562}, {'end': 505.305, 'text': 'And then we use pipe to apply an observable operator where we map.', 'start': 500.264, 'duration': 5.041}, {'end': 511.928, 'text': 'So where we transform this array and we transform it into an array where we call two methods on the data.', 'start': 505.626, 'duration': 6.302}, {'end': 514.828, 'text': 'We have get page data and get sorted data.', 'start': 511.948, 'duration': 2.88}, {'end': 519.471, 'text': 'and there we pass in our own data we have here.', 'start': 515.568, 'duration': 3.903}, {'end': 524.173, 'text': "So here we're referring to our data property, which just holds our dummy data.", 'start': 519.89, 'duration': 4.283}, {'end': 529.276, 'text': "We create a copy of that so that we don't accidentally change the original data.", 'start': 524.794, 'duration': 4.482}, {'end': 532.458, 'text': 'Get sorted data is a method to find down there.', 'start': 530.036, 'duration': 2.422}, {'end': 538.923, 'text': 'Here, we simply check whether we are sorting and if we have a particular sort direction.', 'start': 533.058, 'duration': 5.865}, {'end': 540.464, 'text': "If we don't, we just return the data.", 'start': 538.963, 'duration': 1.501}], 'summary': 'Merging data into observable, applying operators, and sorting data with methods.', 'duration': 51.09, 'max_score': 489.374, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ao-nY-9biWs/pics/ao-nY-9biWs489374.jpg'}], 'start': 240.313, 'title': 'Angular material data manipulation', 'summary': 'Covers the workings of the mat table component and data source in angular, emphasizing the connect method for returning an observable array, and discusses data transformation and merging using observables and operators in angular material, including creating new data structures, merging arrays, applying operators, and defining sorting logic.', 'chapters': [{'end': 409.647, 'start': 240.313, 'title': 'Mat table component and data source in angular', 'summary': 'Explains the workings of the mat table component and the data source in angular, including the process of connecting the data table to a data source and defining the structure of the data items, all while emphasizing the importance of the connect method in returning an observable array of items.', 'duration': 169.334, 'highlights': ['The data table needs to be connected to a data table source, which feeds in the data that should be rendered. Emphasizes the necessity of connecting the data table to a data source to render the data.', 'The data table data source class is imported from an extra TypeScript file and extends data source, defining how the data fed into the table is structured. Explains the import and extension of the data table data source class, emphasizing its role in defining the data structure.', 'The connect method, automatically called by the data table component, returns an observable that eventually yields an array of items following the defined data table item structure. Highlights the significance of the connect method in returning an observable array of items following the defined data table item structure.']}, {'end': 589.136, 'start': 409.647, 'title': 'Angular material data transformation', 'summary': 'Explains how to transform and merge data using observables and operators in angular material, discussing the process of creating a new data structure, merging observable arrays, applying observable operators, and defining sorting logic.', 'duration': 179.489, 'highlights': ['We merge all of that into one observable, which just yields an array of our data. The process involves merging different data sources, including base data, paginated data, and sorted data, into a single observable array, ensuring the transformed data is accessible for further processing.', 'We use pipe to apply an observable operator where we transform this array and we transform it into an array where we call two methods on the data. The use of pipe and observable operators allows for transforming the array by calling specific methods on the data, enabling the customization and manipulation of the data structure.', "We create a copy of that so that we don't accidentally change the original data. A precautionary step is taken to ensure the original data is not inadvertently altered by creating a copy of the data, preventing unintended modifications during the transformation process."]}], 'duration': 348.823, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ao-nY-9biWs/pics/ao-nY-9biWs240313.jpg', 'highlights': ['The connect method, automatically called by the data table component, returns an observable that eventually yields an array of items following the defined data table item structure.', 'The data table needs to be connected to a data table source, which feeds in the data that should be rendered. Emphasizes the necessity of connecting the data table to a data source to render the data.', 'The data table data source class is imported from an extra TypeScript file and extends data source, defining how the data fed into the table is structured. Explains the import and extension of the data table data source class, emphasizing its role in defining the data structure.', 'We merge all of that into one observable, which just yields an array of our data. The process involves merging different data sources, including base data, paginated data, and sorted data, into a single observable array, ensuring the transformed data is accessible for further processing.', 'We use pipe to apply an observable operator where we transform this array and we transform it into an array where we call two methods on the data. The use of pipe and observable operators allows for transforming the array by calling specific methods on the data, enabling the customization and manipulation of the data structure.', "We create a copy of that so that we don't accidentally change the original data. A precautionary step is taken to ensure the original data is not inadvertently altered by creating a copy of the data, preventing unintended modifications during the transformation process."]}, {'end': 788.336, 'segs': [{'end': 620.867, 'src': 'embed', 'start': 589.757, 'weight': 0, 'content': [{'end': 592.738, 'text': 'So this essentially will just do the sorting for us.', 'start': 589.757, 'duration': 2.981}, {'end': 594.339, 'text': "That's all just JavaScript.", 'start': 592.758, 'duration': 1.581}, {'end': 604.883, 'text': "And we return our sorted data in get sorted data and in get paged data, We're getting data from the paginator object, which is provided to us.", 'start': 594.799, 'duration': 10.084}, {'end': 607.744, 'text': "We're finding out on which page we are.", 'start': 605.363, 'duration': 2.381}, {'end': 611.985, 'text': 'That is all managed for us internally, so this whole state is managed for us.', 'start': 608.044, 'duration': 3.941}, {'end': 616.326, 'text': 'We find out on which page we are and how many items we wanna display per page.', 'start': 612.465, 'duration': 3.861}, {'end': 620.867, 'text': 'This allows us to find out where in our data we wanna start, so at which index.', 'start': 616.786, 'duration': 4.081}], 'summary': 'Javascript sorts data for pagination, managing state internally.', 'duration': 31.11, 'max_score': 589.757, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ao-nY-9biWs/pics/ao-nY-9biWs589757.jpg'}, {'end': 707.922, 'src': 'embed', 'start': 678.479, 'weight': 1, 'content': [{'end': 685.867, 'text': 'our data table will be aware of the observable and it will update and re-render whenever the observable emits a new data,', 'start': 678.479, 'duration': 7.388}, {'end': 690.291, 'text': 'which it will whenever we change sorting, pagination or the data.', 'start': 685.867, 'duration': 4.424}, {'end': 691.532, 'text': 'this is how that works together.', 'start': 690.291, 'duration': 1.241}, {'end': 693.634, 'text': "that's our data source.", 'start': 692.233, 'duration': 1.401}, {'end': 698.577, 'text': "can be tough to wrap your head around it, but ultimately it's really straightforward.", 'start': 693.634, 'duration': 4.943}, {'end': 707.922, 'text': "we get a couple of things that can lead to the table being re-rendered and we're taking care about this with merge and then we just have our data,", 'start': 698.577, 'duration': 9.345}], 'summary': 'Data table updates when observable emits new data due to sorting, pagination, or data changes.', 'duration': 29.443, 'max_score': 678.479, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ao-nY-9biWs/pics/ao-nY-9biWs678479.jpg'}], 'start': 589.757, 'title': 'Javascript data sorting, pagination, and data table component', 'summary': 'Covers javascript usage for sorting and pagination, including built-in methods and paginator object. it also explains the data table component implementation, focusing on data source, observables, and column display handling to ensure table updates and re-renders.', 'chapters': [{'end': 660.827, 'start': 589.757, 'title': 'Javascript data sorting and pagination', 'summary': 'Introduces how javascript is used for data sorting and pagination, explaining the process of sorting, pagination, and data retrieval while highlighting the use of built-in methods and paginator object.', 'duration': 71.07, 'highlights': ['The chapter introduces the process of sorting and pagination using JavaScript, including retrieving data from the paginator object and managing the state internally.', 'It explains how to determine the page number and number of items to display per page, allowing for the calculation of the starting index and the utilization of the built-in splice method for data retrieval.', 'The use of the built-in splice method is highlighted for starting at a specific index and returning the desired number of items based on the chosen page size.']}, {'end': 788.336, 'start': 660.827, 'title': 'Data table component overview', 'summary': 'Discusses the implementation of a data table component, explaining the data source, observable, and the handling of displayed columns, aiming to ensure the table updates and re-renders when the observable emits new data.', 'duration': 127.509, 'highlights': ["The data table component's data source property is bound to an observable, which triggers the table to update and re-render whenever the observable emits new data, such as changes in sorting, pagination, or the data.", 'The process involves the use of merge to handle potential triggers for re-rendering the table, ensuring seamless updates and rendering when changes occur.', "The chapter also addresses the configuration of displayed columns, where the addition of a new 'amount' field causes an error due to insufficient information provided for rendering the column."]}], 'duration': 198.579, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ao-nY-9biWs/pics/ao-nY-9biWs589757.jpg', 'highlights': ['The chapter introduces the process of sorting and pagination using JavaScript, including retrieving data from the paginator object and managing the state internally.', "The data table component's data source property is bound to an observable, which triggers the table to update and re-render whenever the observable emits new data, such as changes in sorting, pagination, or the data."]}, {'end': 1011.457, 'segs': [{'end': 836.076, 'src': 'embed', 'start': 812.298, 'weight': 0, 'content': [{'end': 818.743, 'text': "And, by the way, it's also this directive and the underlying object which is provided by Angular Material,", 'start': 812.298, 'duration': 6.445}, {'end': 821.525, 'text': 'which we select here with add view child mat sort.', 'start': 818.743, 'duration': 2.782}, {'end': 829.291, 'text': 'We get access to that sorting object and that logic, which automatically is updated when we click on a column and when we do sort.', 'start': 821.685, 'duration': 7.606}, {'end': 830.892, 'text': 'So this is all tracked for us.', 'start': 829.351, 'duration': 1.541}, {'end': 836.076, 'text': 'We do get access to that object and to all that information with add view child.', 'start': 831.492, 'duration': 4.584}], 'summary': 'Angular material directive add view child mat sort provides access to sorting object and logic.', 'duration': 23.778, 'max_score': 812.298, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ao-nY-9biWs/pics/ao-nY-9biWs812298.jpg'}, {'end': 874.193, 'src': 'embed', 'start': 848.743, 'weight': 2, 'content': [{'end': 856.388, 'text': 'We get these ng-container blocks, which seem to be related to the columns telling by the comments, and we got the row thing here.', 'start': 848.743, 'duration': 7.645}, {'end': 862.331, 'text': "Now it's important to understand how the material data table works or the angle material data table works.", 'start': 857.148, 'duration': 5.183}, {'end': 865.021, 'text': 'We of course have to think in rows.', 'start': 863.459, 'duration': 1.562}, {'end': 868.265, 'text': 'One row per entry in our data table source.', 'start': 865.502, 'duration': 2.763}, {'end': 874.193, 'text': 'But we also have to consider the columns because the columns of course is the structure of our data.', 'start': 868.826, 'duration': 5.367}], 'summary': 'Angular material data table uses rows and columns for data structure.', 'duration': 25.45, 'max_score': 848.743, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ao-nY-9biWs/pics/ao-nY-9biWs848743.jpg'}, {'end': 971.576, 'src': 'embed', 'start': 921.251, 'weight': 3, 'content': [{'end': 924.174, 'text': 'And if we remove the comment, we again have it.', 'start': 921.251, 'duration': 2.923}, {'end': 932.28, 'text': 'The mat header row is connected to one important piece of information, to this displayed columns property.', 'start': 926.235, 'duration': 6.045}, {'end': 939.51, 'text': 'So here we seem to establish a connection between our header row and which columns we want to consider.', 'start': 932.8, 'duration': 6.71}, {'end': 944.535, 'text': 'We also see displayed columns on that second row thing.', 'start': 941.152, 'duration': 3.383}, {'end': 949.18, 'text': 'And that now is not just the header row, but every row below the header.', 'start': 944.976, 'duration': 4.204}, {'end': 953.567, 'text': 'We get built-in structural directives shipping with angle material.', 'start': 950.066, 'duration': 3.501}, {'end': 960.589, 'text': "You probably haven't seen this before because it's not ng4, but behind the scenes, this also will loop through your list.", 'start': 953.867, 'duration': 6.722}, {'end': 962.069, 'text': 'It just does a bit more.', 'start': 960.989, 'duration': 1.08}, {'end': 967.231, 'text': "It also will render the right column structure, and I'll come back to that in a second.", 'start': 962.55, 'duration': 4.681}, {'end': 971.576, 'text': 'The important part right now is we also have a connection to the columns here.', 'start': 967.771, 'duration': 3.805}], 'summary': 'Establish connection between mat header row and displayed columns. angular material has built-in structural directives.', 'duration': 50.325, 'max_score': 921.251, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ao-nY-9biWs/pics/ao-nY-9biWs921251.jpg'}], 'start': 788.336, 'title': 'Angular material data table', 'summary': 'Provides an overview of angular material data table, demonstrating the addition of sorting functionality and emphasizing the importance of understanding rows and columns, along with the connection between header rows and displayed columns.', 'chapters': [{'end': 848.023, 'start': 788.336, 'title': 'Angular material data table overview', 'summary': 'Highlights the use of angular material data table and demonstrates the addition of sorting functionality to the table, along with the process of accessing sorting object and underlying logic.', 'duration': 59.687, 'highlights': ['The sorting functionality is unlocked by adding matSort directive, which automatically updates when a column is clicked for sorting.', 'Access to the sorting object and underlying logic is obtained using ViewChild matSort, providing automatic tracking of sorting operations.']}, {'end': 1011.457, 'start': 848.743, 'title': 'Angular material data table', 'summary': 'Explains the structure and functionality of angular material data table, emphasizing the importance of understanding rows and columns, and the connection between header rows and displayed columns.', 'duration': 162.714, 'highlights': ['The importance of understanding rows and columns in the Angular Material Data Table is emphasized, with the requirement of one row per entry and clearly defined columns reflecting the data structure. ', 'The significance of the header row and its connection to displayed columns is highlighted, with practical demonstrations of adding and removing the header row. ', 'The built-in structural directives provided by Angular Material, including the functionality of rendering the right column structure, are discussed, emphasizing the connection to the columns and data source. ']}], 'duration': 223.121, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ao-nY-9biWs/pics/ao-nY-9biWs788336.jpg', 'highlights': ['The sorting functionality is unlocked by adding matSort directive, which automatically updates when a column is clicked for sorting.', 'Access to the sorting object and underlying logic is obtained using ViewChild matSort, providing automatic tracking of sorting operations.', 'The importance of understanding rows and columns in the Angular Material Data Table is emphasized, with the requirement of one row per entry and clearly defined columns reflecting the data structure.', 'The significance of the header row and its connection to displayed columns is highlighted, with practical demonstrations of adding and removing the header row.', 'The built-in structural directives provided by Angular Material, including the functionality of rendering the right column structure, are discussed, emphasizing the connection to the columns and data source.']}, {'end': 1268.074, 'segs': [{'end': 1169.727, 'src': 'embed', 'start': 1144.54, 'weight': 0, 'content': [{'end': 1151.703, 'text': "And of course here I'll remove the amount text, but I wanted to show that this is possible and that you can render all kinds of things in there.", 'start': 1144.54, 'duration': 7.163}, {'end': 1160.485, 'text': 'And now we have the amount column, which is sortable by default because we have that mat sort directive attached to the mat table.', 'start': 1152.543, 'duration': 7.942}, {'end': 1162.806, 'text': 'And this is how the data table works.', 'start': 1161.085, 'duration': 1.721}, {'end': 1169.727, 'text': 'A bit more complex with all these connections, but it really makes sense if you carefully think about it.', 'start': 1163.646, 'duration': 6.081}], 'summary': 'Demonstrating possibility of rendering various elements in the data table, including sortable amount column.', 'duration': 25.187, 'max_score': 1144.54, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ao-nY-9biWs/pics/ao-nY-9biWs1144540.jpg'}, {'end': 1204.558, 'src': 'embed', 'start': 1180.27, 'weight': 1, 'content': [{'end': 1187.778, 'text': 'Play around with that to fully understand how the data table interacts with the data source and how the content is rendered to the screen.', 'start': 1180.27, 'duration': 7.508}, {'end': 1190.121, 'text': "Now we're almost done with the data table.", 'start': 1188.379, 'duration': 1.742}, {'end': 1192.003, 'text': "Let's have one more look at pagination.", 'start': 1190.241, 'duration': 1.762}, {'end': 1197.036, 'text': 'We can see that pagination is added here in the data table at the bottom.', 'start': 1193.015, 'duration': 4.021}, {'end': 1200.537, 'text': 'there the mat paginator is added below the mat table, by the way.', 'start': 1197.036, 'duration': 3.501}, {'end': 1204.558, 'text': "so it's kind of detached to it, though it's not entirely detached.", 'start': 1200.537, 'duration': 4.021}], 'summary': 'Exploring data table interaction and pagination with mat paginator.', 'duration': 24.288, 'max_score': 1180.27, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ao-nY-9biWs/pics/ao-nY-9biWs1180270.jpg'}], 'start': 1011.857, 'title': 'Angular material data table', 'summary': 'Explains how to define column structure, render data, and configure pagination for an angular material data table, emphasizing the flexibility and customization options available.', 'chapters': [{'end': 1268.074, 'start': 1011.857, 'title': 'Angular material data table', 'summary': 'Explains how to define column structure, render data, and configure pagination for an angular material data table, emphasizing the flexibility and customization options available, leading to a comprehensive understanding of the component.', 'duration': 256.217, 'highlights': ['The chapter explains how to define column structure and render data for an Angular Material data table, emphasizing the flexibility and customization options available. Flexibility and customization options available for defining column structure and rendering data in Angular Material data table.', 'The chapter also elaborates on configuring pagination for the Angular Material data table, highlighting the ease of customization and the establishment of connection with the data source. Ease of customization and connection establishment with the data source for configuring pagination in Angular Material data table.', 'The video demonstrates the addition of pagination to the data table, showcasing the ease of switching and configuration options, providing practical insights into working with pagination. Practical insights into adding and configuring pagination, showcasing ease of switching and configuration options.']}], 'duration': 256.217, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ao-nY-9biWs/pics/ao-nY-9biWs1011857.jpg', 'highlights': ['The chapter explains how to define column structure and render data for an Angular Material data table, emphasizing the flexibility and customization options available.', 'The chapter also elaborates on configuring pagination for the Angular Material data table, highlighting the ease of customization and the establishment of connection with the data source.', 'The video demonstrates the addition of pagination to the data table, showcasing the ease of switching and configuration options, providing practical insights into working with pagination.']}], 'highlights': ['The data table includes a paginator for easy pagination and a sort header for column sorting.', 'The Angular Material data table is integrated into a project using a schematic by running ng generate at Angular material colon, material dash table, and specifying a name for the new component, which generates five files, including an extra TypeScript file.', 'The connect method, automatically called by the data table component, returns an observable that eventually yields an array of items following the defined data table item structure.', 'The chapter introduces the process of sorting and pagination using JavaScript, including retrieving data from the paginator object and managing the state internally.', 'The sorting functionality is unlocked by adding matSort directive, which automatically updates when a column is clicked for sorting.', 'The chapter explains how to define column structure and render data for an Angular Material data table, emphasizing the flexibility and customization options available.']}