<div class="table-tab">

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

        <!--- Note that these columns can be defined in any order.
              The actual rendered columns are set as a property on the row definition" -->

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

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

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

        <!-- Color Column -->
        <ng-container cdkColumnDef="salary">
            <md-header-cell *cdkHeaderCellDef>Salary</md-header-cell>
            <md-cell *cdkCellDef="let row"> {{row.salary | currency:'USD':true}} </md-cell>
        </ng-container>

        <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
        <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
    </md-table>

</div>