title: Hide column Mat-Table Angular
body: <p>I am working with mat-table, I need to make it responsive, when user access from a cell phone, seven columns it only displays me three
  Could someone guide me?</p>
  
  <p>I tried using fxHide, but without success.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.button-raised {
    width: 60px;
    height: 30px;
    font-size: 12px;
    min-width: 0px; 
    line-height: 0px; 
    padding: 0 0px;
  }
  .rdesp-status mat-icon {margin: 4px;}
  .mat-table {
    overflow: auto;
    max-height: 500px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>      &lt;mat-table [dataSource]="dataSource" [@animateStagger]="{value:'50'}"&gt;
  
          &lt;ng-container class="internalId" matColumnDef="internalId"&gt;
            &lt;mat-header-cell *matHeaderCellDef  fxHide  fxShow.gt-sm &gt;Nº RDESP&lt;/mat-header-cell&gt;
            &lt;mat-cell *matCellDef="let element" fxHide  fxShow.gt-sm  &gt;
              &lt;p class="text-grey" matTooltip="{{element.internalId}}"&gt;{{element.number}}&lt;/p&gt;
            &lt;/mat-cell&gt;
          &lt;/ng-container&gt;
  
          &lt;ng-container class="alias" matColumnDef="alias"&gt;
            &lt;mat-header-cell *matHeaderCellDef&gt;Apelido&lt;/mat-header-cell&gt;
            &lt;mat-cell *matCellDef="let element"&gt;
              &lt;p class="text-truncate" matTooltip="{{element.alias}}"&gt;{{element.alias}}&lt;/p&gt;
            &lt;/mat-cell&gt;
          &lt;/ng-container&gt;
  
          &lt;ng-container class="containerName" matColumnDef="name"&gt;
            &lt;mat-header-cell *matHeaderCellDef&gt;Nome&lt;/mat-header-cell&gt;
            &lt;mat-cell *matCellDef="let element"&gt;
              &lt;span class="mobile-label"&gt;Nome&lt;/span&gt;
              &lt;p class="text-truncate" matTooltip="{{element.alias}}"&gt;{{element.name}}&lt;/p&gt;
            &lt;/mat-cell&gt;
          &lt;/ng-container&gt;
  
          &lt;ng-container matColumnDef="job"&gt;
            &lt;mat-header-cell *matHeaderCellDef&gt;Job&lt;/mat-header-cell&gt;
            &lt;mat-cell *matCellDef="let element"&gt;
              &lt;span class="mobile-label"&gt;Job&lt;/span&gt;
              &lt;p class="text-truncate" matTooltip="{{element.job}}"&gt;{{element.job}}&lt;/p&gt;
            &lt;/mat-cell&gt;
       </code></pre>
  </div>
  </div>
  </p>