mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-18 14:22:35 +00:00
60 lines
2.4 KiB
HTML
60 lines
2.4 KiB
HTML
<mat-table #table [dataSource]="dataSource" [@animateStagger]="{value:'50'}">
|
|
|
|
<!-- Type Column -->
|
|
<ng-container cdkColumnDef="icon">
|
|
<mat-header-cell *cdkHeaderCellDef fxFlex="64px"></mat-header-cell>
|
|
<mat-cell *cdkCellDef="let row" fxFlex="64px">
|
|
<mat-icon class="type-icon" [ngClass]="row.type"></mat-icon>
|
|
</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Name Column -->
|
|
<ng-container cdkColumnDef="name">
|
|
<mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
|
|
<mat-cell *cdkCellDef="let row"> {{row.name}}</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Type Column -->
|
|
<ng-container cdkColumnDef="type">
|
|
<mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Type</mat-header-cell>
|
|
<mat-cell *cdkCellDef="let row" fxHide fxShow.gt-md> {{row.type}}</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Owner Column -->
|
|
<ng-container cdkColumnDef="owner">
|
|
<mat-header-cell *cdkHeaderCellDef fxHide.xs>Owner</mat-header-cell>
|
|
<mat-cell *cdkCellDef="let row" fxHide.xs> {{row.owner}}</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Size Column -->
|
|
<ng-container cdkColumnDef="size">
|
|
<mat-header-cell *cdkHeaderCellDef fxHide.xs>Size</mat-header-cell>
|
|
<mat-cell *cdkCellDef="let row" fxHide.xs>{{row.size === '' ? '-': row.size}}</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Modified Column -->
|
|
<ng-container cdkColumnDef="modified">
|
|
<mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Modified</mat-header-cell>
|
|
<mat-cell *cdkCellDef="let row" fxHide fxShow.gt-md>{{row.modified}}</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Detail Button Column -->
|
|
<ng-container cdkColumnDef="detail-button">
|
|
<mat-header-cell *cdkHeaderCellDef fxFlex="48px" fxHide.gt-md></mat-header-cell>
|
|
<mat-cell *cdkCellDef="let row" fxFlex="48px" fxHide.gt-md>
|
|
<button mat-icon-button class="sidebar-toggle" fxHide.gt-md
|
|
(click)="toggleSidebar('file-manager-details-sidebar')">
|
|
<mat-icon class="secondary-text">info</mat-icon>
|
|
</button>
|
|
</mat-cell>
|
|
</ng-container>
|
|
|
|
<mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
|
|
<mat-row *cdkRowDef="let row; columns: displayedColumns;"
|
|
(click)="onSelect(row)"
|
|
[ngClass]="{'mat-accent-50-bg':row == selected}"
|
|
matRipple [@animate]="{value:'*',params:{y:'100%'}}"
|
|
>
|
|
</mat-row>
|
|
</mat-table>
|