diff --git a/packages/stark-ui/src/modules/table/components/column-properties.intf.ts b/packages/stark-ui/src/modules/table/components/column-properties.intf.ts
index 6cb5885dd8..84d57845d8 100644
--- a/packages/stark-ui/src/modules/table/components/column-properties.intf.ts
+++ b/packages/stark-ui/src/modules/table/components/column-properties.intf.ts
@@ -4,19 +4,16 @@ import { StarkTableColumnPriority } from "./column-priority.intf";
* Definition of a column in the Stark Table
*/
export interface StarkTableColumnProperties {
- /**
- * Class(es) to be set to every cell of the column.
- */
- cellClassName?: string;
-
/**
* Function that returns class(es) to be set to an specific cell. It can be used to set different classes
* depending on the row, value and or columnName. This function is called with 3 parameters:
* @param value - The value of the cell
* @param row - The row object that contains the cell
* @param columnName - The column that the cell belongs to
+ *
+ * This could also be a static string with class(es)
*/
- cellClassNameFn?: (value: any, row?: any, columnName?: string) => string;
+ cellClassName?: ((value: any, row?: any, columnName?: string) => string) | string;
/**
* Function that returns a formatted value (string) to be set in the cell. It can be used to set different formats
@@ -27,13 +24,6 @@ export interface StarkTableColumnProperties {
*/
cellFormatter?: (value: any, row?: any, columnName?: string) => string;
- /**
- * Class(es) to be set to the colgroup>col element of the column.
- * The CSS linked to the style can only be applied to 'border', 'background', 'width' and 'visibility' properties.
- * See http://www.w3.org/TR/CSS2/tables.html#columns
- */
- className?: string;
-
/**
* Function that returns
* 1 : if obj1 > obj2
diff --git a/packages/stark-ui/src/modules/table/components/column.component.html b/packages/stark-ui/src/modules/table/components/column.component.html
index 6dd941c8bc..42b8ba2655 100644
--- a/packages/stark-ui/src/modules/table/components/column.component.html
+++ b/packages/stark-ui/src/modules/table/components/column.component.html
@@ -1,7 +1,7 @@
- |
+ |
|
-
+ |
|
diff --git a/packages/stark-ui/src/modules/table/components/column.component.ts b/packages/stark-ui/src/modules/table/components/column.component.ts
index b05451f679..7078b18428 100644
--- a/packages/stark-ui/src/modules/table/components/column.component.ts
+++ b/packages/stark-ui/src/modules/table/components/column.component.ts
@@ -121,20 +121,18 @@ export class StarkTableColumnComponent extends AbstractStarkUiComponent {
@Input()
public sortPriority: number;
- @Input()
- public className?: string;
-
/**
- * A function to generate classNames for cells based on the value, its row and the name of the column.
+ * The classNames for the colgroup > col
*/
@Input()
- public cellClassNameFn?: (value: any, row?: any, columnName?: string) => string;
+ public className?: string;
/**
- * A static className that will be applied to all cells.
+ * A function to generate classNames for cells based on the value, its row and the name of the column.
+ * Or a static string with the classNames.
*/
@Input()
- public cellClassName?: string;
+ public cellClassName?: ((value: any, row?: any, columnName?: string) => string) | string;
/**
* A static className for the header
@@ -252,19 +250,24 @@ export class StarkTableColumnComponent extends AbstractStarkUiComponent {
* @param row - The data object of the row the cell is in.
* @returns The classes for the cell.
*/
- public getCellClassName(row: any): string {
- const value: any | undefined = this.getRawValue(row);
- const classNameFnResult: string =
- (this.cellClassNameFn && typeof this.cellClassNameFn === "function" && this.cellClassNameFn(value, row, this.name)) || "";
- return `${classNameFnResult} ${this.cellClassName || ""}`;
+ public getCellClassNames(row: any): string {
+ if (!this.cellClassName) {
+ return "";
+ }
+ if (typeof this.cellClassName === "string") {
+ return this.cellClassName;
+ }
+
+ const value: any = this.getRawValue(row);
+ return this.cellClassName(value, row, this.name);
}
/**
* Get the classes for a header
* @returns The classes for the header
*/
- public getHeaderClassName(): string {
- const classes: Array = [];
+ public getHeaderClassNames(): string {
+ const classes: string[] = [];
if (this.sortable) {
classes.push("sortable");
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 43e48d32f8..da71fe7280 100644
--- a/packages/stark-ui/src/modules/table/components/table.component.html
+++ b/packages/stark-ui/src/modules/table/components/table.component.html
@@ -51,6 +51,9 @@
+
+
+
@@ -82,7 +83,7 @@
|
+ [ngClass]="getRowClasses(row, i)">
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
index 6b7026c4e0..d7e525977a 100644
--- a/packages/stark-ui/src/modules/table/components/table.component.spec.ts
+++ b/packages/stark-ui/src/modules/table/components/table.component.spec.ts
@@ -899,20 +899,15 @@ describe("TableComponent", () => {
});
describe("setStyling", () => {
- const dummyData: Array = [
- { id: 1, description: "dummy 1" },
- { id: 2, description: "dummy 2" },
- { id: 3, description: "dummy 3" }
- ];
+ const dummyData: any[] = [{ id: 1, description: "dummy 1" }, { id: 2, description: "dummy 2" }, { id: 3, description: "dummy 3" }];
const returnEvenAndOdd: (row: any, index: number) => string = (_row: any, index: number): string =>
- index % 2 === 0 ? "even" : "odd";
- const staticCellClass: string = "staticCellClass";
+ (index + 1) % 2 === 0 ? "even" : "odd"; // offset index with 1
beforeEach(() => {
hostComponent.rowClassNameFn = returnEvenAndOdd;
hostComponent.columnProperties = [
- { name: "id", headerClassName: "id-header-cell", cellClassNameFn: (value: any) => (value === 1 ? "one" : "") },
- { name: "description", cellClassName: staticCellClass }
+ { name: "id", cellClassName: (value: any) => console.log(value) || (value === 1 ? "one" : "") },
+ { name: "description", headerClassName: "description-header-cell" }
];
hostComponent.dummyData = dummyData;
@@ -920,16 +915,18 @@ describe("TableComponent", () => {
component.ngAfterViewInit();
});
- it("second row should have class 'even'", () => {
- const tableElement: HTMLElement = hostFixture.nativeElement;
- const secondRow: HTMLElement | null = tableElement.querySelectorAll("tr").item(1);
- expect(secondRow && secondRow.classList).toContain("even");
- });
+ describe("setRowClass", () => {
+ it("first row should have class 'odd", () => {
+ const tableElement: HTMLElement = hostFixture.nativeElement;
+ const firstRow: HTMLElement | null = tableElement.querySelectorAll("tbody tr").item(0);
+ expect(firstRow && firstRow.classList).toContain("odd");
+ });
- it(`cell description should have class 'staticCellClass'`, () => {
- const tableElement: HTMLElement = hostFixture.nativeElement;
- const descriptionCell: HTMLElement | null = tableElement.querySelector("tr td:nth-child(2)"); // select the description cells
- expect(descriptionCell && descriptionCell.classList).toContain(staticCellClass);
+ it("second row should have class 'even'", () => {
+ const tableElement: HTMLElement = hostFixture.nativeElement;
+ const secondRow: HTMLElement | null = tableElement.querySelectorAll("tbody tr").item(1);
+ expect(secondRow && secondRow.classList).toContain("even");
+ });
});
it("cell id should have class 'one'", () => {
@@ -938,10 +935,10 @@ describe("TableComponent", () => {
expect(descriptionCell && descriptionCell.classList).toContain("one");
});
- it("id header cell should have class 'id-header-cell'", () => {
+ it("description header cell should have class 'description-header-cell'", () => {
const tableElement: HTMLElement = hostFixture.nativeElement;
- const descriptionCell: HTMLElement | null = tableElement.querySelector("thead th:nth-child(1)"); // select the id cells
- expect(descriptionCell && descriptionCell.classList).toContain("id-header-cell");
+ const descriptionCell: HTMLElement | null = tableElement.querySelector("thead th:nth-child(2)"); // select the id cells
+ expect(descriptionCell && descriptionCell.classList).toContain("description-header-cell");
});
});
});
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 e4b9c401ad..a563fbfe40 100644
--- a/packages/stark-ui/src/modules/table/components/table.component.ts
+++ b/packages/stark-ui/src/modules/table/components/table.component.ts
@@ -140,7 +140,7 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI
public tableRowsActionBarConfig: StarkActionBarConfig;
/**
- * function to generate a classNames for rows
+ * Function to generate classNames for rows
*/
@Input()
public rowClassNameFn?: (row: any, index: number) => string;
@@ -730,8 +730,8 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI
* @param index - The index of the row.
* @returns The className generated by the rowClassNameFn function
*/
- public getRowClass(row: any, index: number): string {
- return this.rowClassNameFn && typeof this.rowClassNameFn === "function" ? this.rowClassNameFn(row, index) : "";
+ public getRowClasses(row: any, index: number): string {
+ return typeof this.rowClassNameFn === "function" ? this.rowClassNameFn(row, index) : "";
}
/**
diff --git a/showcase/src/app/demo/table/demo-table.component.scss b/showcase/src/app/demo/table/demo-table.component.scss
index ef26b43385..364d37ae20 100644
--- a/showcase/src/app/demo/table/demo-table.component.scss
+++ b/showcase/src/app/demo/table/demo-table.component.scss
@@ -23,34 +23,18 @@
background-color: #d1e1ff;
}
-td {
- &.danger {
- color: #7c002c;
- }
- &.warning {
- color: #ff9800;
- }
- &.success {
- color: #3c9f40;
- }
+.danger {
+ color: #7c002c;
}
-.even td {
- background-color: #d1e1ff;
+.warning {
+ color: #ff9800;
}
-td {
- &.danger {
- color: #7c002c;
- }
- &.warning {
- color: #ff9800;
- }
- &.success {
- color: #3c9f40;
- }
+.success {
+ color: #3c9f40;
}
-th.bold {
+.bold {
font-weight: bold;
}
diff --git a/showcase/src/app/demo/table/demo-table.component.ts b/showcase/src/app/demo/table/demo-table.component.ts
index 7cf92bcf0b..7b357d8eed 100644
--- a/showcase/src/app/demo/table/demo-table.component.ts
+++ b/showcase/src/app/demo/table/demo-table.component.ts
@@ -32,7 +32,7 @@ export class DemoTableComponent implements OnInit {
return 0;
};
- public getRowClassName = (_row: any, index: number): Object => (index % 2 === 0 ? "even" : "odd");
+ public getRowClassName = (_row: any, index: number): string => (index % 2 === 0 ? "even" : "odd");
public getTitleCellClassName = (title: { value: number }): string =>
title.value < 5 ? "danger" : title.value < 9 ? "warning" : "success";
@@ -112,7 +112,7 @@ export class DemoTableComponent implements OnInit {
isSortable: true,
isFilterable: true,
compareFn: this.compareTitle,
- cellClassNameFn: this.getTitleCellClassName
+ cellClassName: this.getTitleCellClassName
},
{
name: "description",
diff --git a/showcase/src/assets/examples/table/with-custom-styling.scss b/showcase/src/assets/examples/table/with-custom-styling.scss
index 71cbd69001..ad57d769e0 100644
--- a/showcase/src/assets/examples/table/with-custom-styling.scss
+++ b/showcase/src/assets/examples/table/with-custom-styling.scss
@@ -2,18 +2,18 @@
background-color: #d1e1ff;
}
-td {
- &.danger {
- color: #7c002c;
- }
- &.warning {
- color: #ff9800;
- }
- &.success {
- color: #3c9f40;
- }
+.danger {
+ color: #7c002c;
}
-th.bold {
+.warning {
+ color: #ff9800;
+}
+
+.success {
+ color: #3c9f40;
+}
+
+.bold {
font-weight: bold;
}
diff --git a/showcase/src/assets/examples/table/with-custom-styling.ts b/showcase/src/assets/examples/table/with-custom-styling.ts
index 91ebf073a1..fcdf85f20b 100644
--- a/showcase/src/assets/examples/table/with-custom-styling.ts
+++ b/showcase/src/assets/examples/table/with-custom-styling.ts
@@ -53,7 +53,7 @@ export class DemoTableComponent implements OnInit {
},
isSortable: true,
isFilterable: true,
- cellClassNameFn: this.getTitleCellClassName
+ cellClassName: this.getTitleCellClassName
},
{
name: "description",
diff --git a/showcase/src/assets/translations/fr.json b/showcase/src/assets/translations/fr.json
index b6ac8c8191..18e580f8c4 100644
--- a/showcase/src/assets/translations/fr.json
+++ b/showcase/src/assets/translations/fr.json
@@ -246,7 +246,7 @@
"WITH_ALTERNATIVE_ACTION_BAR": "Table avec Action Bar alternative",
"WITH_FIXED_HEADER": "Table avec un en-tête fixe",
"WITH_TRANSCLUDED_ACTION_BAR": "Table avec Action Bar 'transcluded'",
- "WITH_CUSTOM_STYLING": "Table avec mis en page personnalisé",
+ "WITH_CUSTOM_STYLING": "Table avec mise en page personnalisé",
"TITLE": "Stark table"
},
"TOAST": {