feat: table expand all rows feature

Author: eduardmarcinco

src/i18n/en.ts

@@ -89,6 +89,7 @@ export default {
 		"CHECKBOX_HEADER": "Select all rows",
 		"CHECKBOX_ROW": "Select {{value}}",
 		"EXPAND_BUTTON": "Expand row",
+		"EXPAND_ALL_BUTTON": "Expand all rows",
 		"SORT_DESCENDING": "Sort rows by this header in descending order",
 		"SORT_ASCENDING": "Sort rows by this header in ascending order",
 		"ROW": "row"

src/table/head/table-head-expand.component.ts

@@ -1,15 +1,42 @@
 import {
 	Component,
-	HostBinding
+	EventEmitter,
+	HostBinding,
+	Input,
+	Output
 } from "@angular/core";
+import { I18n } from "carbon-components-angular/i18n";
+import { Observable } from "rxjs";
 
 @Component({
 	// tslint:disable-next-line: component-selector
 	selector: "[cdsTableHeadExpand], [ibmTableHeadExpand]",
 	template: `
-		<ng-content></ng-content>
+		<button
+			class="cds--table-expand__button"
+			[attr.aria-label]="getAriaLabel() | async"
+			(click)="change.emit(!allRowsExpanded)"
+		>
+			<svg cdsIcon="chevron--right" size="16" class="cds--table-expand__svg"></svg>
+		</button>
 	`
 })
 export class TableHeadExpand {
 	@HostBinding("class.cds--table-expand") hostClass = true;
+
+	@Input() allRowsExpanded = false;
+
+	@Output() change = new EventEmitter<boolean>();
+
+	@HostBinding("attr.data-previous-value") get previousValue() {
+		return this.allRowsExpanded ? "collapsed" : null;
+	}
+
+	protected _ariaLabel = this.i18n.getOverridable("TABLE.EXPAND_ALL_BUTTON");
+
+	constructor(protected i18n: I18n) { }
+
+	getAriaLabel(): Observable<string> {
+		return this._ariaLabel.subject;
+	}
 }

src/table/head/table-head.component.ts

@@ -32,7 +32,9 @@ import { TableRowSize } from "../table.types";
 				*ngIf="model.hasExpandableRows()"
 				scope="col"
 				[ngClass]="{'cds--table-expand-v2': stickyHeader}"
-				[id]="model.getId('expand')">
+				[id]="model.getId('expand')"
+				[allRowsExpanded]="model.expandableRowsCount() === model.expandedRowsCount()"
+				(change)="onExpandAllRowsChange($event)">
 			</th>
 			<th
 				*ngIf="!skeleton && showSelectionColumn && enableSingleSelect"
@@ -160,6 +162,18 @@ export class TableHead implements AfterViewInit {
 	 * @param model
 	 */
 	@Output() deselectAll = new EventEmitter<TableModel>();
+	/**
+	 * Emits if all rows are expanded.
+	 *
+	 * @param model
+	 */
+	@Output() expandAllRows = new EventEmitter<TableModel>();
+	/**
+	 * Emits if all rows are collapsed.
+	 *
+	 * @param model
+	 */
+	@Output() collapseAllRows = new EventEmitter<TableModel>();
 
 	public scrollbarWidth = 0;
 
@@ -184,6 +198,14 @@ export class TableHead implements AfterViewInit {
 		}
 	}
 
+	onExpandAllRowsChange(expand: boolean) {
+		if (expand) {
+			this.expandAllRows.emit(this.model);
+		} else {
+			this.collapseAllRows.emit(this.model);
+		}
+	}
+
 	getCheckboxHeaderLabel(): Observable<string> {
 		return this._checkboxHeaderLabel.subject;
 	}

src/table/stories/app-expansion-table.component.ts

@@ -47,6 +47,12 @@ class CustomHeaderItem extends TableHeaderItem {
 			(rowClick)="onRowClick($event)"
 			[isDataGrid]="isDataGrid">
 		</cds-table>
+
+		<br>
+
+		<button cdsButton="primary" size="sm" (click)="model.expandAllRows(true)">Expand all rows</button>
+
+		<button cdsButton="secondary" size="sm" (click)="model.expandAllRows(false)">Collapse all rows</button>
 	`
 })
 export class ExpansionTableStory implements AfterViewInit {

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

@@ -760,4 +760,34 @@ describe("Table", () => {
 		expect(tableModel.header[1].data).toEqual("h2");
 		expect(tableModel.header[2].data).toEqual("h3");
 	});
+
+	it("should expand and collapse all rows", () => {
+		let tableModel  = new TableModel();
+
+		spyOn(tableModel.rowsExpandedAllChange, 'emit');
+		spyOn(tableModel.rowsCollapsedAllChange, 'emit');
+
+		tableModel.header = [
+			new TableHeaderItem({data: "h1"}), new TableHeaderItem({data: "h2"})
+		];
+		tableModel.data = [
+			[new TableItem({data: "A", expandedData: "EX1"}), new TableItem({data: "B"})],
+			[new TableItem({data: "C"}), new TableItem({data: "D"})],
+			[new TableItem({data: "E", expandedData: "EX2"}), new TableItem({data: "F"})],
+			[new TableItem({data: "G"}), new TableItem({data: "H"})],
+		];
+		
+		expect(tableModel.expandableRowsCount()).toBe(2);
+		expect(tableModel.expandedRowsCount()).toBe(0);
+
+		tableModel.expandAllRows(true);
+		expect(tableModel.rowsExpandedAllChange.emit).toHaveBeenCalledWith();
+		expect(tableModel.expandedRowsCount()).toBe(2);
+		expect(tableModel.rowsExpanded).toEqual([true, false, true, false])
+
+		tableModel.expandAllRows(false);
+		expect(tableModel.rowsCollapsedAllChange.emit).toHaveBeenCalledWith();
+		expect(tableModel.expandedRowsCount()).toBe(0);
+		expect(tableModel.rowsExpanded).toEqual([false, false, false, false])
+	});
 });

src/table/table-model.class.ts

@@ -69,6 +69,8 @@ export class TableModel implements PaginationModel {
 	dataChange = new EventEmitter();
 	rowsSelectedChange = new EventEmitter<number>();
 	rowsExpandedChange = new EventEmitter<number>();
+	rowsExpandedAllChange = new EventEmitter();
+	rowsCollapsedAllChange = new EventEmitter();
 	/**
 	 * Gets emitted when `selectAll` is called. Emits false if all rows are deselected and true if
 	 * all rows are selected.
@@ -413,6 +415,18 @@ export class TableModel implements PaginationModel {
 		return this.data.some(data => data.some(d => d && d.expandedData)); // checking for some in 2D array
 	}
 
+	/**
+	 * Number of rows that can be expanded.
+	 * 
+	 * @returns number
+	 */
+	expandableRowsCount() {
+		return this.data.reduce((counter, _, index) => {
+			counter = (this.isRowExpandable(index)) ? counter + 1 : counter;
+			return counter;
+		}, 0);
+	}
+
 	isRowExpandable(index: number) {
 		return this.data[index].some(d => d && d.expandedData);
 	}
@@ -705,6 +719,27 @@ export class TableModel implements PaginationModel {
 		this.rowsExpandedChange.emit(index);
 	}
 
+	/**
+	 * Expands / collapses all rows
+	 * 
+	 * @param value expanded state of the rows. `true` is expanded and `false` is collapsed
+	 */
+	expandAllRows(value = true) {
+		if (this.data.length > 0) {
+			for (let i = 0; i < this.data.length; i++) {
+				if (this.isRowExpandable(i)) {
+					this.rowsExpanded[i] = value;
+				}
+			}
+
+			if (value) {
+				this.rowsExpandedAllChange.emit();
+			} else {
+				this.rowsCollapsedAllChange.emit();
+			}
+		}
+	}
+
 	/**
 	 * Gets the true index of a row based on it's relative position.
 	 * Like in Python, positive numbers start from the top and

src/table/table.component.ts

@@ -187,6 +187,8 @@ import { TableRowSize } from "./table.types";
 			[sortable]="sortable"
 			(deselectAll)="onDeselectAll()"
 			(selectAll)="onSelectAll()"
+			(expandAllRows)="model.expandAllRows(true)"
+			(collapseAllRows)="model.expandAllRows(false)"
 			(sort)="doSort($event)"
 			[checkboxHeaderLabel]="getCheckboxHeaderLabel()"
 			[filterTitle]="getFilterTitle()"