Angular Material Data Table Tutorial

This tutorial explores the Angular Material data table and how to use it!

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.

----------

----------

• Follow @maxedapps and @academind_real on Twitter

See you in the videos!

----------

[martinn.]

I enjoyed the explanations and I'm happy that I'm not alone in thinking that Angular does things in a very obtuse way.

[cliffeby]

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.

[nishant_thite]

Wow, 4+ years old video, still super helpful !! Amazing as always Max!
All of us are grateful for your timeless teaching... 👍

[anneschwarz]

Wenn ich ein Problem habe und ein Tutorial von dir finde, ist mein Tag gerettet :) Super Kurse, super erklärt, einfach toll!

[Matty]

Could you do a series in angular cdk? I'm particularly interested in the lower level libs like scrollabale and a11y

[yanssouu]

after 24 hours of searching answers, I found you and omg thank you sooo much you saved my life !!!

[budkin]

There is now a MatTableDataSource class. Could you explain how this would integrate with this boilerplate?

[johnneel]

Great video! Do you have a video on the best way to hook the Angular Material table up to a remote data source?

[janinebloem]

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.

[kallavinod]

I need help in angular datatable with custom Filters, please suggest if I can build the same using concept used for sorting and paging here.

[codemylife]

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 :D

Cheers, keep up the great videos!

[mtsurov]

I'm so lost. Just as i thought im getting it, Angular did the usual, went from 101 to IMPOSSIBLE AF. I'm just gonna do what everybody does, copy and paste and hope it works.

[Themok-Gamma-]

thanks man! So happy that I found your channel!

[nicolapigozzo]

Hi could you please make a video tutorial how to implement complex datatable plugin with individual column searching?

[googleUsr]

If you get Cannot read property 'data' of undefined error in this example change to: ngOnInit() {
this.dataSource = new DataTableDataSource(this.paginator, this.sort);
} in data-table.component.ts file

[ttbfkmt]

thank you for all great content! can you please explain how can i print mat-table that will be display normal?

[saidudyala]

Am unable to get the same styling as you did may I know why

[MrMilandsm]

Great tut. Can you provide some sort of solution for responsive hiding columns?

[Farnorin]

Hello Max. I follow your udemy course but haven't found the chapter about tables yet.
I'm using this approach and it's working fine except for one detail: I have a function that updates my dataSource, but when I call it the rows don't render unless I click on a header to sort or change the number of items per page in the paginator, then they appear fine. Any ideas on why this could be happening and how to fix it, anyone? The only thing that updates instantly is the paginator "1 – 7 of 7".

[AMartin-ytgn]

Hello I'm new in it maybe anyone of you has some tutorials of get request with parameters such as pagination and user name, for now i have written webapi + asp.net core backend and this is fully work, but i don't know how to link it to angular frontend