diff --git a/packages/stark-ui/src/modules/table/components/table.component.html b/packages/stark-ui/src/modules/table/components/table.component.html
index 940e330dda..ac8b054277 100644
--- 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 @@
+
+ |
+ {{ getRowIndex(row) }} |
+
+
@@ -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(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");
- (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 = >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 = >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 = >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 = >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 = 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
index 62dc31131b..89797a76a8 100644
--- 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
index c396edd627..2f6cf30695 100644
--- 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
index 37d6c29d3f..61a9a3040e 100644
--- 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)"