Hide column Mat-Table Angular

user_10601430 0
Viewed 10099

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?

I tried using fxHide, but without success.

.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;
}
      <mat-table [dataSource]="dataSource" [@animateStagger]="{value:'50'}">

        <ng-container class="internalId" matColumnDef="internalId">
          <mat-header-cell *matHeaderCellDef  fxHide  fxShow.gt-sm >Nº RDESP</mat-header-cell>
          <mat-cell *matCellDef="let element" fxHide  fxShow.gt-sm  >
            <p class="text-grey" matTooltip="{{element.internalId}}">{{element.number}}</p>
          </mat-cell>
        </ng-container>

        <ng-container class="alias" matColumnDef="alias">
          <mat-header-cell *matHeaderCellDef>Apelido</mat-header-cell>
          <mat-cell *matCellDef="let element">
            <p class="text-truncate" matTooltip="{{element.alias}}">{{element.alias}}</p>
          </mat-cell>
        </ng-container>

        <ng-container class="containerName" matColumnDef="name">
          <mat-header-cell *matHeaderCellDef>Nome</mat-header-cell>
          <mat-cell *matCellDef="let element">
            <span class="mobile-label">Nome</span>
            <p class="text-truncate" matTooltip="{{element.alias}}">{{element.name}}</p>
          </mat-cell>
        </ng-container>

        <ng-container matColumnDef="job">
          <mat-header-cell *matHeaderCellDef>Job</mat-header-cell>
          <mat-cell *matCellDef="let element">
            <span class="mobile-label">Job</span>
            <p class="text-truncate" matTooltip="{{element.job}}">{{element.job}}</p>
          </mat-cell>

angular6 angular-material angular
1 Answers

Update

As was pointed out in the comments below, Flex-layout has changed as of v 7.0.0 and ObservableMedia has been deprecated and replaced with MediaObserver, details here.

Here would be the changes needed to the code I originally posted for the new syntax:

import { MediaObserver, MediaChange } from '@angular/flex-layout';

...

export class MyComponent implements OnInit, OnDestroy {

    displayedColumns: string[];
    dataSource = new MatTableDataSource</* Type of Data */>();
    currentScreenWidth: string = '';
    flexMediaWatcher: Subscription;
    // ... other variables

    constructor(private mediaObserver: MediaObserver) {
        this.flexMediaWatcher = mediaObserver.media$.subscribe((change: MediaChange) => {
            if (change.mqAlias !== this.currentScreenWidth) {
                this.currentScreenWidth = change.mqAlias;
                this.setupTable();
            }
        }); // Be sure to unsubscribe from this in onDestroy()!
    };

    setupTable() {
        this.displayedColumns = ['internalId', 'alias', 'name', 'job'];
        if (this.currentScreenWidth === 'xs') { // only display internalId on larger screens
            this.displayedColumns.shift(); // remove 'internalId'
        }
    };
}

Original Answer:

Looks like you are missing some data in your question. There should be a definition in the template that defines a row: <mat-header-row> and <mat-row> tags. Within the mat-header-row tag the columns to display are part of the *matHeaderRowDef. For example:

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

This variable (displayedColumns in this case) controls which columns are actually displayed. You are using fxHide, so you can import ObservableMedia in your component and inject it, then use the observable it emits whenever the screen changes size to modify your columns displayed. Details here. for example:

import { ObservableMedia, MediaChange } from '@angular/flex-layout';

...

export class MyComponent implements OnInit, OnDestroy {

    displayedColumns: string[];
    dataSource = new MatTableDataSource</* Type of Data */>();
    currentScreenWidth: string = '';
    flexMediaWatcher: Subscription;
    // ... other variables

    constructor(private media: ObservableMedia) {
        this.flexMediaWatcher = media.subscribe((change: MediaChange) => {
            if (change.mqAlias !== this.currentScreenWidth) {
                this.currentScreenWidth = change.mqAlias;
                this.setupTable();
            }
        }); // Be sure to unsubscribe from this in onDestroy()!
     };

    setupTable() {
        this.displayedColumns = ['internalId', 'alias', 'name', 'job'];
        if (this.currentScreenWidth === 'xs') { // only display internalId on larger screens
            this.displayedColumns.shift(); // remove 'internalId'
        }
    };
}

Now your table will be responsive if the user flips their phone to landscape mode for example.

user_81054370
Related