Angular Material Data Table Tutorial

This tutorial explores the Angular Material data table and how to use it!
Join the full Angular Material course: acad.link/ng-app
Exclusive discount also available for our Angular course: acad.link/angular
Check out all our other courses: academind.com/...
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: academind.com/...
Source Code: academind.com/...
----------
• Go to 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 / 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!

[@nishant_thite]

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

[@Wrathoh]

the syntax is no longer valid. check the altest schematics spec for help.

[@samcarter9111]

ng generate @angular/material:table

[@martinn.6082]

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

[@anneschwarz3693]

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

[@academind]

Es freut mich wirklich sehr, dass dir meine Videos gefallen Anne, vielen Dank für dein super Feedback :)

[@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.

[@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.

[@AkshayKumar-dz5ts]

I used mat data table with pagination and sorting included. My data is coming from the backend. I make this request to the backend inside DataSource class. For some reason, the data i'm retrieving isn't being loaded immediately on the table. I'm having to go to another page and then coming back to this page for the data to be reflected on my table. Any fixes?

[@ManishPatel90]

Hi Akshay, I am stuck with same issue. Data doesn't load first time. Only when i click pagination arrows/page number dropdown, i see data. you got any solution? Thanks.

[@vctdiniz]

i have the same problem. did you got a solution?

[@AkshayKumar-dz5ts]

@@vctdiniz Hello guys, I think i just used a resolver to load the data first and then render the said page. All the best.

[@budkin]

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

[@yanssouu8299]

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

[@raistlinmajere2257]

updated CLI command ==> `ng generate @angular/material:table your-table`

[@googleUs3r]

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

[@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".

[@aeropss6546]

Could you show us how to do a full CRUD material table please? AKA delete, edit buttons on the table itself, etc...

[@dylandiegojittonz4321]

I finally understood it!!! thanks man, btw, is there a way to display each column dynamically?? with an ngFor for example?

[@mohanarangankamalakannan3015]

Can u upload video of How to fetch data from api to this mat table

[@manivelarung]

- I want to pick and sum any column in a data table and value to be displayed in my form. Is it possible? - Also need a search feature that search every rows and columns of the data table.

[@AdventuresWithPooja]

Is it necessary to create a new component for the data-table?

[@azurboy]

great video, do you have another one where you link the data to a HttpClient?

[@Steffi5376]

Did you find one?

[@azurboy]

@@Steffi5376 yes, his courses in Udemy

[@directedspeed]

Thank you for the video. Please does anyoone know how to add data to a mat-table from a modal. It only works when it's not a modal but when I use a modal to add data to my table, it shows in the console but not on the UI

[@adityadalai9459]

How to implement filter in this data table?

[@johnneel]

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

[@PS-oy9xr]

Max you're the best, you are a devs factory!!

[@meehandahale9239]

You are the best I have also bought many of your courses on Udemy! Content is Very Nice and also updating every year Kudos!!!

[@gencqelaj5469]

Can you do one video where you add the edit button to each row of this table and you make a database your dataSource?

[@ladanski]

As a beginner in Angular, I went through hell with material data table. I was not used to using ngOnInit and kept initializing stuff in the constructor. I am enjoying angular now though.

[@halivudestevez2]

Ahh! Max! the best angular-tut guy!

[@chandansharma6849]

sir superb, you are only one who cleared this topic to me

[@TheCrossx6]

i'm getting this error after running the generate command The class 'MatFormField' is listed in the declarations of the NgModule 'MatFormFieldModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.

[@nicolapigozzo5188]

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

[@BlockCylinder]

This was really good but it's a little out of date now. I hope you will release an updated version soon.

[@winniepobouh9894]

Nice Tuto, I currently use this, but when I make 'ng test', I get the error: 'TypeError: Cannot read property 'sortChange' of undefined'. Could you help me to understand and fix this errors? Thanks.

[@winniepobouh9894]

​Thanks @@aletsl . 'MatSortModule' is already added in my app.module.ts, but i get the same error.

[@george907126]

thanks for the detailed review of the tables. I was given a test task to display a list of continents and countries in a table in angular and apollo. Can I implement this solution with tables? And how do I display the data from the graphl playground to the angular table. If you can advise me something, I will be very grateful. Thanks

[@RoVBonfim10]

Awesome explanations! Thank u dear.

[@denisentanas.brahmana6411]

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.

[@tallwolf8581]

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.

[@jac4020]

Quick question can ngx-datatable and material libraries mix? I am a back end developer and my team just got out GUI member. I still want to know what is going on and learn more. Thanks to whoever answer

[@mikethomson9958]

Customer insists on Material Table by weekend - oh no but then along comes Max - Thanks for another super tutorial. It is actually easy once explained by you but tend to agree that somehow Angular has a way of making simple things look complicated.

[@Themok-Gamma-6]

thanks man! So happy that I found your channel!

[@academind]

Thank you Kirill, happy to have you on board!

[@aravindj9893]

you are a great instructor of me.

[@sau-xf6sl]

Love the mentor. Really nice and incredible explanation

[@Matty0187]

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

[@paritashah8430]

I am getting error "provided data source did not match an array observable or datasource". When I console.log(data) it shows data is within some object ------> { statusCode:200, errorMsg:'No response', exception: 'No response', response: Array(682), successMsg: 'success'} If I toggle that arrow next to "response" that is where my entire array is that I want to store in dataSource. Can someone please assist? I tried to write [dataSource] = "users.response". but not working.

[@andreadg5429]

Can someone explain my why my pagination has no animation? It just changes the table page, no hover no thing. Also, the number of entries dropdown does not work, just opens down and looks really ugly. I don't understand why

[@mythicpink]

@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;

[@ALex-ts1gu]

Hey Alex, is it possible to use virtual scrolling to prevent performance issues? Thanks a lot. Best regards Alex

[@matthewdekock3255]

is it Possible to display live websocket values inside a mat table ?

[@MrMilandsm]

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

[@khusikar676]

Can anyone help me??? Api call--- On default date range sort and pagination is working fine but, After filter date range My sorting and pagination is not working...

[@7oeseven793]

at 4:29 I dont have the content of line 2 where it has the [datasource] keyword. Whats going on?

[@dimajoyti]

How to display nested JSON data in Angular material table?

[@kksdf1]

How to implement filtering using this code. Couldn't find a way.

[@andriizarazka8671]

A good lesson. How to configure pagination when data comes from the REST Server, how to send a request to the server to get the next piece of data?

[@omargonzalez-yh7gg]

Name Email Age City {{item.name}} {{item.email}} {{item.age}} {{item.city | uppercase}}

[@marciomafideju1775]

@@omargonzalez-yh7gg Right. But this is a Material tutorial.

[@RahulKumarYadav-jg9nb]

Please make videos on Ag-grid angular

[@AAKELLAPRANAV]

Thank you very much max sir. Your videos are as great as ever. Thank you so much.

[@saalnaagaming]

plz exxpain about how to get data from angular to website

[@paweczajewski8550]

How to send / join data form external data from Api?

[@pietro5898]

is there a way to insert data in the table?

[@siddharthsingh1382]

Can you tell me how to create a coloured table or heatmap in angular

[@vinitagaikwad3683]

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

[@shpendsermaxhaj7062]

I'm having the same exact issue, did you find the solution for it?

[@MushahidHussain-ql2ne]

Hello Sir being your student at Udemy I face this error on ng generate @angular/material: table tablename ng generate @angular/material: table tablename The 'path' option in 'D:\material_angular ode_modules\@angular\material\schematics g-generate avigation\schema.json' is using deprecated behaviour. 'workingDirectory' smart default provider should be used instead. (0 , validation_1.validateName) is not a function

[@valix85]

Well explanation... It's possibile try to transform a data table component in one slider component? I think to use pagination at 1item and complex data to use in a cell... Would be a good exercise

[@janinebloem8415]

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.

[@paintwithdipali]

i want to show table when i click on navigation menu...how to do this

[@codemylife9121]

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!

[@academind]

Thanks a lot, it makes me happy to read that you liked the video and my approach :)

[@brepaolo5480]

yessa but, where is a button primary to look nice?

[@flyviral]

Amazing as always

[@רחלאברס]

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

[@SaiPavanKumar19]

How to keep header row stick at top

[@ionictest3320]

Hi Max, how to refresh the dataTable when new data is added to datasource

[@jessy9643]

what can we do to stack the data table of angular material to get better responsiveness ?

[@raymondc5874]

Hands down. Great explaination.

[@academind]

Thanks a lot for your great feedback Rattanak!

[@Yoshi016]

Very Helpful thank you!

[@user779hjg45]

It should be - ng generate @angular/material:material-table --name=app-data-table because - An unhandled exception occurred: Could not find module "@angular-material"

[@vctdiniz]

try this: ng generate @angular/material:table

[@desiremuson]

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

[@avanishmylari6217]

please explain how to retrieve json data into this datatable

[@saifali-fy6bl]

Are you able to do it now ?

[@53895389]

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.

[@dhananjayfarmaha3041]

hey max..i am following this tutorial of yours and was able to implement everything successfully. What i want now is to display json data returned from a service dynamically into this data table instead of hard coding it...how do i do that??

[@maravarmanmanoharan3300]

codingthesmartway.com/angular-material-part-4-data-table/ Follow this URL You can see how to get data from REST API. Very simple explanation

[@highjumpdev3692]

Thousands prayer for you!

[@techiegram8804]

can you please tell me ho to compare selected option to right answer in quiz app

[@alwayssomewhere716]

Hi Max when I put into main.html I get a blank screen can you assist please. Anyway great tutorial

[@aproposjulia]

Try to put the code in app.component.html instead

[@budkin]

Could you please make a video showing how to hook up the data from an API?

[@academind]

You can check some of my older Angular videos on this channel - I do make some Http requests in some of these videos :)

[@vijaysagar2914]

@@academind please share Http Request Table data

[@DASsoulstryker]

if you are in angular 14 use this to generate the table ng generate @angular/material:table component-name

[@kallavinod28]

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.

[@saifali-fy6bl]

How to change the color of the sort header in the DataTable ??

[@akhilshrivastava3319]

Can any one explain the difference in mat-table and cdk-table.

[@panzorax.]

how can add first row input elements ? i want to first row id input name input last name input then add button how can i add

[@agrawaldk1990]

is there any way to transpose the angular-material data table ?

[@bongelabwana7523]

how to add go to page input in that table? user can jump to desired page

[@rakeshnayak2072]

how to push a static row to angular material table? please help

[@uestraven]

how do i create the datasource interface when im getting the table data from a service?

[@shpendsermaxhaj7062]

Did you find any solution to it? I'm having the same issue here

[@JelleDHulster]

Exactly what i will need tomorrow!! Thx!!!!!

[@academind]

Happy to read that the video came at the right point in time :)

