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!