Office UI Fabricのテーブル表示 #AdventCalendar

13日目(もう昨日だけど……)はOffce UI Fabric(以下"OfficeUI")のテーブル表示について解説します。

HTMLにもTABLEタグがありますが、OfficeUIにもテーブル表示を行うCSSクラスが用意されている、という位置付けです。簡単なサンプルとして、九九の表をOfficeUIのテーブルを使用して表示してみました。以下のような表示になります。

サンプルソースコードは以下になります。

<!DOCTYPE html>
<html ng-app="App">
  <head>
    <meta charset="utf-8" />
    <title>Table Sample</title>
    <link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
    <link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>
  <body ng-controller="AppController">
    <div class="ms-Grid">
      <div class="ms-Grid-row">
        <div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg12">
          <div class="ms-Table">
            <div class="ms-Table-row" ng-repeat="xdata in data">
              <span class="ms-Table-cell" ng-repeat="ydata in xdata">{{ydata}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      var app = angular.module('App', []);
      app.controller('AppController', ['$scope',
        function($scope) {
          $scope.data = [];
          for (var x = 1; x <= 9; x++) {
            $scope.data.push([]);
            for (var y = 1; y <= 9; y++) {
              $scope.data[x-1].push(x * y);
            }
          }
        }
      ]);
    </script>
  </body>
</html>

使用方法は以下のように、「ms-Table」がテーブル全体、「ms-Table-row」が行、「ms-Table-cell」が列になります。HTMLのTABLE,TR,TDタグ~~で良いのでは……~~と同じような感じで使用します。

<div class="ms-Table">
  <div class="ms-Table-row">
    <span class="ms-Table-cell">aaa</span>
  </div>
</div>

おまけ

ちなみに、これまでのOffice UI Advent Calednarで使用したサンプルプログラムをBitbacketで公開しました。以下のURLからサンプルプログラムを動かしてみることができます。

Office UI Advent Calendar 2015サンプルプログラム
- http://furandon_pig.bitbucket.org/sample/officeui/advcal2015/

まとめ

OfficeUIのテーブルについて解説しました。正直Bootstrapのテーブルと比べると指定可能なクラスが少ない感じがします。Bootstrap的なtablle-condensed的な表示が必要な場合は、自分でCSSを定義することになりそうです。

参考URL

Table