fix(stark-ui): table - Add support to show row index

ISSUES CLOSED: #1283
SuperITMan · May 21, 2019 · 37af1c7 · 37af1c7
1 parent f3e0c40
commit 37af1c7
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 7 deletions.
diff --git a/packages/stark-ui/src/modules/table/components/table.component.html b/packages/stark-ui/src/modules/table/components/table.component.html
@@ -99,6 +99,11 @@
 			</td>
 		</ng-container>
 
+		<ng-container matColumnDef="rowIndex">
+			<th mat-header-cell *matHeaderCellDef></th>
+			<td mat-cell *matCellDef="let row">{{ getRowIndex(row) }}</td>
+		</ng-container>
+
 		<stark-table-column
 			*ngFor="let col of columnProperties; trackBy: trackColumnFn"
 			[name]="col.name"

diff --git a/packages/stark-ui/src/modules/table/components/table.component.spec.ts b/packages/stark-ui/src/modules/table/components/table.component.spec.ts
@@ -22,6 +22,7 @@ import { StarkTableComponent } from "./table.component";
 import { StarkTableColumnComponent } from "./column.component";
 import { StarkPaginationComponent } from "../../pagination/components";
 import { StarkTableColumnFilter, StarkTableColumnProperties, StarkTableFilter, StarkTableRowActions } from "../entities";
+import find from "lodash-es/find";
 import Spy = jasmine.Spy;
 import createSpy = jasmine.createSpy;
 
@@ -36,9 +37,10 @@ import createSpy = jasmine.createSpy;
 			[multiSort]="multiSort"
 			[rowsSelectable]="rowsSelectable"
 			[multiSelect]="multiSelect"
+			[showRowsCounter]="showRowsCounter"
+			[showRowIndex]="showRowIndex"
 			[orderProperties]="orderProperties"
 			[tableRowActions]="tableRowActions"
-			[showRowsCounter]="showRowsCounter"
 			[rowClassNameFn]="rowClassNameFn"
 			(rowClicked)="rowClickHandler($event)"
 		>
