title: Making material angular table with Collapsible table rows
body: <p>I'm developing an application using Angular 4 and material. I tried to use material table and now I wanna make it's row collapsible.
  can anybody help me on this?</p>
  
  <p>html :</p>
  
  <pre><code>&lt;section class="container-fluid no-padding"&gt;
      &lt;div class="row panel"&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="right-section col-md-4"&gt;
                  &lt;span id="volunteer"&gt;
                      داوطلب
                  &lt;/span&gt;
  
                  &lt;span id="dot"&gt;
                      .
                  &lt;/span&gt;
  
                  &lt;span id="volunteers-population" class="PersianNumber"&gt;
                      2341 نفر
                  &lt;/span&gt;
  
                  &lt;span class="sorting-title"&gt;
                      مرتب سازی براساس:
                  &lt;/span&gt;
  
                  &lt;div id="select-option"&gt;
                      &lt;!-- &lt;select id="select-sorting"&gt;
                          &lt;option value="volvo"&gt;تاریخ ثبت نام&lt;/option&gt;
                          &lt;option value="saab"&gt;تاریخ ثبت نام&lt;/option&gt;
                          &lt;option value="mercedes"&gt;تاریخ ثبت نام&lt;/option&gt;
                          &lt;option value="audi"&gt;تاریخ ثبت نام&lt;/option&gt;
                      &lt;/select&gt; --&gt;
                      &lt;mat-form-field&gt;
                          &lt;mat-select dir="rtl" [(ngModel)]="selectedValue"&gt;
                              &lt;mat-option *ngFor="let food of foods" [value]="food.value"&gt;
                                  {{ food.viewValue }}
                              &lt;/mat-option&gt;
                          &lt;/mat-select&gt;
                      &lt;/mat-form-field&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="left-section col-md-3 col-md-offset-3"&gt;
                  &lt;button mat-button class="icon-button" (click)="log(1111)"&gt;
                      &lt;i class="material-icons base-icon "&gt;search&lt;/i&gt;
                  &lt;/button&gt;
                  &lt;button mat-button class="filter-button"&gt;
                      &lt;span&gt;
                          فیلتر کردن
                      &lt;/span&gt;
                      &lt;i class="material-icons"&gt;filter_list&lt;/i&gt;
                  &lt;/button&gt;
                  &lt;button mat-button class="add-button"&gt;
                      &lt;span class="add-text"&gt;
                          اضافه کردن
                      &lt;/span&gt;
                      &lt;img src="../../assets/icon/folder.png" alt="" class="add-icon"&gt;
                      &lt;!-- &lt;i class="material-icons  add-icon"&gt;create_new_folder&lt;/i&gt; --&gt;
                  &lt;/button&gt;
                  &lt;button mat-button class="icon-button"&gt;
                      &lt;i class="material-icons base-icon"&gt;more_vert&lt;/i&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="table-container" id="data-table"&gt;
                  &lt;mat-table dir="rtl" #table [dataSource]="dataSource"&gt;
  
                      &lt;!-- Position Column --&gt;
                      &lt;ng-container matColumnDef="position"&gt;
                          &lt;mat-header-cell *matHeaderCellDef class="position-header-class"&gt; ردیف &lt;/mat-header-cell&gt;
                          &lt;mat-cell *matCellDef="let element" class="position-class PersianNumber"&gt;
                              &lt;i class="material-icons position-arrow"&gt;keyboard_arrow_down&lt;/i&gt;
                              &lt;span class="position-number"&gt;
                                  {{element.position}}
                              &lt;/span&gt;
                          &lt;/mat-cell&gt;
                      &lt;/ng-container&gt;
  
  
                      &lt;ng-container matColumnDef="reset"&gt;
                          &lt;mat-header-cell *matHeaderCellDef class="reset-class"&gt;
                              &lt;mat-checkbox [(ngModel)]="checked"&gt;&lt;/mat-checkbox&gt;
                          &lt;/mat-header-cell&gt;
                          &lt;mat-cell *matCellDef="let element" class="reset-class"&gt;
                              &lt;mat-checkbox [(ngModel)]="checked"&gt;&lt;/mat-checkbox&gt;
                          &lt;/mat-cell&gt;
                      &lt;/ng-container&gt;
  
                      &lt;ng-container matColumnDef="avatar"&gt;
                          &lt;mat-header-cell *matHeaderCellDef class="avatar"&gt; &lt;/mat-header-cell&gt;
                          &lt;mat-cell *matCellDef="let element" class="avatar"&gt;
                              &lt;img class="table-profile-picture" src="{{element.avatar}}" alt=""&gt; &lt;/mat-cell&gt;
                      &lt;/ng-container&gt;
  
  
                      &lt;!-- Name Column --&gt;
                      &lt;ng-container matColumnDef="name"&gt;
                          &lt;mat-header-cell *matHeaderCellDef class="avatar"&gt; نام &lt;/mat-header-cell&gt;
                          &lt;mat-cell *matCellDef="let element" class="avatar"&gt; {{element.name}} &lt;/mat-cell&gt;
                      &lt;/ng-container&gt;
  
  
  
                      &lt;!-- Weight Column --&gt;
                      &lt;ng-container matColumnDef="last_name"&gt;
                          &lt;mat-header-cell *matHeaderCellDef class="avatar"&gt; نام خانوادگی &lt;/mat-header-cell&gt;
                          &lt;mat-cell *matCellDef="let element" class="avatar"&gt; {{element.last_name}} &lt;/mat-cell&gt;
                      &lt;/ng-container&gt;
  
                      &lt;!-- Color Column --&gt;
                      &lt;ng-container matColumnDef="father_name"&gt;
                          &lt;mat-header-cell *matHeaderCellDef class="avatar"&gt; نام پدر &lt;/mat-header-cell&gt;
                          &lt;mat-cell *matCellDef="let element" class="avatar"&gt; {{element.father_name}} &lt;/mat-cell&gt;
                      &lt;/ng-container&gt;
  
                      &lt;ng-container matColumnDef="gender"&gt;
                          &lt;mat-header-cell *matHeaderCellDef class="avatar"&gt; جنسیت &lt;/mat-header-cell&gt;
                          &lt;mat-cell *matCellDef="let element" class="avatar"&gt; {{element.gender}} &lt;/mat-cell&gt;
                      &lt;/ng-container&gt;
  
                      &lt;ng-container matColumnDef="ragistration_date"&gt;
                          &lt;mat-header-cell *matHeaderCellDef class="reg-date"&gt; تاریخ ثبت نام &lt;/mat-header-cell&gt;
                          &lt;mat-cell *matCellDef="let element" class="reg-date PersianNumber"&gt; {{element.registration_date}} &lt;/mat-cell&gt;
                      &lt;/ng-container&gt;
  
                      &lt;ng-container matColumnDef="plan"&gt;
                          &lt;mat-header-cell *matHeaderCellDef&gt; طرح &lt;/mat-header-cell&gt;
                          &lt;mat-cell *matCellDef="let element"&gt;
                              &lt;mat-chip-list&gt;
                                  &lt;mat-chip *ngIf="element.plan[0]"&gt;{{element.plan[0]}}&lt;/mat-chip&gt;
                                  &lt;mat-chip *ngIf="element.plan[1]"&gt; {{element.plan[1]}}&lt;/mat-chip&gt;
                                  &lt;!-- &lt;mat-chip *ngIf="checkPlanLength(element.plan)"&gt;
                                      &lt;i class="material-icons"&gt;more_horiz&lt;/i&gt;
                                  &lt;/mat-chip&gt; --&gt;
                              &lt;/mat-chip-list&gt;
                          &lt;/mat-cell&gt;
                      &lt;/ng-container&gt;
  
                      &lt;ng-container matColumnDef="status"&gt;
                          &lt;mat-header-cell *matHeaderCellDef class="plan"&gt; وضعیت &lt;/mat-header-cell&gt;
                          &lt;mat-cell *matCellDef="let element" class="plan" style="color: #4caf50"&gt;
                              {{element.status}}
                              &lt;div class="green-dot"&gt;
                              &lt;/div&gt;
                              &lt;button mat-button class="icon-button more-icon"&gt;
                                  &lt;i class="material-icons "&gt;more_vert&lt;/i&gt;
                              &lt;/button&gt;
                          &lt;/mat-cell&gt;
                      &lt;/ng-container&gt;
  
                      &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
                      &lt;mat-row *matRowDef="let row; columns: displayedColumns; let index=index"&gt;&lt;/mat-row&gt;
                  &lt;/mat-table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row "&gt;
              &lt;div class="col-md-2 paginator"&gt;
                  &lt;button mat-button class="icon-button"&gt;
                      &lt;i class="material-icons base-icon"&gt;keyboard_arrow_right&lt;/i&gt;
                  &lt;/button&gt;
                  &lt;button mat-button class="icon-button" id="page-button"&gt;
                      &lt;span id="page-num" class="PersianNumber"&gt;
                          صفحه 1
                      &lt;/span&gt;
                      &lt;i class="material-icons base-icon"&gt;keyboard_arrow_down&lt;/i&gt;
                  &lt;/button&gt;
                  &lt;button mat-button class="icon-button"&gt;
                      &lt;i class="material-icons base-icon"&gt;keyboard_arrow_left&lt;/i&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="col-md-2 col-md-offset-3 left-side-pagination "&gt;
                  &lt;select name="" id="page-size" class="PersianNumber"&gt;
                      &lt;option value="10" &gt;10&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;span class="title "&gt;
                      تعداد نمایش در هر صفحه:
                  &lt;/span&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>TS Code:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { DataSource } from '@angular/cdk/collections';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/observable/of';
  
  @Component({
      templateUrl: './volunteers.component.html',
      styleUrls: ['./volunteers.component.scss']
  })
  
  export class Volunteers {
      checked = true;
  
      foods = [
          { value: 'steak-0', viewValue: 'تاریخ ثبت نام' },
          { value: 'pizza-1', viewValue: 'جنسیت' },
          { value: 'tacos-2', viewValue: 'وضعیت' }
      ];
  
      selectedValue: string = this.foods[0].value;
  
      displayedColumns = ['position','reset','avatar', 'name', 'last_name', 'father_name', 'gender', 'ragistration_date', 'plan', 'status'];
      dataSource = new ExampleDataSource();
  
  
      checkPlanLength(inputArray): boolean{
          console.log(inputArray &gt; 2)
          return inputArray.length &gt; 2;
      }
  
      log(input) :void{
          console.log(input);
      }
  
  }
  
  export interface Element {
      position: number;
      avatar:string;
      name: string;
      last_name: string;
      father_name: string;
      gender: string;
      registration_date: string;
      plan: string[];
      status: string;
  }
  
  const data: Element[] = [
      { position: 1, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: ['سوم'], status: 'تایید شده' },
      { position: 2, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: [ 'اول', 'دوم'], status: 'تایید شده' },
      { position: 3, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: ['سوم', 'اول', 'دوم'], status: 'تایید شده' },
      { position: 4, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: [], status: 'تایید شده' },
      { position: 5, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: ['سوم', 'اول', 'دوم'], status: 'تایید شده' },
      { position: 6, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: ['سوم', 'اول', 'دوم','چهارم' ], status: 'تایید شده' },
      { position: 7, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: ['سوم', 'اول', 'دوم'], status: 'تایید شده' },
      { position: 8, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: ['سوم', 'اول', 'دوم'], status: 'تایید شده' },
      { position: 9, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: ['سوم', 'اول', 'دوم'], status: 'تایید شده' },
      { position: 10, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: ['سوم', 'اول', 'دوم'], status: 'تایید شده' }
  ];
  
  /**
   * Data source to provide what data should be rendered in the table. The observable provided
   * in connect should emit exactly the data that should be rendered by the table. If the data is
   * altered, the observable should emit that new set of data on the stream. In our case here,
   * we return a stream that contains only one set of data that doesn't change.
   */
  export class ExampleDataSource extends DataSource&lt;any&gt; {
      /** Connect function called by the table to retrieve one stream containing the data to render. */
      connect(): Observable&lt;Element[]&gt; {
          return Observable.of(data);
      }
  
      disconnect() { }
  }
  </code></pre>
  
  <p>as you know, we can't use material Expansion panel Here, so what is solution?
  is there any other component or module prepared for this , or you have to implement it by your self?</p>