<md-table #table [dataSource]="dataSource">

    <!-- Type Column -->
    <ng-container cdkColumnDef="icon">
        <md-header-cell *cdkHeaderCellDef></md-header-cell>
        <md-cell *cdkCellDef="let row">
            <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>Type</md-header-cell>
        <md-cell *cdkCellDef="let row"> {{row.type}}</md-cell>
    </ng-container>

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

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

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

    <!-- Detail Button Column -->
    <ng-container cdkColumnDef="detail-button">
        <md-header-cell *cdkHeaderCellDef></md-header-cell>
        <md-cell *cdkCellDef="let row">
            <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>
    </md-row>
</md-table>
