feat(dynamic-table): add column styles (#626)

allianz · Jul 11, 2022 · 5757c29 · 5757c29
1 parent 97a4acb
commit 5757c29
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 5 deletions.
diff --git a/...ts/ng-aquila/documentation/examples/dynamic-table/dynamic-table/dynamic-table-example.css b/...ts/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/...cts/ng-aquila/documentation/examples/dynamic-table/dynamic-table/dynamic-table-example.ts b/...cts/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
@@ -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
@@ -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
@@ -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> {