fix: hide expand all row toggle by default

Signed-off-by: Akshat Patel <[email protected]>

Author: Akshat55

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

@@ -13,16 +13,22 @@ import { Observable } from "rxjs";
 	selector: "[cdsTableHeadExpand], [ibmTableHeadExpand]",
 	template: `
 		<button
+			*ngIf="showExpandAllToggle"
 			class="cds--table-expand__button"
 			[attr.aria-label]="getAriaLabel() | async"
 			(click)="expandedChange.emit(!expanded)">
 			<svg cdsIcon="chevron--right" size="16" class="cds--table-expand__svg"></svg>
 		</button>
+		<ng-container *ngIf="!showExpandAllToggle">
+			<ng-content></ng-content>
+		</ng-container>
 	`
 })
 export class TableHeadExpand {
 	@HostBinding("class.cds--table-expand") hostClass = true;
 
+	@Input() showExpandAllToggle = false;
+
 	@Input() expanded = false;
 
 	@Output() expandedChange = new EventEmitter<boolean>();

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

@@ -31,6 +31,7 @@ import { TableRowSize } from "../table.types";
 				cdsTableHeadExpand
 				*ngIf="model.hasExpandableRows()"
 				scope="col"
+				[showExpandAllToggle]="showExpandAllToggle"
 				[ngClass]="{'cds--table-expand-v2': stickyHeader}"
 				[id]="model.getId('expand')"
 				[expanded]="model.expandableRowsCount() === model.expandedRowsCount()"
@@ -104,6 +105,8 @@ export class TableHead implements AfterViewInit {
 
 	@Input() stickyHeader = false;
 
+	@Input() showExpandAllToggle = false;
+
 	/**
 	 * Setting sortable to false will disable all headers including headers which are sortable. Is is
 	 * possible to set the sortable state on the header item to disable/enable sorting for only some headers.

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

@@ -45,7 +45,8 @@ class CustomHeaderItem extends TableHeaderItem {
 			[striped]="striped"
 			(sort)="customSort($event)"
 			(rowClick)="onRowClick($event)"
-			[isDataGrid]="isDataGrid">
+			[isDataGrid]="isDataGrid"
+			[showExpandAllToggle]="showExpandAllToggle">
 		</cds-table>
 
 		<br>
@@ -64,6 +65,7 @@ export class ExpansionTableStory implements AfterViewInit {
 	@Input() sortable = true;
 	@Input() stickyHeader = false;
 	@Input() skeleton = false;
+	@Input() showExpandAllToggle = false;
 
 	@ViewChild("customHeaderTemplate")
 	protected customHeaderTemplate: TemplateRef<any>;

src/table/table.component.ts

@@ -197,6 +197,7 @@ import { TableRowSize } from "./table.types";
 			[selectAllCheckboxSomeSelected]="selectAllCheckboxSomeSelected"
 			[showSelectionColumn]="showSelectionColumn"
 			[enableSingleSelect]="enableSingleSelect"
+			[showExpandAllToggle]="showExpandAllToggle"
 			[skeleton]="skeleton"
 			[sortAscendingLabel]="sortAscendingLabel"
 			[sortDescendingLabel]="sortDescendingLabel"
@@ -386,6 +387,11 @@ export class Table implements OnInit, AfterViewInit, OnDestroy {
 
 	@Input() noBorder = true;
 
+	/**
+	 * Set to `true` to show expansion toggle when table consists of row expansions
+	 */
+	@Input() showExpandAllToggle = false;
+
 	get isDataGrid(): boolean {
 		return this._isDataGrid;
 	}

src/table/table.stories.ts

@@ -482,7 +482,8 @@ const ExpansionTemplate = (args) => ({
 				[stickyHeader]="stickyHeader"
 				[skeleton]="skeleton"
 				[striped]="striped"
-				[isDataGrid]="isDataGrid">
+				[isDataGrid]="isDataGrid"
+				[showExpandAllToggle]="showExpandAllToggle">
 			</app-expansion-table>
 		</cds-table-container>
 	`
@@ -491,7 +492,8 @@ export const WithExpansion = ExpansionTemplate.bind({});
 WithExpansion.args = {
 	...getProps({
 		description: "With expansion"
-	}, "args")
+	}, "args"),
+	showExpandAllToggle: false
 };
 
 const DyanmicContentTemplate = (args) => ({