Expandable table rows in angular 4 with angular material

Question

How would you make rows expandable in angular material tables? One requirement is that I need to be using the angular material table. I would also prefer to use the material

Answer 1

Here is how you can do it with Angular Material. This example includes pagination and one example with mat-sort-header on the 'name' column. I had to override mat paginator and do a custom sort to make sure the expandable row was still by its parent when it was sorted. This example also allows you to open multiple rows at a time and to close all rows

https://stackblitz.com/edit/angular-material2-issue-zs6rfz