Dynamic tables and sorting with Angular Material

So I just spent about four hours trying to figure out how to build an Angular table with a working sort header… I figured I’d post a quick tutorial/guide here in an attempt to save y’all some headache.

My requirements…

  • Build a table with Angular 5’s data table component.
  • Make sure the data in the table was sortable with Angular 5’s sort header.
  • Request data from a server and load it into the table (the tricky part).

Steps

  • Follow the Angular Material guide for putting together a data table with a sort header
  • Implement a custom DataSource class using BehaviorSubject
  • Link the custom data source to the table
  • Implement custom sorting method
  • Link sorting method to data table and publish new sorted data to the data subject

And the most valuable bit… Some example code

Hope this helps!

Entrepreneur, Real Estate Investor, Programmer. On a never ending quest for knowledge.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store