feat(table): add support for fixed table

Added support for new table type fixed, added to Office UI Fabric 2.4.x.

Closes #308.

package.json

@@ -49,7 +49,7 @@
   },
   "dependencies": {
     "angular": "1.5.5",
-    "office-ui-fabric": "2.3.0"
+    "office-ui-fabric": "2.4.1"
   },
   "devDependencies": {
     "angular-animate": "1.5.5",

src/components/table/demo/index.html

@@ -327,6 +327,61 @@ <h3>Selecting multiple rows (<code>&lt;uif-table uif-row-select-mode="multiple"&
         </uif-table-head>
     </uif-table>
   </p>
+
+  <h2>Fixed table rendering</h2>
+  <p>
+    This markup: <br />
+    <pre>
+&lt;uif-table uif-table-type=&quot;fixed&quot;&gt;
+    &lt;uif-table-head&gt;
+        &lt;uif-table-row&gt;
+            &lt;uif-table-row-select&gt;&lt;/uif-table-row-select&gt;
+            &lt;uif-table-header uif-order-by="fileName"&gt;File name&lt;/uif-table-header&gt;
+            &lt;uif-table-header&gt;Location&lt;/uif-table-header&gt;
+            &lt;uif-table-header uif-order-by="modified"&gt;Modified&lt;/uif-table-header&gt;
+            &lt;uif-table-header uif-order-by="type"&gt;Type&lt;/uif-table-header&gt;
+            &lt;uif-table-header uif-order-by="size"&gt;Size&lt;/uif-table-header&gt;
+        &lt;/uif-table-row&gt;
+    &lt;/uif-table-head&gt;
+    &lt;uif-table-body&gt;
+        &lt;uif-table-row ng-repeat="f in files | orderBy:table.orderBy:!table.orderAsc" uif-item="f" uif-selected="{{f.isSelected}<!---->}"&gt;
+            &lt;uif-table-row-select&gt;&lt;/uif-table-row-select&gt;
+            &lt;uif-table-cell&gt;{{f.fileName}}&lt;/uif-table-cell&gt;
+            &lt;uif-table-cell&gt;{{f.location}}&lt;/uif-table-cell&gt;
+            &lt;uif-table-cell&gt;{{f.modified | date}}&lt;/uif-table-cell&gt;
+            &lt;uif-table-cell&gt;{{f.type}}&lt;/uif-table-cell&gt;
+            &lt;uif-table-cell&gt;{{f.size}}&lt;/uif-table-cell&gt;
+        &lt;/uif-table-row&gt;
+    &lt;/uif-table-body&gt;
+&lt;/uif-table&gt;
+    </pre>
+  </p>
+  <p ng-controller="demoController">
+    Renders this (selecting multiple rows enabled, one row marked as selected):
+    <br />
+    <uif-table uif-table-type="fixed">
+        <uif-table-head>
+            <uif-table-row>
+                <uif-table-row-select></uif-table-row-select>
+                <uif-table-header uif-order-by="fileName">File name</uif-table-header>
+                <uif-table-header>Location</uif-table-header>
+                <uif-table-header uif-order-by="modified">Modified</uif-table-header>
+                <uif-table-header uif-order-by="type">Type</uif-table-header>
+                <uif-table-header uif-order-by="size">Size</uif-table-header>
+            </uif-table-row>
+        </uif-table-head>
+        <uif-table-body>
+            <uif-table-row ng-repeat="f in files | orderBy:table.orderBy:!table.orderAsc" uif-item="f" uif-selected="{{f.isSelected}}">
+                <uif-table-row-select></uif-table-row-select>
+                <uif-table-cell>{{f.fileName}}</uif-table-cell>
+                <uif-table-cell>{{f.location}}</uif-table-cell>
+                <uif-table-cell>{{f.modified | date}}</uif-table-cell>
+                <uif-table-cell>{{f.type}}</uif-table-cell>
+                <uif-table-cell>{{f.size}}</uif-table-cell>
+            </uif-table-row>
+        </uif-table-head>
+    </uif-table>
+  </p>
 </body>
 
 </html>

src/components/table/tableDirective.spec.ts

@@ -29,6 +29,31 @@ describe('tableDirective: <uif-table />', () => {
         expect(element).toHaveClass('ms-Table');
     }));
 
+    it('should set correct Office UI Fabric fixed class on the table for the \'uif-table-type\' attribute',
+       inject(($compile: Function, $rootScope: ng.IRootScopeService) => {
+        element = ng.element('<uif-table uif-table-type="fixed"></uif-table>');
+        $compile(element)(scope);
+        scope.$digest();
+        expect(element).toHaveClass('ms-Table--fixed');
+    }));
+
+    it('should set correct Office UI Fabric fluid class on the table for the \'uif-table-type\' attribute',
+       inject(($compile: Function, $rootScope: ng.IRootScopeService) => {
+        element = ng.element('<uif-table uif-table-type="fluid"></uif-table>');
+        $compile(element)(scope);
+        scope.$digest();
+        expect(element).not.toHaveClass('ms-Table--fixed');
+    }));
+
+    it('should throw an error on an invalid value for the \'uif-table-type\' attribute',
+       inject(($compile: Function, $rootScope: ng.IRootScopeService, $log: ng.ILogService) => {
+        element = ng.element('<uif-table uif-table-type="invalid"></uif-table>');
+        $compile(element)(scope);
+        scope.$digest();
+
+        expect($log.error.logs.length).toEqual(1);
+     }));
+
     it('should render the row using a tr tag', inject(($compile: Function, $rootScope: ng.IRootScopeService) => {
         element = ng.element('<uif-table><uif-table-row></uif-table-row></uif-table>');
         $compile(element)(scope);

src/components/table/tableDirective.ts

@@ -2,6 +2,7 @@
 
 import * as ng from 'angular';
 import {TableRowSelectModeEnum} from './tableRowSelectModeEnum';
+import {TableTypeEnum} from './tableTypeEnum';
 
 /**
  * @ngdoc interface
@@ -15,13 +16,15 @@ import {TableRowSelectModeEnum} from './tableRowSelectModeEnum';
  * @property {boolean} orderAsc - Specifies whether the data in the table should be sort ascending or descending.
  *                                Default `true` (sorting ascending)
  * @property {string} rowSelectMode - Specifies the row selection mode used by the table
- * @property {ITableRowScope[]} - Contains the data rows (all except the header row) that belong to the table 
+ * @property {ITableRowScope[]} - Contains the data rows (all except the header row) that belong to the table
  */
 export interface ITableScope extends ng.IScope {
     orderBy?: string;
     orderAsc: boolean;
     rowSelectMode?: string;
     rows: ITableRowScope[];
+    tableType: string;
+    tableTypeClass: string;
 }
 
 class TableController {
@@ -95,9 +98,14 @@ class TableController {
  *                                         Possible values: none - selecting rows is not possible;
  *                                                          single - only one row can be selected;
  *                                                          multiple - multiple rows can be selected;
+ * @property {string} uifTableType      - Specifies whether the table is rendered in fluid or fixed mode.
+ *                                        Possible values: fixed    - the table is rendered in fixed style.
+ *                                                                    Added with Fabric 2.4.
+ *                                                         fluid    - the table style is fluid (Default)
  */
 export interface ITableAttributes extends ng.IAttributes {
     uifRowSelectMode?: string;
+    uifTableType?: string;
 }
 
 /**
@@ -139,7 +147,7 @@ export class TableDirective implements ng.IDirective {
     public restrict: string = 'E';
     public transclude: boolean = true;
     public replace: boolean = true;  // required for correct HTML rendering
-    public template: string = '<table class="ms-Table" ng-transclude></table>';
+    public template: string = '<table ng-class="[\'ms-Table\', tableTypeClass]" ng-transclude></table>';
     public controller: any = TableController;
     public controllerAs: string = 'table';
 
@@ -163,6 +171,22 @@ export class TableDirective implements ng.IDirective {
         if (scope.rowSelectMode === undefined) {
             scope.rowSelectMode = TableRowSelectModeEnum[TableRowSelectModeEnum.none];
         }
+
+        if (attrs.uifTableType !== undefined && attrs.uifTableType !== null) {
+            if (TableTypeEnum[attrs.uifTableType] === undefined) {
+                controller.$log.error('Error [ngOfficeUiFabric] officeuifabric.components.table. ' +
+                '\'' + attrs.uifTableType + '\' is not a valid option for \'uif-table-type\'. ' +
+                'Valid options are fixed|fluid.');
+            } else {
+                scope.tableType = attrs.uifTableType;
+            }
+        }
+        if (scope.tableType === undefined) {
+            scope.tableType = TableTypeEnum[TableTypeEnum.fluid];
+        }
+        if (scope.tableType === TableTypeEnum[TableTypeEnum.fixed]) {
+            scope.tableTypeClass = 'ms-Table--fixed';
+        }
     }
 }
 

src/components/table/tableTypeEnum.ts

@@ -0,0 +1,18 @@
+'use strict';
+
+/**
+ * Enum for supported input types of the uif-table directive
+ * This enum is intended to be used as a string.
+ *
+ * @readonly
+ * @enum {string}
+ * @usage
+ *
+ * This is used to generate the string that you pass into the `uif-table-type` attribute of the following components:
+ *
+ * let style: string = TableTypeEnum[TableTypeEnum.text];
+ */
+export enum TableTypeEnum {
+  fluid,
+  fixed
+}