title: How to show and hide specific Column?
body: <p>I have a <code>mat-table</code> with <code>mat-menu</code>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-menu #menu="matMenu"&gt;
    &lt;button mat-menu-item&gt;
          &lt;mat-icon&gt;notifications_off&lt;/mat-icon&gt;
          &lt;span&gt;Index&lt;/span&gt;
        &lt;/button&gt;
    &lt;button mat-menu-item&gt;
          &lt;mat-icon&gt;voicemail&lt;/mat-icon&gt;
          &lt;span&gt;Created At&lt;/span&gt;
        &lt;/button&gt;
  &lt;/mat-menu&gt;
  
  &lt;table mat-table [dataSource]="dataSource"&gt;
    &lt;ng-container matColumnDef="index"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Index &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let vms"&gt; {{vms.index}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="createdAt"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Created At &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let vms"&gt;{{vms.vm_created_at}}&lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I also have a menu that shows the list of <code>displayedCloumns</code>, I am trying to show and hide the columns when I click the menu. For e.g. <code>index</code> or <code>createdAt</code></p>
  
  <p><code>component</code></p>
  
  <pre><code>displayedColumns = ['index', 'createdAt'];
  dataSource;
  </code></pre>
  
  <p>The example in the Angular material docs explains, show, and hide the random column and uses <code>slice</code> and <code>push</code>.</p>
  
  <p>I am trying to <code>show</code> and <code>hide</code> the specific column on click.</p>
  
  <p>Is there a way to make it work?</p>