<md-table #table [dataSource]="dataSource" *fuseIfOnDom [@animateStagger]="{value:'50'}">

    <!-- Type Column -->
    <ng-container cdkColumnDef="icon">
        <md-header-cell *cdkHeaderCellDef fxFlex="64px"></md-header-cell>
        <md-cell *cdkCellDef="let row" fxFlex="64px">
            <md-icon class="type-icon" [class]="row.type"></md-icon>
        </md-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container cdkColumnDef="name">
        <md-header-cell *cdkHeaderCellDef>Name</md-header-cell>
        <md-cell *cdkCellDef="let row"> {{row.name}}</md-cell>
    </ng-container>

    <!-- Type Column -->
    <ng-container cdkColumnDef="type">
        <md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Type</md-header-cell>
        <md-cell *cdkCellDef="let row" fxHide fxShow.gt-md> {{row.type}}</md-cell>
    </ng-container>

    <!-- Owner Column -->
    <ng-container cdkColumnDef="owner">
        <md-header-cell *cdkHeaderCellDef fxHide.xs>Owner</md-header-cell>
        <md-cell *cdkCellDef="let row" fxHide.xs> {{row.owner}}</md-cell>
    </ng-container>

    <!-- Size Column -->
    <ng-container cdkColumnDef="size">
        <md-header-cell *cdkHeaderCellDef fxHide.xs>Size</md-header-cell>
        <md-cell *cdkCellDef="let row" fxHide.xs>{{row.size === '' ? '-': row.size}}</md-cell>
    </ng-container>

    <!-- Modified Column -->
    <ng-container cdkColumnDef="modified">
        <md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Modified</md-header-cell>
        <md-cell *cdkCellDef="let row" fxHide fxShow.gt-md>{{row.modified}}</md-cell>
    </ng-container>

    <!-- Detail Button Column -->
    <ng-container cdkColumnDef="detail-button">
        <md-header-cell *cdkHeaderCellDef fxFlex="48px" fxHide.gt-md></md-header-cell>
        <md-cell *cdkCellDef="let row" fxFlex="48px" fxHide.gt-md>
            <button md-icon-button class="sidenav-toggle"
                    fuseMdSidenavToggler="file-manager-right-sidenav">
                <md-icon>info</md-icon>
            </button>
        </md-cell>
    </ng-container>

    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
    <md-row *cdkRowDef="let row; columns: displayedColumns;"
            (click)="onSelect(row)"
            [ngClass]="{'md-light-blue-50-bg':row == selected}"
            md-ripple
            [@animate]="{value:'*',params:{y:'100%'}}"
    >
    </md-row>
</md-table>
