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 ?
