two-way binding columns & header footer in grid

projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts

@@ -1,17 +1,23 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DataGridComponent } from './data-grid/data-grid.component';
-import { DataGridColDirective } from './directives/DataGridCol.directive';
-import { DataGridColHeaderDirective } from './directives/DataGridColHeader.directive';
-import { DataGridCellDirective } from './directives/DataGridCell.directive';
+import { DataGridColDirective } from './directives/data-grid-col.directive';
+import { DataGridColHeaderDirective } from './directives/data-grid-col-header.directive';
+import { DataGridCellDirective } from './directives/data-grid-cell.directive';
+import { DataGridFooterDirective } from './directives/data-grid-footer.directive';
+import { DataGridHeaderDirective } from './directives/data-grid-header.directive';
+
+
 
 
 
 @NgModule({
-  declarations: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective],
+  declarations: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective, DataGridFooterDirective, DataGridHeaderDirective,
+    
+  ],
   imports: [
     CommonModule
   ],
-  exports: [DataGridComponent]
+  exports: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective,DataGridFooterDirective, DataGridHeaderDirective]
 })
 export class DataGridModule { }

projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html

@@ -1,30 +1,42 @@
-<table>
-    <thead>
-        <tr>
-            <th *ngFor="let column of columns">
-                <p *ngIf="hasHeaderTemplate(column)">
-                    <ng-container
-                      [ngTemplateOutlet]="getColumnHeaderTemplate(column)"
-                    ></ng-container>
-                </p>
-            </th>
-        </tr>
-    </thead>
+<table [ngClass]="tableClasses">
+  <thead>
+    <tr>
+      <th *ngFor="let header of gridHeaders" [attr.colspan]="columns.length">
+        <ng-container [ngTemplateOutlet]="header.template"></ng-container>
+      </th>
+    </tr>
+    <tr>
+      <th *ngFor="let column of columns">
+        <ng-container *ngIf="hasHeaderTemplate(column)">
+          <ng-container
+            [ngTemplateOutlet]="getColumnHeaderTemplate(column)"
+          ></ng-container>
+        </ng-container>
+      </th>
+    </tr>
+  </thead>
 
-    <tbody *ngIf="latestResult">
-        <tr *ngFor="let rowModel of latestResult.data; let i = index;">
-          <td *ngFor="let column of columns">
-            <ng-container *ngIf="hasCellTemplate(column)">
-              <ng-container
-                [ngTemplateOutlet]="getColumnCellTemplate(column)"
-                [ngTemplateOutletContext]="{
-                  $implicit: rowModel,
-                  column: column,
-                  rowIndex: i
-                }"
-              ></ng-container>
-            </ng-container>
-          </td>
-        </tr>
-      </tbody>
+  <tbody *ngIf="latestResult">
+    <tr *ngFor="let rowModel of latestResult.data; let i = index">
+      <td *ngFor="let column of columns">
+        <ng-container *ngIf="hasCellTemplate(column)">
+          <ng-container
+            [ngTemplateOutlet]="getColumnCellTemplate(column)"
+            [ngTemplateOutletContext]="{
+              $implicit: rowModel,
+              column: column,
+              rowIndex: i
+            }"
+          ></ng-container>
+        </ng-container>
+      </td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <td *ngFor="let footer of gridFooters" [attr.colspan]="columns.length">
+        <ng-container [ngTemplateOutlet]="footer.template"></ng-container>
+      </td>
+    </tr>
+  </tfoot>
 </table>

projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts

@@ -1,6 +1,8 @@
-import { Component, OnInit, ContentChildren, QueryList, Input } from '@angular/core';
+import { Component, OnInit, ContentChildren, QueryList, Input, Output, EventEmitter } from '@angular/core';
 import { IQueryExecutionResult, IQueryExecutionGroupResult, IDataSource } from '@poweredsoft/data';
-import { DataGridColDirective } from '../directives/DataGridCol.directive';
+import { DataGridColDirective } from '../directives/data-grid-col.directive';
+import { DataGridHeaderDirective } from '../directives/data-grid-header.directive';
+import { DataGridFooterDirective } from '../directives/data-grid-footer.directive';
 
 @Component({
   selector: 'ps-data-grid',
@@ -12,13 +14,29 @@ export class DataGridComponent implements OnInit {
   latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
   pages: any[];
 
-  @ContentChildren(DataGridColDirective) headers: QueryList<DataGridColDirective>;
+  @ContentChildren(DataGridColDirective) columnDefinitions: QueryList<DataGridColDirective>;
+  @ContentChildren(DataGridHeaderDirective) gridHeaders: QueryList<DataGridHeaderDirective>;
+  @ContentChildren(DataGridFooterDirective) gridFooters: QueryList<DataGridFooterDirective>;
+  
   
-  @Input() columns: string[];
   @Input() dataSource: IDataSource<any>;
+  @Input() tableClasses: any;
+  private _columns: string[];
+  
+  @Input() set columns(value: string[]) {
+    this._columns = value;
+    this.columnsChange.emit(value);
+  }
+
+  get columns() {
+    return this._columns;
+  }  
+
+  @Output() columnsChange:EventEmitter<string []> = new EventEmitter<string []>();
   constructor() { }
 
   ngOnInit(): void {
+    console.log(this.columnDefinitions);
     this.dataSource.data$.subscribe(newData => {
       this.latestResult = newData;
       if (newData)
@@ -28,7 +46,7 @@ export class DataGridComponent implements OnInit {
 
   getColumn(columnName: string) {
     
-    const ret = this.headers.find(t => 
+    const ret = this.columnDefinitions.find(t => 
     {
       return t.columnName == columnName;
     });

projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col.directive.ts

@@ -1,6 +1,6 @@
 import { Directive, Input, ContentChild } from '@angular/core';
-import { DataGridColHeaderDirective } from './DataGridColHeader.directive';
-import { DataGridCellDirective } from './DataGridCell.directive';
+import { DataGridColHeaderDirective } from './data-grid-col-header.directive';
+import { DataGridCellDirective } from './data-grid-cell.directive';
 
 @Directive({
   selector: '[psDataGridCol]'

projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-footer.directive.ts

@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[psDataGridFooter]'
+})
+export class DataGridFooterDirective {
+
+  constructor(public template: TemplateRef<any>) { }
+
+}

projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-header.directive.ts

@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[psDataGridHeader]'
+})
+export class DataGridHeaderDirective {
+
+  constructor(public template: TemplateRef<any>) { }
+
+}

projects/poweredsoft/ngx-cdk-ui/src/public-api.ts

@@ -4,6 +4,8 @@
 
 export * from './lib/data-grid/data-grid.module';
 export * from './lib/data-grid/data-grid/data-grid.component';
-export * from './lib/data-grid/directives/DataGridCell.directive';
-export * from './lib/data-grid/directives/DataGridCol.directive';
-export * from './lib/data-grid/directives/DataGridColHeader.directive';
+export * from './lib/data-grid/directives/data-grid-cell.directive';
+export * from './lib/data-grid/directives/data-grid-col.directive';
+export * from './lib/data-grid/directives/data-grid-col-header.directive';
+export * from './lib/data-grid/directives/data-grid-header.directive';
+export * from './lib/data-grid/directives/data-grid-footer.directive';