[@JelleDHulster]

Collection "@angular/material" cannot be resolved. But it is installed, locally and globaly. Any Idea why? npm -v => 6.0.0

[@JelleDHulster]

It is only from @angular/cli v6 i guess... :(

[@sagargurao9035]

You are awesome buddy ... Good learning with every video

[@academind]

YOU are awesome Sagar, happy to read that my videos are helpful for you!

[@saidudyala4179]

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

[@SilviuIT-tn3dn]

...\PetStore-Silviu> ng generate @angular/material:material-table --name=data-table An unhandled exception occurred: Collection "@angular/material" cannot be resolved. See "C:\...\Temp g-g4Pt3H\angular-errors.log" for further details. I get this error..

[@1654045]

Incredible! Tnx!

[@felixjimenezgonzalez9292]

Is it possible to edit the table tho? 🧐

[@daniellaerachannel]

excellent! thanks a lot

[@academind]

Thanks again for your great support!

[@akhilshrivastava3319]

how to refresh the dataTable when new data is added to datasource.

[@myxsys]

I think Angular Material is just too complicated. Thanks for explaining it though

[@qc4257]

it's really not tho. Imagine if we didn't have any 3rd party API libraries

[@Steffi5376]

Is angular material better than ngx data table?

[@myxsys]

@@Steffi5376 No idea. I haven't touched Angular since I posted that comment

[@Kevinproducciones2]

@Michael Wanyoike You didn't like it 😂

[@myxsys]

@@Kevinproducciones2 The problem I found was that its designed to do a specific set of tasks really well, and if you tried doing something outside that scope, then you are out of luck

[@ashoknaik2195]

How can display data from firestore in Datatable

[@k.alipardhan6957]

how to i follow to tutorial in WebStorm? command ng does not work