diff --git a/package.json b/package.json index 454e29c..8cc6d5e 100644 --- a/package.json +++ b/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", diff --git a/src/components/table/demo/index.html b/src/components/table/demo/index.html index c3f335c..197e26b 100644 --- a/src/components/table/demo/index.html +++ b/src/components/table/demo/index.html @@ -327,6 +327,61 @@

Selecting multiple rows (<uif-table uif-row-select-mode="multiple"&

+ +

Fixed table rendering

+

+ This markup:
+

+<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-body>
+</uif-table>
+    
+

+

+ Renders this (selecting multiple rows enabled, one row marked as selected): +
+ + + + + File name + Location + Modified + Type + Size + + + + + + {{f.fileName}} + {{f.location}} + {{f.modified | date}} + {{f.type}} + {{f.size}} + + + +

\ No newline at end of file diff --git a/src/components/table/tableDirective.spec.ts b/src/components/table/tableDirective.spec.ts index 8304c6e..bc4cffa 100644 --- a/src/components/table/tableDirective.spec.ts +++ b/src/components/table/tableDirective.spec.ts @@ -29,6 +29,31 @@ describe('tableDirective: ', () => { 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(''); + $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(''); + $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(''); + $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(''); $compile(element)(scope); diff --git a/src/components/table/tableDirective.ts b/src/components/table/tableDirective.ts index c2a5958..2f05bb0 100644 --- a/src/components/table/tableDirective.ts +++ b/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 = '
'; + public template: string = '
'; 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'; + } } } diff --git a/src/components/table/tableTypeEnum.ts b/src/components/table/tableTypeEnum.ts new file mode 100644 index 0000000..59dd5a8 --- /dev/null +++ b/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 +}