Angular Material Data Table Tutorial
This tutorial explores the Angular Material data table and how to use it!
Join the full Angular Material course:
Exclusive discount also available for our Angular course:
Check out all our other 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:
Source Code:
———-
• Go to 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
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!
I subscribed to Angular – The Complete Guide 2020 years ago when it was Angular 2. It’s wonderful that you keep it current and available to all for the original modest fee. Probably the best value in the Angular training market. Would love if you would consider enhancing this example to allow and persist changes to values in the table.
I enjoyed the explanations and I’m happy that I’m not alone in thinking that Angular does things in a very obtuse way.
Thanks you very much for this Video Max. I was personally already using the Mat Table but I like your approach to it with the shematic. It makes it a lil more cleaner that way! I’ll keep that in mind for my next project 😀
Cheers, keep up the great videos!
Thanks a lot, it makes me happy to read that you liked the video and my approach 🙂
Hi Max. I am looking for a component / grid / table that I can use for my ionic project. The component must be able to have checkbox select in each row, column sorting, row styling based on one of the column values. Also must have pagination. The application will be used on desktop, tablets and mobile devices. Can you please advise what grid / data table components I can consider. I have recently completed your udemy ionic course, but the ion grid was not covered in this detail, so I am not sure if I can user the ion grid for all this, or if I need to consider another angular component.
Great video! Do you have a video on the best way to hook the Angular Material table up to a remote data source?
Love the mentor. Really nice and incredible explanation
thank you for all great content! can you please explain how can i print mat-table that will be display normal?
Hi Max and Everyone,
I am one of the student at Udemy.
I want to display the table contain that has same id as one. “GROUPY BY” for the project I’m currently working on.
Thank you for your help
There is now a MatTableDataSource class. Could you explain how this would integrate with this boilerplate?
thanks sir for this tutorial. when items per page selected for >25 items, you must scroll down to see paginator, if you scroll down, you can’t see table header, right? and if you make a button add too or something like that on the top page you must scroll up again to see button. my questions for you sir, how to make it simple access between paginator and button? or between paginator and table header? how to disable page scrolling, and enable it for list of data table? i’m a begginer of angular app or web proogramming sir.
Nice Tutorial. Could you please upload the video with loading own json data from a service into the datatable? I have been stuck on the issue ‘Error trying to diff ‘[object Object]’. Only arrays and iterables are allowed’ since very long while trying to load my json data into the table. I tried passing the data in Array format as well. But no luck.
Thanks
I’m having the same exact issue, did you find the solution for it?
Thanks for this tutorial. Have any idea how to add CRUD into this? I wish to give it a function that lets users add their own input into the table.
Hey guys.
I’m using mat-table (witch from my point of view it’s an awesome material angular component) and I’m having some performance problems when I’m trying to show 1000 rows or more.
I’m talking about the [pageSize] array.
Does anyone face this problem as well!??
Thank you all.
Hi could you please make a video tutorial how to implement complex datatable plugin with individual column searching?
Wenn ich ein Problem habe und ein Tutorial von dir finde, ist mein Tag gerettet 🙂 Super Kurse, super erklärt, einfach toll!
Es freut mich wirklich sehr, dass dir meine Videos gefallen Anne, vielen Dank für dein super Feedback 🙂
what can we do to stack the data table of angular material to get better responsiveness ?
Great tut. Can you provide some sort of solution for responsive hiding columns?
Thank you ! Very nice explained and it’s more clear how everything is linked.
However I have one question. In order to filter or sort the data, it has to be done on the server side if I fetch data from the server ?
Because it is written in data-table-datasource.ts:
/**
* Sort the data (client-side). If you’re using server-side sorting,
* this would be replaced by requesting the appropriate data from the server.
*/
This means that I have to do a GET method to have the data sorted or filtered ?
Such as this tutorial:
https://blog.angular-university.io/angular-material-data-table/
I hope this question is not too much
Thanks for your help
Thank you very much max sir. Your videos are as great as ever. Thank you so much.
Could you do a series in angular cdk? I’m particularly interested in the lower level libs like scrollabale and a11y