Merge pull request #134 from stanislavgeorgiev/Table

Table Header: More sorting options #122

Author: zvonimirfras

src/table/table-header-item.class.ts

@@ -19,6 +19,14 @@ export class TableHeaderItem {
 	 */
 	sorted = false;
 
+	/**
+	 * Enables sorting on click by default.
+	 * If false then this column won't show a sorting arrow at all.
+	 *
+	 * @memberof TableHeaderItem
+	 */
+	sortable = true;
+
 	/**
 	 * Number of applied filters.
 	 *
@@ -28,6 +36,13 @@ export class TableHeaderItem {
 	 */
 	filterCount = 0;
 
+	/**
+	 * Attach a class to the column, both the header and column cells.
+	 *
+	 * @memberof TableHeaderItem
+	 */
+	className: string;
+
 	/**
 	 * Style for the column, applied to every element in the column.
 	 *
@@ -69,6 +84,15 @@ export class TableHeaderItem {
 	 */
 	data: any;
 
+	/**
+	 * Data for the header item for general usage in the controller.
+	 * For example, which `field` is this column related to.
+	 *
+	 * @type {*}
+	 * @memberof TableHeaderItem
+	 */
+	metadata: any;
+
 	/**
 	 * Used to display data in a desired way.
 	 *
@@ -204,14 +228,11 @@ export class TableHeaderItem {
 		};
 		// fill our object with provided props, and fallback to defaults
 		const data = Object.assign({}, defaults, rawData);
-		this.data = data.data;
-		this.visible = data.visible;
-		this.filterCount = data.filterCount;
-		this.template = data.template;
-		this.filterTemplate = data.filterTemplate;
-		this.filterFooter = data.filterFooter;
-		this.filterData = data.filterData;
-		this.style = data.style;
+		for (let property of Object.getOwnPropertyNames(data)) {
+			if (data.hasOwnProperty(property)) {
+				this[property] = data[property];
+			}
+		}
 	}
 
 	/**

src/table/table.component.ts

@@ -171,6 +171,7 @@ import { getScrollbarWidth } from "../common/utils";
 				<ng-container *ngFor="let column of model.header; let i = index">
 					<th [ngClass]='{"thead_action": column.filterTemplate || this.sort.observers.length > 0}'
 					*ngIf="column.visible"
+					[class]="column.className"
 					[ngStyle]="column.style"
 					[draggable]="columnsDraggable"
 					(dragstart)="columnDragStart($event, i)"
@@ -182,6 +183,7 @@ import { getScrollbarWidth } from "../common/utils";
 						</div>
 						<button
 							class="bx--table-sort-v2"
+							*ngIf="this.sort.observers.length > 0 && column.sortable"
 							[ngClass]="{
 								'bx--table-sort-v2--active': column.sorted,
 								'bx--table-sort-v2--ascending': column.ascending
@@ -200,6 +202,14 @@ import { getScrollbarWidth } from "../common/utils";
 								<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
 							</svg>
 						</button>
+						<span
+							class="bx--table-header-label"
+							*ngIf="this.sort.observers.length === 0 || (this.sort.observers.length > 0 && !column.sortable)">
+							<span *ngIf="!column.template" [title]="column.data">{{column.data}}</span>
+							<ng-template
+								[ngTemplateOutlet]="column.template" [ngTemplateOutletContext]="{data: column.data}">
+							</ng-template>
+						</span>
 						<button
 							[ngClass]="{'active': column.filterCount > 0}"
 							*ngIf="column.filterTemplate"
@@ -298,6 +308,7 @@ import { getScrollbarWidth } from "../common/utils";
 					</td>
 					<ng-container *ngFor="let item of row; let i = index">
 						<td *ngIf="model.header[i].visible"
+							[class]="model.header[i].className"
 							[ngStyle]="model.header[i].style">
 							<ng-container *ngIf="!item.template">{{item.data}}</ng-container>
 							<ng-template

src/table/table.stories.ts

@@ -4,7 +4,9 @@ import {
 	Component,
 	ViewChild,
 	OnInit,
-	Input
+	Input,
+	OnChanges,
+	SimpleChanges
 } from "@angular/core";
 import { storiesOf, moduleMetadata } from "@storybook/angular";
 import {
@@ -29,6 +31,51 @@ import { clone } from "../utils/utils";
 
 const en = require("./../../src/i18n/en.json");
 
+@Component({
+	selector: "app-table",
+	template: `
+		<ibm-table
+			[model]="model"
+			[size]="size"
+			[showSelectionColumn]="showSelectionColumn"
+			[striped]="striped"
+			(sort)="simpleSort($event)">
+		</ibm-table>
+	`
+})
+class TableStory implements OnInit, OnChanges {
+	@Input() model = new TableModel();
+	@Input() size = "md";
+	@Input() showSelectionColumn = true;
+	@Input() striped = true;
+	@Input() sortable = true;
+
+	ngOnInit() {
+		this.model.header = [
+			new TableHeaderItem({
+				data: "Name"
+			}),
+			new TableHeaderItem({
+				data: "hwer",
+				style: {"width": "auto"},
+				className: "my-class"
+			})
+		];
+	}
+
+	ngOnChanges(changes: SimpleChanges): void {
+		if (changes.sortable) {
+			for (let column of this.model.header) {
+				column.sortable = changes.sortable.currentValue;
+			}
+		}
+	}
+
+	simpleSort(index: number) {
+		sort(simpleModel, index);
+	}
+}
+
 @Component({
 	selector: "app-custom-table",
 	template: `
@@ -390,10 +437,6 @@ function sort(model, index: number) {
 	model.sort(index);
 }
 
-function simpleSort(index: number) {
-	sort(simpleModel, index);
-}
-
 
 storiesOf("Table", module).addDecorator(
 		moduleMetadata({
@@ -405,6 +448,7 @@ storiesOf("Table", module).addDecorator(
 				TranslateModule.forRoot()
 			],
 			declarations: [
+				TableStory,
 				DynamicTableStory,
 				ExpansionTableStory,
 				OverflowTableStory,
@@ -415,20 +459,20 @@ storiesOf("Table", module).addDecorator(
 	.addDecorator(withKnobs)
 	.add("default", () => ({
 		template: `
-		<ibm-table
+		<app-table
 			[model]="model"
 			[size]="size"
 			[showSelectionColumn]="showSelectionColumn"
 			[striped]="striped"
-			(sort)="simpleSort($event)">
-		</ibm-table>
+			[sortable]="sortable">
+		</app-table>
 	`,
 		props: {
 			model: simpleModel,
-			simpleSort: simpleSort,
 			size: selectV2("size", {Small: "sm", Normal: "md", Large: "lg"}, "md", "table-size-selection"),
 			showSelectionColumn: boolean("showSelectionColumn", true),
-			striped: boolean("striped", true)
+			striped: boolean("striped", true),
+			sortable: boolean("sortable", true)
 		}
 	}))
 	.add("with expansion", () => ({