LoginSignup
0

More than 5 years have passed since last update.

Office UI Fabricのテーブル表示

Posted at

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

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

img700.png

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

<!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からサンプルプログラムを動かしてみることができます。

まとめ

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

参考URL

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0