Componente < mat-table > barra de rolagem

html

<mat-table
        #table
        [dataSource]="lista"
        matSort
        [@animateStagger]="{ value: '50' }"
        fusePerfectScrollbar
        matSortActive="nome"
        matSortDisableClear
        matSortDirection="asc"
      >
        <ng-container matColumnDef="nome">
          <mat-header-cell *matHeaderCellDef mat-sort-header
            >Nome</mat-header-cell
          >
          <mat-cell *matCellDef="let entidade">
            <p class="text-truncate">{{ entidade.nome }}</p>
          </mat-cell>
        </ng-container>
        <ng-container matColumnDef="setor">
          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
            >Setor</mat-header-cell
          >
          <mat-cell *matCellDef="let entidade" fxHide fxShow.gt-sm>
            <p class="text-truncate">{{ entidade.setorNome }}</p>
          </mat-cell>
        </ng-container>
        <ng-container matColumnDef="tipoCategoria">
          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
            >TIpo de categoria</mat-header-cell
          >
          <mat-cell *matCellDef="let entidade" fxHide fxShow.gt-sm>
            <p class="text-truncate">{{ entidade.tipoCategoriaDescricao }}</p>
          </mat-cell>
        </ng-container>
        <ng-container matColumnDef="status">
          <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-sm
            >Status</mat-header-cell
          >
          <mat-cell *matCellDef="let entidade" fxHide fxShow.gt-sm>
            <mat-icon
              *ngIf="entidade.statusDoRegistro.key === 'ATIVO'"
              matTooltip="{{ entidade.statusDoRegistro.descricao }}"
              class="active-icon green-600 s-16"
              >check</mat-icon
            >
            <mat-icon
              *ngIf="entidade.statusDoRegistro.key === 'INATIVO'"
              matTooltip="{{ entidade.statusDoRegistro.descricao }}"
              class="active-icon red-500 s-16"
              >close</mat-icon
            >
          </mat-cell>
        </ng-container>
        <mat-header-row
          *matHeaderRowDef="displayedColumns; sticky: true"
        ></mat-header-row>
        <mat-row
          *matRowDef="let entidade; columns: displayedColumns"
          class="order"
          matRipple
          (click)="visualizar(entidade.id)"
        >
        </mat-row>
      </mat-table>

Como fazer o componente < mat-table > ficar com barra de rolagem horizontal, abaixo de 800 pixels ?

Achei na documentação do Angular Material: Angular Material UI component library, seria isso?

1 curtida

Eu vi, mas ainda n√£o consegui implementar. Vou estudar melhor.

Valeu

N√£o ficou da maneira que eu quero

Como vc precisa exatamente?

1 curtida

Normal

Mobile

image

No mobile, queria que ficasse normal, mas com barra de rolagem. Só no mobile