@@ -56,6 +58,7 @@ class TestHostComponent {
 	public multiSelect?: string;
 	public multiSort?: string;
 	public showRowsCounter?: boolean;
+	public showRowIndex?: boolean;
 	public tableRowActions?: StarkTableRowActions;
 	public tableFilter?: StarkTableFilter;
 	public orderProperties?: string[];
@@ -154,11 +157,14 @@ describe("TableComponent", () => {
 			expect(component.multiSort).toBe(hostComponent.multiSort);
 			expect(component.orderProperties).toBe(hostComponent.orderProperties);
 			expect(component.showRowsCounter).toBe(false);
+			expect(component.showRowIndex).toBe(false);
 			expect(component.tableRowActions).toBe(<any>hostComponent.tableRowActions);
 		});
 	});
 
 	describe("on change", () => {
+		const tableThSelector = ".stark-table thead tr th";
+
 		it("should make a copy of 'data' in 'dataSource' when 'data' changes to keep 'data' immutable", () => {
 			const dummyData = [{ name: "test-data" }];
 			hostComponent.dummyData = dummyData;
@@ -223,20 +229,57 @@ describe("TableComponent", () => {
 			expect(component.isMultiSortEnabled).toBe(false);
 		});
 
-		it("should assign right value to isMultiSelectEnabled when multiSelect changes and adapt displayedColumns", () => {
-			spyOn(component.displayedColumns, "unshift");
+		it("should assign right value to isMultiSelectEnabled when multiSelect changes and rowsSelectable is enabled", () => {
 			hostComponent.rowsSelectable = true;
 			hostComponent.multiSelect = "true";
 			hostFixture.detectChanges();
 			expect(component.isMultiSelectEnabled).toBe(true);
-			expect(component.displayedColumns.unshift).toHaveBeenCalledTimes(1);
-			expect(component.displayedColumns.unshift).toHaveBeenCalledWith("select");
 
-			(<Spy>component.displayedColumns.unshift).calls.reset();
 			hostComponent.multiSelect = "false";
 			hostFixture.detectChanges();
 			expect(component.isMultiSelectEnabled).toBe(false);
-			expect(component.displayedColumns.unshift).not.toHaveBeenCalled();
+		});
+
+		it("should assign right value to display/hide 'select' column when rowsSelectable changes", () => {
+			hostComponent.rowsSelectable = true;
+			hostFixture.detectChanges();
+
+			expect(component.displayedColumns.indexOf("select") > -1).toBe(true);
+			let rowThElements = <NodeListOf<HTMLElement>>hostFixture.nativeElement.querySelectorAll(tableThSelector);
+			expect(rowThElements.length).toBeGreaterThan(0);
+			let selectThElement = find(rowThElements, (thElement: HTMLElement) => thElement.className.indexOf("cdk-column-select") > -1);
+			expect(selectThElement).toBeDefined();
+
+			hostComponent.rowsSelectable = false;
+			hostFixture.detectChanges();
+			expect(component.displayedColumns.indexOf("select") > -1).toBe(false);
+			rowThElements = <NodeListOf<HTMLElement>>hostFixture.nativeElement.querySelectorAll(tableThSelector);
+			expect(rowThElements.length).toBeGreaterThanOrEqual(0);
+			selectThElement = find(rowThElements, (thElement: HTMLElement) => thElement.className.indexOf("cdk-column-select") > -1);
+			expect(selectThElement).toBeUndefined();
+		});
+
+		it("should assign right value to _showRowIndex when showRowIndex changes and adapt displayedColumns", () => {
+			hostComponent.showRowIndex = true;
+			hostFixture.detectChanges();
+			expect(component.showRowIndex).toBe(true);
+			expect(component.displayedColumns.indexOf("rowIndex") > -1).toBe(true);
+			let rowThElements = <NodeListOf<HTMLElement>>hostFixture.nativeElement.querySelectorAll(tableThSelector);
+			expect(rowThElements.length).toBeGreaterThan(0);
+			let rowIndexThElement = find(
+				rowThElements,
+				(thElement: HTMLElement) => thElement.className.indexOf("cdk-column-rowIndex") > -1
+			);
+			expect(rowIndexThElement).toBeDefined();
+
+			hostComponent.showRowIndex = false;
+			hostFixture.detectChanges();
+			expect(component.showRowIndex).toBe(false);
+			expect(component.displayedColumns.indexOf("rowIndex") > -1).toBe(false);
+			rowThElements = <NodeListOf<HTMLElement>>hostFixture.nativeElement.querySelectorAll(tableThSelector);
+			expect(rowThElements.length).toBeGreaterThanOrEqual(0);
+			rowIndexThElement = find(rowThElements, (thElement: HTMLElement) => thElement.className.indexOf("cdk-column-rowIndex") > -1);
+			expect(rowIndexThElement).toBeUndefined();
 		});
 
 		it("should assign the right value to filter", () => {
@@ -1057,6 +1100,19 @@ describe("TableComponent", () => {
 		});
 	});
 
+	describe("getRowIndex", () => {
+		it("should return the right index for every row", () => {
+			for (let i = 0; i < component.dataSource.data.length; i++) {
+				expect(component.getRowIndex(component.dataSource.data[i])).toBe(i + 1);
+			}
+		});
+
+		it("should return 'undefined' if dataSource is not initialized yet", () => {
+			component.dataSource = <any>undefined;
+			expect(component.getRowIndex({ name: "dummy-row-data" })).toBeUndefined();
+		});
+	});
+
 	describe("resetFilterValueOnDataChange", () => {
 		const dummyGlobalFilterValue = "dummy global filter value";
 		const dummyColumnFilterValue = "dummy column filter value";

diff --git a/packages/stark-ui/src/modules/table/components/table.component.ts b/packages/stark-ui/src/modules/table/components/table.component.ts
@@ -244,6 +244,34 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI
 	@Input()
 	public rowClassNameFn?: (row: object, index: number) => string;
 
+	/**
+	 * Determine if the row index must be present or not.
+	 * Default: false
+	 */
+	@Input()
+	public get showRowIndex(): boolean {
+		return this._showRowIndex;
+	}
+
+	public set showRowIndex(showRowIndex: boolean) {
+		this._showRowIndex = coerceBooleanProperty(showRowIndex);
+
+		if (this._showRowIndex) {
+			if (!this.displayedColumns.includes("rowIndex")) {
+				this.displayedColumns.unshift("rowIndex");
+			}
+		} else {
+			const i: number = this.displayedColumns.indexOf("rowIndex");
+			this.displayedColumns.splice(i);
+		}
+	}
+
+	/**
+	 * @ignore
+	 * @internal
+	 */
+	private _showRowIndex = false;
+
 	/**
 	 * Output event emitter that will emit the latest filter value whenever it changes.
 	 */
@@ -959,6 +987,18 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI
 		}
 	}
 
+	/**
+	 * Get the row index, based on its position in dataSource.data
+	 * @param row - Row to get index
+	 */
+	public getRowIndex(row: any): number | undefined {
+		if (this.dataSource && this.dataSource.data) {
+			return this.dataSource.data.indexOf(row) + 1;
+		}
+
+		return undefined;
+	}
+
 	/**
 	 * Toggles the visibility of a column
 	 * @param item - the item containing the name of the column

diff --git a/showcase/src/app/demo-ui/components/table-regular/table-regular.component.html b/showcase/src/app/demo-ui/components/table-regular/table-regular.component.html
@@ -6,6 +6,7 @@
 	[orderProperties]="order"
 	[paginationConfig]="pagination"
 	[tableRowActions]="tableRowActions"
+	showRowIndex
 	multiSort
 	showRowsCounter
 	(rowClicked)="handleRowClicked($event)"

diff --git a/showcase/src/assets/examples/table/regular/table.html b/showcase/src/assets/examples/table/regular/table.html
@@ -6,6 +6,7 @@
 	[orderProperties]="order"
 	[paginationConfig]="pagination"
 	[tableRowActions]="tableRowActions"
+	showRowIndex
 	multiSort
 	showRowsCounter
 	(rowClicked)="handleRowClicked($event)"