From 5757c296652e16095618627c9457e5e5690eef48 Mon Sep 17 00:00:00 2001
From: "yevhen.demchenko@allianz.de" <yevhen.demchenko@allianz.com>
Date: Mon, 11 Jul 2022 14:19:00 +0200
Subject: [PATCH] feat(dynamic-table): add column styles (#626)
---
.../dynamic-table/dynamic-table-example.css | 3 +++
.../dynamic-table/dynamic-table-example.ts | 8 +++++++-
.../dynamic-table/dynamic-table.component.html | 11 ++++++++---
.../dynamic-table.component.spec.ts | 16 +++++++++++++++-
.../src/dynamic-table/dynamic-table.models.ts | 8 ++++++++
5 files changed, 41 insertions(+), 5 deletions(-)
diff --git a/projects/ng-aquila/documentation/examples/dynamic-table/dynamic-table/dynamic-table-example.css b/projects/ng-aquila/documentation/examples/dynamic-table/dynamic-table/dynamic-table-example.css
index e69de29bb..03181522a 100644
--- a/projects/ng-aquila/documentation/examples/dynamic-table/dynamic-table/dynamic-table-example.css
+++ b/projects/ng-aquila/documentation/examples/dynamic-table/dynamic-table/dynamic-table-example.css
@@ -0,0 +1,3 @@
+::ng-deep .text-underline {
+ text-decoration: underline !important;
+}
diff --git a/projects/ng-aquila/documentation/examples/dynamic-table/dynamic-table/dynamic-table-example.ts b/projects/ng-aquila/documentation/examples/dynamic-table/dynamic-table/dynamic-table-example.ts
index b40db18e5..ce726ba39 100755
--- a/projects/ng-aquila/documentation/examples/dynamic-table/dynamic-table/dynamic-table-example.ts
+++ b/projects/ng-aquila/documentation/examples/dynamic-table/dynamic-table/dynamic-table-example.ts
@@ -58,7 +58,13 @@ export class DynamicTableExampleComponent {
},
];
displayedColumns: NxDynamicTableColumnDefinition[] = [
- { title: 'Code', key: 'code', type: 'string' },
+ {
+ title: 'Code',
+ key: 'code',
+ type: 'string',
+ headerCellClass: 'text-underline',
+ cellStyle: { 'font-weight': 600 },
+ },
{ title: 'Company', key: 'company', type: 'string' },
{ title: 'Price', key: 'price', type: 'numeric' },
{ title: 'Change Percent', key: 'changePercent', type: 'numeric' },
diff --git a/projects/ng-aquila/src/dynamic-table/dynamic-table.component.html b/projects/ng-aquila/src/dynamic-table/dynamic-table.component.html
index f498174a4..5b1a61aea 100644
--- a/projects/ng-aquila/src/dynamic-table/dynamic-table.component.html
+++ b/projects/ng-aquila/src/dynamic-table/dynamic-table.component.html
@@ -3,15 +3,20 @@
<cdk-table [dataSource]="dataSource" class="nx-table">
<!-- Column Definition -->
<ng-container *ngFor="let element of displayedColumns" cdkColumnDef="{{ element.key }}">
- <cdk-header-cell *cdkHeaderCellDef class="nx-table__header-cell" [ngClass]="{ 'nx-table__header-cell--number': isNumeric(element) }">
- <div class="nx-table__header-title--block">
+ <cdk-header-cell
+ *cdkHeaderCellDef
+ class="nx-table__header-cell"
+ [ngClass]="[element.headerCellClass ?? '', isNumeric(element) ? 'nx-table__header-cell--number' : '']"
+ [ngStyle]="element.headerCellStyle || null"
+ ><div class="nx-table__header-title--block">
<span class="nx-table__header-title"> {{ element.title }}</span>
</div>
</cdk-header-cell>
<cdk-cell
*cdkCellDef="let row"
class="nx-table__cell"
- [ngClass]="{ 'nx-table__cell--number': isNumeric(element) }"
+ [ngClass]="[element.cellClass ?? '', isNumeric(element) ? 'nx-table__cell--number' : '']"
+ [ngStyle]="element.cellStyle ?? null"
[innerHTML]="row[element.key]"
></cdk-cell>
</ng-container>
diff --git a/projects/ng-aquila/src/dynamic-table/dynamic-table.component.spec.ts b/projects/ng-aquila/src/dynamic-table/dynamic-table.component.spec.ts
index 877e9b13d..72f679da8 100644
--- a/projects/ng-aquila/src/dynamic-table/dynamic-table.component.spec.ts
+++ b/projects/ng-aquila/src/dynamic-table/dynamic-table.component.spec.ts
@@ -16,7 +16,14 @@ abstract class DynamicTableTest {
];
displayedColumns: NxDynamicTableColumnDefinition[] = [
{ title: 'User Name', key: 'name', type: 'string' },
- { title: 'Phone Number', key: 'phone', type: 'string' },
+ {
+ title: 'Phone Number',
+ key: 'phone',
+ type: 'string',
+ headerCellClass: 'column-header-class',
+ headerCellStyle: { 'width.px': 100 },
+ cellClass: 'column-class',
+ },
];
handleRowClick = jasmine.createSpy('handleRowClickSpy');
style = '';
@@ -87,6 +94,13 @@ describe('NxDynamicTableComponent', () => {
fixture.detectChanges();
expect(rowElements).toHaveSize(0);
});
+
+ it('sets column styles', () => {
+ createTestComponent(BasicDynamicTable);
+ expect(headerCellElements[1].classList.contains('column-header-class')).toBeTrue();
+ expect(headerCellElements[1].style.width).toEqual('100px');
+ expect(fixture.nativeElement.querySelector('.column-class')).toBeTruthy();
+ });
});
describe('with events', () => {
diff --git a/projects/ng-aquila/src/dynamic-table/dynamic-table.models.ts b/projects/ng-aquila/src/dynamic-table/dynamic-table.models.ts
index 3f8413ce8..2a27619de 100644
--- a/projects/ng-aquila/src/dynamic-table/dynamic-table.models.ts
+++ b/projects/ng-aquila/src/dynamic-table/dynamic-table.models.ts
@@ -9,6 +9,14 @@ export interface NxDynamicTableColumnDefinition {
title: string;
/** Column display type. Defaults to 'string'. */
type?: 'string' | 'numeric';
+ /** Add custom column header cell styles. */
+ headerCellStyle?: { [prop: string]: any };
+ /** Add custom column header cell class. */
+ headerCellClass?: string;
+ /** Add custom column cell styles. */
+ cellStyle?: { [prop: string]: any };
+ /** Add custom column cell class. */
+ cellClass?: string;
}
export class NxDynamicTableDataSource extends DataSource<any> {