Office UI Fabric Table Example

office-ui-fabric-table.html

  <link rel="stylesheet" href="/public/fabric/css/fabric.min.css">
  <link rel="stylesheet" href="/public/fabric/css/fabric.components.min.css">
  
  <div class="ms-Grid">
  <div class="ms-Grid-row">
    <div class="ms-Grid-col ms-u-lg12">
      <div class="ms-font-su">{{vm.teamName}} Roster</div>
      <div class="ms-Table">
        <div class="ms-Table-row">
          <span class="ms-Table-cell ms-font-xl">Pos.</span>
          <span class="ms-Table-cell ms-font-xl">Player</span>
          <span class="ms-Table-cell ms-font-xl">NFL</span>
          <span class="ms-Table-cell ms-font-xl">Paid</span>
        </div>
        <div class="ms-Table-row" data-ng-repeat="pick in vm.picks">
          <span class="ms-Table-cell ms-font-xl">{{pick.player.position}}</span>
          <span class="ms-Table-cell ms-font-xl">{{pick.player.fullName}}</span>
          <span class="ms-Table-cell ms-font-xl">{{pick.player.nflTeam}}</span>
          <span class="ms-Table-cell ms-font-xl"><i class="fa fa-usd"></i> {{pick.price}}</span>
        </div>
      </div>
    </div>
  </div>
</div>