Angular 2 材料数据表 |移动响应能力

Question

我正在使用 Angular 材料数据表 (https://material.angular.io/) 在我的 Angular 4 应用程序中实现数据表。

一切似乎都运行良好，直到我切换到整个表格都被扭曲的移动视图。我想知道是否有办法在移动设备上获得流畅的体验（例如，在移动设备上添加水平滚动条）。

欢迎任何选项/建议。

Answer 1

We need to do some tweaking in or css file inorder to achieve repsonsiveness in xs,sm devices. Please find below code which we are using:

.CSS file



     // Mat-DataTable
    .data-table-wrapper {
        display: flex;
        flex-direction: column;
        .mobile-label {
            display: none;
        }
        .mat-toolbar{
            height: 45px;
        }
        .data-table-content{
            display: flex;
            flex-direction: column;
            position: relative;
            overflow-y: auto;
        }
      }

      @media(max-width: 600px) 
      {
        .data-table-wrapper
        {
            .mobile-label {
                width: 150px;
                display: inline-block;
                font-weight: bold;
              }
            .mat-header-row {
                display: none;
            }
            .mat-row 
            { 
                flex-direction: column;
                align-items: flex-start;
                padding: 8px 24px;
                min-height: 20px;
                mat-cell:first-child, mat-footer-cell:first-child, mat-header-cell:first-child
                {
                    padding: 0px;
                }
            }
            .data-table-content{
                display: block;
                flex-direction: column;
            }
        }
      }






<mat-card-content class="data-table-wrapper mat-elevation-z8">
     <mat-table class="data-table-content" [dataSource]="dataSource" [class.isMobile]="isMobile">
          <ng-container matColumnDef="DATE">
            <mat-header-cell *matHeaderCellDef>
              <span>DATE</span>
            </mat-header-cell>
            <mat-cell *matCellDef="let req">
              <span class="mobile-label">DATE</span>
              <span class="">{{req.createdDate}}</span>
            </mat-cell>
          </ng-container>


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




Please try above snippet and check whether that is working fine. :)