feat(table): Add skeleton state

Author: youda97

src/table/table.component.ts

@@ -8,6 +8,8 @@ import {
 import { Subscription, fromEvent } from "rxjs";
 
 import { TableModel } from "./table.module";
+import { TableHeaderItem } from "./table-header-item.class";
+import { TableItem } from "./table-item.class";
 import { getScrollbarWidth } from "../common/utils";
 import { I18n } from "./../i18n/i18n.module";
 
@@ -165,12 +167,13 @@ import { I18n } from "./../i18n/i18n.module";
 	[ngClass]="{
 		'bx--data-table-v2--compact': size === 'sm',
 		'bx--data-table-v2--tall': size === 'lg',
-		'bx--data-table-v2--zebra': striped
+		'bx--data-table-v2--zebra': striped,
+		'bx--skeleton': skeleton
 	}">
 		<thead>
 			<tr>
 				<th *ngIf="model.hasExpandableRows()"></th>
-				<th *ngIf="showSelectionColumn" style="width: 10px;">
+				<th *ngIf="!skeleton && showSelectionColumn" style="width: 10px;">
 					<ibm-checkbox
 						[size]="size !== ('lg' ? 'sm' : 'md')"
 						[(ngModel)]="selectAllCheckbox"
@@ -215,7 +218,7 @@ import { I18n } from "./../i18n/i18n.module";
 						</button>
 						<span
 							class="bx--table-header-label"
-							*ngIf="this.sort.observers.length === 0 || (this.sort.observers.length > 0 && !column.sortable)">
+							*ngIf="!skeleton && 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}">
@@ -271,7 +274,7 @@ import { I18n } from "./../i18n/i18n.module";
 						</div>
 					</th>
 				</ng-container>
-				<th [ngStyle]="{'width': scrollbarWidth + 'px', 'padding': 0, 'border': 0}">
+				<th *ngIf="!skeleton" [ngStyle]="{'width': scrollbarWidth + 'px', 'padding': 0, 'border': 0}">
 					<!--
 						Scrollbar pushes body to the left so this header column is added to push
 						the title bar the same amount and keep the header and body columns aligned.
@@ -311,19 +314,20 @@ import { I18n } from "./../i18n/i18n.module";
 							</svg>
 						</button>
 					</td>
-					<td *ngIf="showSelectionColumn">
+					<td *ngIf="!skeleton && showSelectionColumn">
 						<ibm-checkbox
 							aria-label="Select row"
 							[size]="size !== ('lg' ? 'sm' : 'md')"
 							[(ngModel)]="model.rowsSelected[i]"
 							(change)="onRowCheckboxChange(i)">
 						</ibm-checkbox>
 					</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 *ngFor="let item of row; let j = index">
+						<td *ngIf="model.header[j].visible"
+							[class]="model.header[j].className"
+							[ngStyle]="model.header[j].style">
 							<ng-container *ngIf="!item.template">{{item.data}}</ng-container>
+							<span *ngIf="skeleton && i === 0"></span>
 							<ng-template
 								[ngTemplateOutlet]="item.template" [ngTemplateOutletContext]="{data: item.data}">
 							</ng-template>
@@ -364,13 +368,42 @@ import { I18n } from "./../i18n/i18n.module";
 	`
 })
 export class Table {
+	/**
+	 * Creates a skeleton model with a row and column count specified by the user
+	 *
+	 * @param {number} rowCount
+	 * @param {number} columnCount
+	 */
+	static skeletonModelHeader(rowCount: number, columnCount: number) {
+		const model = new TableModel();
+		let header = new Array<TableHeaderItem>();
+		let data = new Array<Array<TableItem>>();
+		let row = new Array<TableItem>();
+
+		for (let i = 0; i < columnCount; i++) {
+			header.push(new TableHeaderItem());
+			row.push(new TableItem());
+		}
+		for (let j = 0; j < rowCount - 1 ; j++) {
+			data.push(row);
+		}
+
+		model.header = header;
+		model.data = data;
+		return model;
+	}
+
 	/**
 	 * Size of the table rows.
 	 *
 	 * @type {("sm" | "md" | "lg")}
 	 * @memberof Table
 	 */
 	@Input() size: "sm" | "md" | "lg" = "md";
+	/**
+	 * Set to `true` for a loading table.
+	 */
+	@Input() skeleton = false;
 	/**
 	 * Object of all the strings table needs.
 	 * Defaults to the `TABLE` value from the i18n service.

src/table/table.stories.ts

@@ -17,6 +17,7 @@ import {
 } from "@storybook/addon-knobs/angular";
 
 import {
+	Table,
 	TableModule,
 	TableModel,
 	TableItem,
@@ -414,6 +415,29 @@ function sort(model, index: number) {
 	model.sort(index);
 }
 
+@Component({
+	selector: "app-skeleton-table",
+	template: `
+		<ibm-table
+			[model]="skeletonModel"
+			[skeleton]="skeleton"
+			[size]="size"
+			[striped]="striped">
+			<ng-content></ng-content>
+		</ibm-table>
+	`
+})
+class SkeletonTableStory implements OnInit, OnChanges {
+	@Input() size = "md";
+	@Input() striped = false;
+	@Input() skeleton = true;
+	@Input() skeletonModel = new TableModel();
+
+	ngOnInit() {
+		// Creates an empty table with 5 rows and 5 columns
+		this.skeletonModel = Table.skeletonModelHeader(5, 5);
+	}
+}
 
 storiesOf("Table", module).addDecorator(
 		moduleMetadata({
@@ -428,7 +452,8 @@ storiesOf("Table", module).addDecorator(
 				DynamicTableStory,
 				ExpansionTableStory,
 				OverflowTableStory,
-				PaginationTableStory
+				PaginationTableStory,
+				SkeletonTableStory
 			]
 		})
 	)
@@ -525,5 +550,20 @@ storiesOf("Table", module).addDecorator(
 			model: simpleModel,
 			totalDataLength: number("totalDataLength", 105)
 		}
+	}))
+	.add("Skeleton", () => ({
+		template: `
+		<div style="width: 800px">
+			<app-skeleton-table
+				[skeletonModel]="skeletonModel"
+				[size]="size"
+				[striped]="striped">
+			</app-skeleton-table>
+		</div>
+	`,
+		props: {
+			size: selectV2("size", {Small: "sm", Normal: "md", Large: "lg"}, "md"),
+			striped: boolean("striped", false)
+		}
 	}));