title: How to filter data and display it on Detailed Mat-table
body: <p>I have a detailed mat-table where I want to display data.
  For now, I am able to display data in both the main table and the detailed table.
  But what I want is that the main table row should only contain 1 row for a specific date and inside that row, it should contain other rows of the same date.
  Suppose I have 9 days data,3 records for each day, say 01/Feb,02/Feb, and 03/Feb so I would like to display only 3 rows in the main table and when a user clicks on row 01/Feb he should see 3 rows inside the detailed table.
  Similarly, if he clicks on 02/Feb he should see the data corresponding to only 02/Feb.</p>
  
  <p>Right now my table shows all the 9 records(rows) in the main table and if I click on a row from the main table it again shows 9 records. 
  How can I filter the data to display according to my need?</p>
  
  <p>Code for HTML :-</p>
  
  <pre><code>&lt;table
          mat-table
          [dataSource]="jobExecutionList"
          multiTemplateDataRows
          class="mat-elevation-z8"&gt;
          &lt;ng-container
              matColumnDef="{{ column }}"
              *ngFor="let column of columnsToDisplay"&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt;{{ column }}&lt;/th&gt;
              &lt;td mat-cell *matCellDef="let element"&gt;
                  {{ element[column] }}
              &lt;/td&gt;
          &lt;/ng-container&gt;
          &lt;!-- Expanded Content Column - The detail row is made up of this one 
          column that spans across all columns --&gt;
          &lt;ng-container matColumnDef="expandedDetail"&gt;
              &lt;td mat-cell *matCellDef="let element" [attr.colspan]="1"&gt;
                  &lt;div
                      class="example-element-detail"
                      [@detailExpand]="
                          element == expandedElement
                              ? 'expanded'
                              : 'collapsed'"&gt;
                    &lt;table mat-table [dataSource]="jobExecutionList"&gt;
                          &lt;!-- Position Column --&gt;
                          &lt;ng-container matColumnDef="id"&gt;
                              &lt;th mat-header-cell *matHeaderCellDef&gt;ID&lt;/th&gt;
                              &lt;td mat-cell *matCellDef="let element2"&gt;
                                  {{ element2.id }}
                              &lt;/td&gt;
                          &lt;/ng-container&gt;
                          &lt;!-- Name Column --&gt;
                          &lt;ng-container matColumnDef="executionDate"&gt;
                              &lt;th mat-header-cell *matHeaderCellDef&gt;
                                  Execution Date
                              &lt;/th&gt;
                              &lt;td mat-cell *matCellDef="let element2"&gt;
                                  {{
                                      element2.executionDate}}
                                          &lt;!-- | date: 'yyyy-MM-dd' --&gt;
  
                              &lt;/td&gt;
                          &lt;/ng-container&gt;
                          &lt;!-- Name Column --&gt;
                          &lt;ng-container matColumnDef="lable"&gt;
                              &lt;th mat-header-cell *matHeaderCellDef&gt;
                                  Label
                              &lt;/th&gt;
                              &lt;td mat-cell *matCellDef="let element2"&gt;
                                  {{ element2.lable }}
                              &lt;/td&gt;
                          &lt;/ng-container&gt;
  
                          &lt;!-- Weight Column --&gt;
                          &lt;ng-container matColumnDef="previousTimePeriod"&gt;
                              &lt;th mat-header-cell *matHeaderCellDef&gt;
                                  Previous Time Period
                              &lt;/th&gt;
                              &lt;td mat-cell *matCellDef="let element2"&gt;
                                  {{ element2.previousTimePeriod }}
                              &lt;/td&gt;
                          &lt;/ng-container&gt;
  
                          &lt;!-- Symbol Column --&gt;
                          &lt;ng-container matColumnDef="afterTimePeriod"&gt;
                              &lt;th mat-header-cell *matHeaderCellDef&gt;
                                  After Time Period
                              &lt;/th&gt;
                              &lt;td mat-cell *matCellDef="let element2"&gt;
                                  {{ element2.afterTimePeriod }}
                              &lt;/td&gt;
                          &lt;/ng-container&gt;
  
                          &lt;!-- Symbol Column --&gt;
                          &lt;ng-container matColumnDef="status"&gt;
                              &lt;th mat-header-cell *matHeaderCellDef&gt;
                                  Status
                              &lt;/th&gt;
                              &lt;td mat-cell *matCellDef="let element2"&gt;
                                  {{ element2.status }}
                              &lt;/td&gt;
                          &lt;/ng-container&gt;
  
                          &lt;tr
                              mat-header-row
                              *matHeaderRowDef="
                                  columnsToDisplay2;
                                  sticky: true
                              "
                          &gt;&lt;/tr&gt;
                          &lt;tr
                              mat-row
                              *matRowDef="
                                  let row2;
                                  columns: columnsToDisplay2
                              "
                          &gt;&lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;tr
              mat-header-row
              *matHeaderRowDef="columnsToDisplay; sticky: true"
          &gt;&lt;/tr&gt;
          &lt;tr
              mat-row
              *matRowDef="let element; columns: columnsToDisplay"
              class="example-element-row"
              [class.example-expanded-row]="expandedElement === element"
              (click)="
                  expandedElement =
                      expandedElement === element ? null : element
              "
          &gt;&lt;/tr&gt;
          &lt;!-- Group header --&gt;
  
          &lt;tr
              mat-row
              *matRowDef="let row; columns: ['expandedDetail']"
              class="example-detail-row"
          &gt;&lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Code for Typescript:-</p>
  
  <pre><code>ngOnInit() {
      this.rendertable();
  }
  rendertable() {
      const project = JSON.parse(this.dataService.getObject('project'));
      this.recommendationService
          .getJobList(project.id)
          .subscribe(data =&gt; {
              this.jobExecutionList = new MatTableDataSource();
              this.jobExecutionList.data = data;
              this.jobExecutionList.sort = this.sort;
              this.jobExecutionList.paginator = this.paginator;
          });
  }
  export interface Element {
  id: number;
  lable: string,
  executionDate: string;
  previousTimePeriod: string;
  afterTimePeriod: string;
  status: string;
  jobId: string;
  executionId: string;
  }
  </code></pre>
  
  <p>Alternative solution can be to group the data based on date can someone show me how to do it. I am fairly new to angular and programming</p>