title: Angular material table with expandable action button at each row
body: <p>We are trying to achieve table design POC as given in following image which is having following features.</p>
  
  <p><strong>Issue is with following functionality</strong></p>
  
  <p><code>1) Expand and collapse behavior should be per row(Not for all rows at a time).</code><br />
  <code>2) It should have value of particular row on click of any action from action-toolbar(i.e. Config, History, etc in image).</code></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ng-container matColumnDef="symbol"&gt;
  &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Symbol &lt;/th&gt;
  &lt;td mat-cell *matCellDef="let element"&gt;
    &lt;div [ngClass]="showFloatingButtons == true ? 'floating-pane-active' : 'floating-pane-deactive'"
      class="button-row"&gt;
      &lt;mat-icon mat-fab *ngIf="showFloatingButtons == true" color="primary" class="floating-buttons"&gt;offline_pin
      &lt;/mat-icon&gt;
      &lt;mat-icon mat-fab *ngIf="showFloatingButtons == true" color="primary" class="floating-buttons"&gt;query_builder
      &lt;/mat-icon&gt;
      &lt;mat-icon mat-fab *ngIf="showFloatingButtons == true" color="primary" class="floating-buttons" disabled&gt;restore
      &lt;/mat-icon&gt;
      &lt;mat-icon mat-fab *ngIf="showFloatingButtons == true" color="primary" class="floating-buttons"&gt;
        play_circle_filled&lt;/mat-icon&gt;
      &lt;mat-icon (click)="toggleFloat()" class="sky_blue"&gt;more_horiz&lt;/mat-icon&gt;
    &lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>table {
    width: 100%;
  }
  
  .mat-form-field {
    font-size: 14px;
    width: 50%;
  }
  
  .mat-column-position {
    max-width: 100px;
    min-width: 10px;
  }
  
  .mat-column-name {
    max-width: 100px;
    min-width: 10px;
  }
  
  .example-trigger {
    display: inline-block;
  }
  
  .floating-buttons {
    z-index: 2;
    // position: fixed;
    overflow: auto;
    top: auto;
    left: auto;
  }
  
  .floating-pane-active {
    background-color: rgba(215, 228, 230, 0.39);
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    background-position: right;
    background-repeat: repeat;
  }
  
  .floating-pane-deactive {
    background-color: rgba(215, 228, 230, 0.39);
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    background-position: right;
    background-repeat: repeat;
    width: 30px;
  }
  
  .button-row {
    align-items: center;
    justify-content: space-around;
  }
  
  .action-buttons {
    width: 20px;
  }
  
  .sky_blue {
    color: skyblue;
  }
  
  .mat-column-symbol {
    word-wrap: break-word !important;
    white-space: unset !important;
    flex: 0 0 10% !important;
    width: 10% !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
  
    word-break: break-word;
  
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-align: right;
  }
  </code></pre>
  
  <p><strong>TS</strong>(putting only important line)</p>
  
  <p><code>showFloatingButtons = false;</code></p>
  
  <blockquote>
    <p>Collapsed column icons
    <a href="https://i.stack.imgur.com/JHSCx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JHSCx.png" alt="Collapsed column icons"></a></p>
    
    <p>Expanded column icons
    <a href="https://i.stack.imgur.com/656WB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/656WB.png" alt="Expanded column icons"></a></p>
  </blockquote>
  
  <p>FYI: I've refered this <a href="https://stackblitz.com/angular/lnyxjmgyxvg?file=app%2Ftable-expandable-rows-example.ts" rel="nofollow noreferrer">link</a> for expandable row table.</p>
  
  <p>Please find demo code <a href="https://stackblitz.com/edit/angular-atokns?embed=1&amp;file=src/app/app.component.html" rel="nofollow noreferrer">here on stackblitz</a> for more.</p>
  
  <p>PS: Main problem here is to achieve expanding single row icons at a time.</p>