Skip to content
This repository has been archived by the owner on Jun 14, 2018. It is now read-only.

Commit

Permalink
feat(table): add support for fixed table
Browse files Browse the repository at this point in the history 
Added support for new table type fixed, added to Office UI Fabric 2.4.x.

Closes #308.
  • Loading branch information
@andikrueger @andrewconnell
andikrueger authored and andrewconnell committed Apr 25, 2016
1 parent c914b96 commit c643a25
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 3 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
55 changes: 55 additions & 0 deletions src/components/table/demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
25 changes: 25 additions & 0 deletions src/components/table/tableDirective.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
28 changes: 26 additions & 2 deletions src/components/table/tableDirective.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

import * as ng from 'angular';
import {TableRowSelectModeEnum} from './tableRowSelectModeEnum';
import {TableTypeEnum} from './tableTypeEnum';

/**
* @ngdoc interface
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
}

/**
Expand Down Expand Up @@ -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';

Expand All @@ -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';
}
}
}

Expand Down
18 changes: 18 additions & 0 deletions src/components/table/tableTypeEnum.ts
View file
Original file line number Diff line number Diff line change
@@ -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
}

0 comments on commit c643a25

Please sign in to comment.