Merge pull request #178 from zvonimirfras/master

feat(table): add support for custom "no data" template
carbon-design-system · Oct 18, 2018 · 6e31536 · 6e31536
2 parents 7db7b20 + e660ba8
commit 6e31536
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 0 deletions.
diff --git a/src/table/table.component.ts b/src/table/table.component.ts
@@ -102,6 +102,17 @@ import { getScrollbarWidth } from "../common/utils";
  *
  * See `TableHeaderItem` class for more information.
  *
+ * ## No data template
+ *
+ * When table has no data to show, it can show a message you provide it instead.
+ *
+ * ```html
+ * <ibm-table [model]="model">No data.</ibm-table>
+ * ```
+ *
+ * ... will show `No data.` message, but you can get creative and provide any template you want
+ * to replace table's default `tbody`.
+ *
  * ## Use pagination as table footer
  *
  * ```html
@@ -269,6 +280,7 @@ import { getScrollbarWidth } from "../common/utils";
 			</tr>
 		</thead>
 		<tbody
+		*ngIf="!noData; else noDataTemplate"
 		[ngStyle]="{'overflow-y': 'scroll'}"
 		(scroll)="onScroll($event)">
 			<ng-container *ngFor="let row of model.data; let i = index">
@@ -331,6 +343,7 @@ import { getScrollbarWidth } from "../common/utils";
 				</tr>
 			</ng-container>
 		</tbody>
+		<ng-template #noDataTemplate><ng-content></ng-content></ng-template>
 		<tfoot>
 			<tr *ngIf="this.model.isLoading">
 				<td class="table_loading-indicator">
@@ -511,6 +524,12 @@ export class Table {
 	 */
 	@Output() scrollLoad = new EventEmitter<TableModel>();
 
+	get noData() {
+		return !this.model.data ||
+			this.model.data.length === 0 ||
+			this.model.data.length === 1 && this.model.data[0].length === 0;
+	}
+
 	private _model: TableModel;
 
 	private columnResizeWidth: number;

diff --git a/src/table/table.stories.ts b/src/table/table.stories.ts
@@ -40,6 +40,7 @@ const en = require("./../../src/i18n/en.json");
 			[showSelectionColumn]="showSelectionColumn"
 			[striped]="striped"
 			(sort)="simpleSort($event)">
+			<ng-content></ng-content>
 		</ibm-table>
 	`
 })
@@ -429,6 +430,11 @@ simpleModel.header = [
 	new TableHeaderItem({data: "Name"}), new TableHeaderItem({data: "hwer", style: {"width": "auto"} })
 ];
 
+const emptyModel = new TableModel();
+emptyModel.header = [
+	new TableHeaderItem({data: "Name"}), new TableHeaderItem({data: "hwer", style: {"width": "auto"} })
+];
+
 function sort(model, index: number) {
 	if (model.header[index].sorted) {
 		// if already sorted flip sorting direction
@@ -475,6 +481,30 @@ storiesOf("Table", module).addDecorator(
 			sortable: boolean("sortable", true)
 		}
 	}))
+	.add("with no data", () => ({
+		template: `
+			<app-table
+				[model]="model"
+				[size]="size"
+				[showSelectionColumn]="showSelectionColumn"
+				[striped]="striped">
+				<tbody><tr><td class="no-data" colspan="3"><div>No data.</div></td></tr></tbody>
+			</app-table>
+		`,
+		styles: [`
+			.no-data {
+				width: 100%;
+				height: 150px;
+				text-align: center;
+			}
+		`],
+		props: {
+			model: emptyModel,
+			size: selectV2("size", {Small: "sm", Normal: "md", Large: "lg"}, "md", "table-size-selection"),
+			showSelectionColumn: boolean("showSelectionColumn", true),
+			striped: boolean("striped", true)
+		}
+	}))
 	.add("with expansion", () => ({
 		template: `
 			<app-expansion-table