web-dev-qa-db-fra.com

Angular 2 tables réactives pour la conception de matériaux

Chaque fois que je serre la taille de ma fenêtre, les données de la cellule de la table se superposent aux données d'autres cellules et elles ne sont plus alignées sur mon en-tête. Que dois-je faire pour le rendre réactif? J'ai déjà essayé overflow-x:auto, y a-t-il quelque chose qui fait défiler mon tableau horizontalement. Si ce n'est pas le cas, aucune solution pour la table de vues empilées pour les écrans plus petits ne fonctionnera également pour moi.

<div fxLayout="column" fxFlex="80" class="scrollable-table"  >

  <ng-container>

    <md-table class="mat-body-1 responsive-table" #table [dataSource]="viewModelSource">        
      <ng-container mdColumnDef="id" style="margin-right:200px;">
        <md-header-cell *mdHeaderCellDef class="ngBold"> ID </md-header-cell>
        <md-cell *mdCellDef="let row" routerLink="{{__PAGE_ROUTE}}{{row.id}}">
          {{row.id}}<br/>
        </md-cell>
      </ng-container>
      <ng-container mdColumnDef="sapCode">
        <md-header-cell *mdHeaderCellDef class="ngBold"> Sap Code </md-header-cell>
        <md-cell *mdCellDef="let row"> {{row.sapCode}} </md-cell>
      </ng-container>
      <ng-container mdColumnDef="divisionName">
        <md-header-cell *mdHeaderCellDef class="ngBold"> Division </md-header-cell>
        <md-cell *mdCellDef="let row">{{row.divisionName}} </md-cell>
      </ng-container>
      <ng-container mdColumnDef="faxNo">
        <md-header-cell *mdHeaderCellDef class="ngBold"> Fax </md-header-cell>
        <md-cell *mdCellDef="let row"> {{row.faxNo}} </md-cell>
      </ng-container>
      <ng-container mdColumnDef="gst">
        <md-header-cell *mdHeaderCellDef class="ngBold"> GST </md-header-cell>
        <md-cell *mdCellDef="let row"> {{row.gst}} </md-cell>
      </ng-container>

      <ng-container mdColumnDef="ntnNo">
        <md-header-cell *mdHeaderCellDef class="ngBold"> NTN </md-header-cell>
        <md-cell *mdCellDef="let row"> {{row.ntnNo}} </md-cell>
      </ng-container>
      <ng-container mdColumnDef="phoneNo">
        <md-header-cell *mdHeaderCellDef class="ngBold"> Phone No </md-header-cell>
        <md-cell *mdCellDef="let row"> {{row.phoneNo}} </md-cell>
      </ng-container>
      <ng-container mdColumnDef="shortName">
        <md-header-cell *mdHeaderCellDef class="ngBold"> Short Name </md-header-cell>
        <md-cell *mdCellDef="let row"> {{row.shortName}} </md-cell>
      </ng-container>
      <ng-container mdColumnDef="title">
        <md-header-cell *mdHeaderCellDef class="ngBold"> Title </md-header-cell>
        <md-cell *mdCellDef="let row"> {{row.title}} </md-cell>
      </ng-container>
      <ng-container mdColumnDef="website">
        <md-header-cell *mdHeaderCellDef class="ngBold"> Website </md-header-cell>
        <md-cell *mdCellDef="let row"> {{row.website}} </md-cell>
      </ng-container>
      <ng-container mdColumnDef="address">
        <md-header-cell *mdHeaderCellDef class="ngBold"> Address </md-header-cell>
        <md-cell *mdCellDef="let row"> {{row.address}} </md-cell>
      </ng-container>          
      <md-header-row *mdHeaderRowDef="displayedColumns" class="ngBackground"></md-header-row>
      <md-row *mdRowDef="let row; columns: displayedColumns;"></md-row>
    </md-table>

  </ng-container>
</div>
angularangular-materialangular-material2
7
arkhan

à partir de: https://github.com/angular/material2/issues/8680#issuecomment-348273320

(J'ai ajouté https://github.com/angular/material2/issues/8680#issuecomment-358187897 )

J'ai fini par faire mes propres modifications:

.mat-row, .mat-header-row {
  width: 450vw; //PERSONALLY I HAD 45 COLUMNS
}
.mat-header-row { //THIS MAKES THE HEADER STICKY
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 1;
  background-color: inherit;
}
.table { //OR WHATEVER YOU CALL THE mat-table
  overflow: scroll;
}

dis-moi si ça te va.

1
tatsu