Merge pull request #174 from zvonimirfras/master

Improve table component

Author: zvonimirfras

src/checkbox/checkbox.component.ts

@@ -67,7 +67,7 @@ export class CheckboxChange {
 			[indeterminate]="indeterminate"
 			[attr.aria-label]="ariaLabel"
 			[attr.aria-labelledby]="ariaLabelledby"
-			[attr.aria-checked]="indeterminate ? 'mixed' : checked"
+			[attr.aria-checked]="(indeterminate ? 'mixed' : checked)"
 			(change)="onChange($event)"
 			(click)="onClick($event)">
 		<label [for]="id" class="bx--checkbox-label">

src/dialog/overflow-menu/overflow-menu.component.ts

@@ -5,11 +5,10 @@ import { Component, ElementRef } from "@angular/core";
  *
  * html:
  * ```
- * <ibm-overflow-menu [options]="overflowContent"></ibm-overflow-menu>
- * <ng-template #overflowContent>
+ * <ibm-overflow-menu>
  *	<ibm-overflow-menu-option>Option 1</ibm-overflow-menu-option>
  *	<ibm-overflow-menu-option>Option 2</ibm-overflow-menu-option>
- * </ng-template>
+ * </ibm-overflow-menu>
  * ```
  */
 @Component({

src/table/table-model.class.spec.ts

@@ -8,6 +8,24 @@ describe("Table", () => {
 		expect(tableModel.totalDataLength).toEqual(0);
 	});
 
+	it("model should handle different variants of empty data", () => {
+		let tableModel  = new TableModel();
+		tableModel.data = undefined;
+
+		expect(tableModel.data).toEqual([[]]);
+		expect(tableModel.totalDataLength).toEqual(0);
+
+		tableModel.data = null;
+
+		expect(tableModel.data).toEqual([[]]);
+		expect(tableModel.totalDataLength).toEqual(0);
+
+		tableModel.data = [];
+
+		expect(tableModel.data).toEqual([[]]);
+		expect(tableModel.totalDataLength).toEqual(0);
+	});
+
 	it("should set rowsSelected when setting data", () => {
 		let tableModel  = new TableModel();
 		tableModel.data = [

src/table/table-model.class.ts

@@ -15,6 +15,10 @@ export class TableModel implements PaginationModel {
 	 * @memberof TableModel
 	 */
 	set data(newData: Array<Array<TableItem>>) {
+		if (!newData || (Array.isArray(newData) && newData.length === 0) ) {
+			newData = [[]];
+		}
+
 		this._data = newData;
 
 		// init rowsSelected

src/table/table.component.ts

@@ -13,26 +13,26 @@ import { getScrollbarWidth } from "../common/utils";
 /**
  * Build your table with this component by extending things that differ from default.
  *
- * demo: [https://pages.github.ibm.com/peretz/neutrino/#/table](https://pages.github.ibm.com/peretz/neutrino/#/table)
+ * demo: [https://angular.carbondesignsystem.com/?selectedKind=Table](https://angular.carbondesignsystem.com/?selectedKind=Table)
  *
  * Instead of the usual write-your-own-html approach you had with `<table>`,
- * neutrino table uses model-view-controller approach.
+ * carbon table uses model-view-controller approach.
  *
  * Here, you create a view (with built-in controller) and provide it a model.
  * Changes you make to the model are reflected in the view. Provide same model you use
- * in the table to the `<ibm-table-pagination>` and `<ibm-table-goto-page>` components.
+ * in the table to the `<ibm-pagination>` components.
  * They provide a different view over the same data.
  *
  * ## Basic usage
  *
  * ```html
- * <ibm-table [model]="simpleModel"></ibm-table>
+ * <ibm-table [model]="model"></ibm-table>
  * ```
  *
  * ```typescript
- * public simpleModel = new TableModel();
+ * public model = new TableModel();
  *
- * this.simpleModel.data = [
+ * this.model.data = [
  * 	[new TableItem({data: "asdf"}), new TableItem({data: "qwer"})],
  * 	[new TableItem({data: "csdf"}), new TableItem({data: "zwer"})],
  * 	[new TableItem({data: "bsdf"}), new TableItem({data: "swer"})],
@@ -102,14 +102,10 @@ import { getScrollbarWidth } from "../common/utils";
  *
  * See `TableHeaderItem` class for more information.
  *
- * ## Build your own table footer with neutrino components
+ * ## Use pagination as table footer
  *
  * ```html
- * <p class="table-footer">
- * 	<span class="table-selection-info">{{model.selectedRowsCount()}} of {{model.totalDataLength}} rows selected</span>
- * 	<ibm-table-pagination [model]="model" (selectPage)="selectPage($event)"></ibm-table-pagination>
- * 	<ibm-table-goto-page (selectPage)="selectPage($event)"></ibm-table-goto-page>
- * </p>
+ * <ibm-pagination [model]="model" (selectPage)="selectPage($event)"></ibm-pagination>
  * ```
  *
  * `selectPage()` function should fetch the data from backend, create new `data`, apply it to `model.data`,
@@ -119,28 +115,30 @@ import { getScrollbarWidth } from "../common/utils";
  *
  * ```typescript
  * selectPage(page) {
- * 	this.service.getPage(page).then((data: Array<Array<any>>) => {
- * 		let newData = [];
- *
- * 		// create new data from the service data
- * 		data.forEach(dataRow => {
- * 			let row = [];
- * 			dataRow.forEach(dataElement => {
- * 				row.push(new TableItem({
- * 					data: dataElement,
- * 					template: typeof dataElement === "string" ? undefined : this.customTableItemTemplate
- * 					// your template can handle all the data types so you don't have to conditionally set it
- * 					// you can also set different templates for different columns based on index
- * 				}));
- * 			});
- * 			newData.push(row);
- * 		});
- *
+ * 	this.getPage(page).then((data: Array<Array<any>>) => {
  * 		// set the data and update page
- * 		this.model.data = newData;
+ * 		this.model.data = this.prepareData(data);
  * 		this.model.currentPage = page;
  * 	});
  * }
+ *
+ * private prepareData(data: Array<Array<any>>) {
+ * 	// create new data from the service data
+ * 	let newData = [];
+ * 	data.forEach(dataRow => {
+ * 		let row = [];
+ * 		dataRow.forEach(dataElement => {
+ * 			row.push(new TableItem({
+ * 				data: dataElement,
+ * 				template: typeof dataElement === "string" ? undefined : this.paginationTableItemTemplate
+ * 				// your template can handle all the data types so you don't have to conditionally set it
+ * 				// you can also set different templates for different columns based on index
+ * 			}));
+ * 		});
+ * 		newData.push(row);
+ * 	});
+ * 	return newData;
+ * }
  * ```
  *
  * @export
@@ -162,9 +160,10 @@ import { getScrollbarWidth } from "../common/utils";
 				<th *ngIf="model.hasExpandableRows()"></th>
 				<th *ngIf="showSelectionColumn">
 					<ibm-checkbox
-						[size]="size !== 'lg' ? 'sm' : 'md'"
+						[size]="size !== ('lg' ? 'sm' : 'md')"
 						[(ngModel)]="selectAllCheckbox"
 						[indeterminate]="selectAllCheckboxSomeSelected"
+						aria-label="Select all rows"
 						(change)="onSelectAllCheckboxChange()">
 					</ibm-checkbox>
 				</th>
@@ -301,6 +300,7 @@ import { getScrollbarWidth } from "../common/utils";
 					</td>
 					<td *ngIf="showSelectionColumn">
 						<ibm-checkbox
+							aria-label="Select row"
 							[size]="size !== ('lg' ? 'sm' : 'md')"
 							[(ngModel)]="model.rowsSelected[i]"
 							(change)="onRowCheckboxChange(i)">
@@ -383,7 +383,7 @@ export class Table {
 	/**
 	 * Controls whether to show the selection checkboxes column or not.
 	 *
-	 * @deprecated in the next major neutrino version in favour of
+	 * @deprecated in the next major carbon-components-angular version in favour of
 	 * `showSelectionColumn` because of new attribute `enableSingleSelect`
 	 *  please use `showSelectionColumn` instead
 	 */