Angular material table with custom rows

Question

I have a table which is sorted by date, but it is fairly big, so we want to add some guidance rows to help the user orientate through the data.

The generel structure we want is,

|_Header1_|_Header2_|
| 25/11/2018        |
| Row1    | Row1    |
| Row2    | Row2    |
| Row3    | Row3    |
| 26/11/2018        | 
| Row4    | Row4    |
| Row5    | Row5    |
| Row6    | Row6    |
| Row7    | Row7    |
| 27/11/2018        |
 ...

We use Angular 4 with Angular Material 2.0.0-beta.8 , And it is impossible to update it right now. How can this be implemented using angular material, and if it is not possible with angular material, what should be done?

Answer 1

I am not quite sure about how to do this with material table but this can be achievable easily by Bootstrap table. You just need to create a map which can store a key as your date and value as list of the data for the date.