Array of objects as dataSource in mat-table

Question

I have array of objects in this structure:

data = [ 
  {
    course: 'Angular',
    students: [
      {name: '', enrolled_date: '', email: ''},
      {name: '', enrolled_date: '', email: ''},
      {name: '', enrolled_date: '', email: ''}
    ]
  },
  {
    course: 'React',
    students: [
      {name: '', enrolled_date: '', email: ''},
      {name: '', enrolled_date: '', email: ''},
      {name: '', enrolled_date: '', email: ''}
    ]
  },
  {
    course: 'React Native',
    students: [
      {name: '', enrolled_date: '', email: ''},
      {name: '', enrolled_date: '', email: ''},
      {name: '', enrolled_date: '', email: ''}
    ]
  }
]

My objective is to display this student data in a mat table for each course. Expected table is to be:

__________________________________

|Name | Enrolled Date | Email      |
------------------------------------
|ANGULAR                           |
---------
|Stu1 | 20-09-2020    | stu1@gmail |
-----------------------------------
|Stu2 | 17-09-2020    | stu2@gmail |
-----------------------------------
|Stu3 | 23-09-2020    | stu3@gmail |
-----------------------------------
|REACT                             |
--------
|Stu1 | 20-01-2020    | stu1@gmail |
-----------------------------------
|Stu2 | 17-01-2020    | stu2@gmail |
-----------------------------------
|Stu3 | 25-01-2020    | stu3@gmail |
-----------------------------------
|REACT NATIVE                      |
--------
|Stu1 | 20-05-2020    | stu1@gmail |
----------------------------------
|Stu2 | 22-05-2020    | stu2@gmail |
-----------------------------------
|Stu3 | 16-05-2020    | stu3@gmail |
-----------------------------------

I need to loop the student data which is also an array. Hence, I sent data.students to mat-table dataSource by looping mat-table.

<ng-container *ngFor="let eachObj of data">
  <table mat-table [dataSource]="eachObj.students">
    <ng-container matColumnDef="name">...</ng-container>
    <ng-container matColumnDef="date">...</ng-container>
    <ng-container matColumnDef="email">...</ng-container>
  </table>
</ng-container>

Basically, the above code will pickup the first object from data array and render the table. And then pickup second object and print one more table and repeat...

I knew this is not the best approach. Can I get the better approach without manipulating the dataStructure of data?

Answer 1

const STUDENT_DATA = [ 
  {
    course: 'Angular',
    students: [
      {name: 'A', enrolled_date: '', email: '[email protected]'},
      {name: 'B', enrolled_date: '', email: '[email protected]'},
      {name: 'C', enrolled_date: '', email: '[email protected]'}
    ]
  },
  {
    course: 'React',
    students: [
      {name: 'D', enrolled_date: '', email: '[email protected]'},
      {name: 'E', enrolled_date: '', email: '[email protected]'},
      {name: 'F', enrolled_date: '', email: '[email protected]'}
    ]
  },
  {
    course: 'React Native',
    students: [
      {name: 'G', enrolled_date: '', email: '[email protected]'},
      {name: 'H', enrolled_date: '', email: '[email protected]'},
      {name: 'I', enrolled_date: '', email: '[email protected]'}
    ]
  }
]

dataSource = STUDENT_DATA.reduce((acc, {course, students}) => ([...acc, {course, isGroupBy: true}, ...students]),[])

console.log(dataSource);

You can simply flatten array and create an object for course with new groupBy key which be true

Now pass this new flatten array in dataSource mat-table You can group header like below

 <!-- Group header -->

 <ng-container matColumnDef="groupHeader">
    <td colspan="999" mat-cell *matCellDef="let groupBy"><strong>{{groupBy.course}}</strong></td>
  </ng-container>

Working Example for this

https://stackblitz.com/edit/angular-mattable-with-groupheader-tagirk?file=app/table-basic-example.html