sorting & filtering 1st version done

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

@@ -8,6 +8,7 @@ import { DataGridFooterDirective } from './directives/data-grid-footer.directive
 import { DataGridHeaderDirective } from './directives/data-grid-header.directive';
 import { DataGridLoaderDirective } from './directives/data-grid-loader.directive';
 import { DataGridCellFilterDirective } from './directives/data-grid-cell-filter.directive';
+import { DataGridColSortDirective } from './directives/data-grid-col-sort.directive';
 
 
 
@@ -17,7 +18,7 @@ import { DataGridCellFilterDirective } from './directives/data-grid-cell-filter.
   declarations: [
     DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,
     DataGridCellDirective, DataGridFooterDirective, DataGridHeaderDirective, 
-    DataGridLoaderDirective, DataGridCellFilterDirective,
+    DataGridLoaderDirective, DataGridCellFilterDirective, DataGridColSortDirective,
     
   ],
   imports: [
@@ -26,6 +27,6 @@ import { DataGridCellFilterDirective } from './directives/data-grid-cell-filter.
   exports: [
     DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,
     DataGridCellDirective,DataGridFooterDirective, DataGridHeaderDirective,
-    DataGridLoaderDirective,DataGridCellFilterDirective]
+    DataGridLoaderDirective,DataGridCellFilterDirective,DataGridColSortDirective]
 })
 export class DataGridModule { }

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

@@ -9,14 +9,27 @@
     </tr>
     <tr>
       <th *ngFor="let column of columns">
-        <ng-container *ngIf="hasHeaderTemplate(column)">
-          <ng-container
-            [ngTemplateOutlet]="getColumnHeaderTemplate(column)"
-          ></ng-container>
-          <ng-container *ngFor="let filter of filters" >
-            <ng-container [ngTemplateOutlet]="filter.template"></ng-container>
-          </ng-container>
-        </ng-container>
+        <div class="flex-container">
+          <div class="flex-item">
+            <ng-container *ngIf="hasHeaderTemplate(column)" >
+              <ng-container
+                [ngTemplateOutlet]="getColumnHeaderTemplate(column)"
+              ></ng-container>
+            </ng-container>
+          </div>
+  
+          <div class="flex-item">
+            <ng-container *ngIf="hasFilterTemplate(column)">
+              <ng-container [ngTemplateOutlet]="getFilterTemplate(column)"></ng-container>
+            </ng-container>
+          </div>
+          
+          <div class="flex-item">
+            <ng-container *ngIf="hasSortingTemplate(column)">
+              <ng-container [ngTemplateOutlet]="getSortingTemplate(column)"></ng-container>
+            </ng-container>
+          </div>
+        </div>
       </th>
     </tr>
   </thead>

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

@@ -0,0 +1,8 @@
+:host  .flex-container{
+    display: flex;
+    justify-content: flex-start;
+}
+
+:host .flex-item{
+    margin-right: 1px;
+}

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

@@ -6,6 +6,7 @@ import { DataGridFooterDirective } from '../directives/data-grid-footer.directiv
 import { DataGridLoaderDirective } from '../directives/data-grid-loader.directive';
 import { Subscription } from 'rxjs';
 import { DataGridCellFilterDirective } from '../directives/data-grid-cell-filter.directive';
+import { DataGridColSortDirective } from '../directives/data-grid-col-sort.directive';
 
 @Component({
   selector: 'ps-data-grid',
@@ -21,7 +22,6 @@ export class DataGridComponent implements OnInit, OnDestroy {
   @ContentChildren(DataGridHeaderDirective) gridHeaders: QueryList<DataGridHeaderDirective>;
   @ContentChildren(DataGridFooterDirective) gridFooters: QueryList<DataGridFooterDirective>;
   @ContentChildren(DataGridLoaderDirective) loaders: QueryList<DataGridLoaderDirective>;
-  @ContentChildren(DataGridCellFilterDirective) filters: QueryList<DataGridCellFilterDirective>;
   
   @Input() dataSource: IDataSource<any>;
   @Input() tableClasses: any;
@@ -32,6 +32,8 @@ export class DataGridComponent implements OnInit, OnDestroy {
   private _dataSubscription: Subscription;
   private _loadingSubscription: Subscription;
 
+  _fiters:any
+
   @Input() set columns(value: string[]) {
     this._columns = value;
     this.columnsChange.emit(value);
@@ -75,8 +77,24 @@ export class DataGridComponent implements OnInit, OnDestroy {
     
   }
 
+  getSortingTemplate(columnName){
+    const ret = this.getColumn(columnName);
+    if (ret && ret.sortTemplate) 
+      return ret.sortTemplate.template;
+
+    return null;
+  }
+
+  getFilterTemplate(columnName){
+    const ret = this.getColumn(columnName);
+    if (ret && ret.filterTemplate) 
+      return ret.filterTemplate.template;
+
+    return null;
+  }
+
   getColumn(columnName: string) {
-    
+  
     if (!this.columnDefinitions)
       return null;
 
@@ -88,6 +106,7 @@ export class DataGridComponent implements OnInit, OnDestroy {
     return ret;
   }
 
+
   getColumnHeaderTemplate(columnName: string) {
     const ret = this.getColumn(columnName);
     if (ret && ret.headerTemplate) 
@@ -112,5 +131,13 @@ export class DataGridComponent implements OnInit, OnDestroy {
     return this.getColumnCellTemplate(columnName) ? true :false;
   }
 
+  hasFilterTemplate(columnName: string) {
+    return this.getFilterTemplate(columnName) ? true :false;
+  }
+
+  hasSortingTemplate(columnName: string) {
+    return this.getSortingTemplate(columnName) ? true :false;
+  }
+
 
 }

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

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

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

@@ -1,6 +1,9 @@
-import { Directive, Input, ContentChild } from '@angular/core';
+import { Directive, Input, ContentChild, ContentChildren } from '@angular/core';
 import { DataGridColHeaderDirective } from './data-grid-col-header.directive';
 import { DataGridCellDirective } from './data-grid-cell.directive';
+import { DataGridCellFilterDirective } from './data-grid-cell-filter.directive';
+import { DataGridColSortDirective } from './data-grid-col-sort.directive';
+
 
 @Directive({
   selector: '[psDataGridCol]'
@@ -10,6 +13,8 @@ export class DataGridColDirective {
   @Input('psDataGridCol') columnName:string;
   @ContentChild(DataGridColHeaderDirective) headerTemplate:DataGridColHeaderDirective;
   @ContentChild(DataGridCellDirective) cellTemplate:DataGridCellDirective;  
+  @ContentChild(DataGridCellFilterDirective) filterTemplate: DataGridCellFilterDirective;
+  @ContentChild(DataGridColSortDirective) sortTemplate: DataGridColSortDirective;
 
   constructor() { }
 

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

@@ -10,4 +10,5 @@ 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';
 export * from './lib/data-grid/directives/data-grid-loader.directive';
-export * from './lib/data-grid/directives/data-grid-cell-filter.directive';
+export * from './lib/data-grid/directives/data-grid-cell-filter.directive';
+export * from './lib/data-grid/directives/data-grid-col-sort.directive';