diff --git a/package-lock.json b/package-lock.json
index 659871b..4e24382 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1554,6 +1554,55 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@hapi/address": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@hapi/address/-/address-4.0.1.tgz",
+      "integrity": "sha512-0oEP5UiyV4f3d6cBL8F3Z5S7iWSX39Knnl0lY8i+6gfmmIBj44JCBNtcMgwyS+5v7j3VYavNay0NFHDS+UGQcw==",
+      "dev": true,
+      "requires": {
+        "@hapi/hoek": "^9.0.0"
+      }
+    },
+    "@hapi/formula": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@hapi/formula/-/formula-2.0.0.tgz",
+      "integrity": "sha512-V87P8fv7PI0LH7LiVi8Lkf3x+KCO7pQozXRssAHNXXL9L1K+uyu4XypLXwxqVDKgyQai6qj3/KteNlrqDx4W5A==",
+      "dev": true
+    },
+    "@hapi/hoek": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.0.4.tgz",
+      "integrity": "sha512-EwaJS7RjoXUZ2cXXKZZxZqieGtc7RbvQhUy8FwDoMQtxWVi14tFjeFCYPZAM1mBCpOpiBpyaZbb9NeHc7eGKgw==",
+      "dev": true
+    },
+    "@hapi/joi": {
+      "version": "17.1.1",
+      "resolved": "https://registry.npmjs.org/@hapi/joi/-/joi-17.1.1.tgz",
+      "integrity": "sha512-p4DKeZAoeZW4g3u7ZeRo+vCDuSDgSvtsB/NpfjXEHTUjSeINAi/RrVOWiVQ1isaoLzMvFEhe8n5065mQq1AdQg==",
+      "dev": true,
+      "requires": {
+        "@hapi/address": "^4.0.1",
+        "@hapi/formula": "^2.0.0",
+        "@hapi/hoek": "^9.0.0",
+        "@hapi/pinpoint": "^2.0.0",
+        "@hapi/topo": "^5.0.0"
+      }
+    },
+    "@hapi/pinpoint": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@hapi/pinpoint/-/pinpoint-2.0.0.tgz",
+      "integrity": "sha512-vzXR5MY7n4XeIvLpfl3HtE3coZYO4raKXW766R6DZw/6aLqR26iuZ109K7a0NtF2Db0jxqh7xz2AxkUwpUFybw==",
+      "dev": true
+    },
+    "@hapi/topo": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-5.0.0.tgz",
+      "integrity": "sha512-tFJlT47db0kMqVm3H4nQYgn6Pwg10GTZHb1pwmSiv1K4ks6drQOtfEF5ZnPjkvC+y4/bUPHK+bc87QvLcL+WMw==",
+      "dev": true,
+      "requires": {
+        "@hapi/hoek": "^9.0.0"
+      }
+    },
     "@istanbuljs/schema": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz",
@@ -2564,6 +2613,41 @@
       "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "dev": true,
+      "requires": {
+        "follow-redirects": "1.5.10"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "dev": true,
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
     "axobject-query": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz",
@@ -7731,6 +7815,26 @@
       "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
       "dev": true
     },
+    "load-json-file": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
+      "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "parse-json": "^4.0.0",
+        "pify": "^3.0.0",
+        "strip-bom": "^3.0.0"
+      },
+      "dependencies": {
+        "pify": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+          "dev": true
+        }
+      }
+    },
     "loader-runner": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
@@ -8011,6 +8115,12 @@
         "readable-stream": "^2.0.1"
       }
     },
+    "memorystream": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
+      "integrity": "sha1-htcJCzDORV1j+64S3aUaR93K+bI=",
+      "dev": true
+    },
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -8651,6 +8761,11 @@
         }
       }
     },
+    "ngx-bootstrap": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-5.6.1.tgz",
+      "integrity": "sha512-8fDs3VaaWgKpupakPKS0QaUc+1E/JMBGJDxUUODjyIkLtFr1A8vH4cjXiV3AfrPvhK27GH0oyTPyKWKcCjEtVg=="
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -8876,6 +8991,36 @@
         }
       }
     },
+    "npm-run-all": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz",
+      "integrity": "sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "chalk": "^2.4.1",
+        "cross-spawn": "^6.0.5",
+        "memorystream": "^0.3.1",
+        "minimatch": "^3.0.4",
+        "pidtree": "^0.3.0",
+        "read-pkg": "^3.0.0",
+        "shell-quote": "^1.6.1",
+        "string.prototype.padend": "^3.0.0"
+      },
+      "dependencies": {
+        "read-pkg": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
+          "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=",
+          "dev": true,
+          "requires": {
+            "load-json-file": "^4.0.0",
+            "normalize-package-data": "^2.3.2",
+            "path-type": "^3.0.0"
+          }
+        }
+      }
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -9652,6 +9797,12 @@
       "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
       "dev": true
     },
+    "pidtree": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.3.1.tgz",
+      "integrity": "sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==",
+      "dev": true
+    },
     "pify": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
@@ -11946,6 +12097,12 @@
       "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
       "dev": true
     },
+    "shell-quote": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz",
+      "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
+      "dev": true
+    },
     "signal-exit": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
@@ -12648,6 +12805,16 @@
         }
       }
     },
+    "string.prototype.padend": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.0.tgz",
+      "integrity": "sha512-3aIv8Ffdp8EZj8iLwREGpQaUZiPyrWrpzMBHvkiSW/bK/EGve9np07Vwy7IJ5waydpGXzQZu/F8Oze2/IWkBaA==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.0-next.1"
+      }
+    },
     "string.prototype.trimend": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz",
@@ -13708,6 +13875,19 @@
       "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=",
       "dev": true
     },
+    "wait-on": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-5.0.1.tgz",
+      "integrity": "sha512-TxzkYIfRWK1hLc9IlUh9bE1mrvIIM3ptPRKQ86Z8Qo0tBQLCHEvWzkRD1Ge4FWprKflHOnAtqIBH2nKmib/lrg==",
+      "dev": true,
+      "requires": {
+        "@hapi/joi": "^17.1.1",
+        "axios": "^0.19.2",
+        "lodash": "^4.17.15",
+        "minimist": "^1.2.5",
+        "rxjs": "^6.5.5"
+      }
+    },
     "watchpack": {
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.2.tgz",
diff --git a/package.json b/package.json
index e4c6c3b..26a2b2d 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,11 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "clean": "rimraf dist",
+    "start:app": "wait-on dist/poweredsoft/ngx-cdk-ui/fesm5 && ng serve --poll 2000",
+    "watch:lib": "ng build @poweredsoft/ngx-cdk-ui --watch",
+    "watch:all": "npm run clean && run-p watch:lib start:app"
   },
   "private": true,
   "dependencies": {
@@ -19,10 +23,6 @@
     "@angular/platform-browser": "~9.1.4",
     "@angular/platform-browser-dynamic": "~9.1.4",
     "@angular/router": "~9.1.4",
-    "bootstrap": "^4.5.0",
-    "rxjs": "~6.5.4",
-    "tslib": "^1.10.0",
-    "zone.js": "~0.10.2",
     "@poweredsoft/data": "0.0.26",
     "@poweredsoft/ngx-data": "0.0.13",
     "@poweredsoft/ngx-data-apollo": "0.0.8",
@@ -31,8 +31,13 @@
     "apollo-cache-inmemory": "^1.6.0",
     "apollo-client": "^2.6.0",
     "apollo-link": "^1.2.11",
+    "bootstrap": "^4.5.0",
     "graphql": "^14.5.0",
-    "graphql-tag": "^2.10.0"
+    "graphql-tag": "^2.10.0",
+    "ngx-bootstrap": "^5.6.1",
+    "rxjs": "~6.5.4",
+    "tslib": "^1.10.0",
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.901.4",
@@ -40,9 +45,9 @@
     "@angular/cli": "~9.1.4",
     "@angular/compiler-cli": "~9.1.4",
     "@angular/language-service": "~9.1.4",
-    "@types/node": "^12.11.1",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.11.1",
     "codelyzer": "^5.1.2",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",
@@ -52,9 +57,12 @@
     "karma-jasmine": "~3.0.1",
     "karma-jasmine-html-reporter": "^1.4.2",
     "ng-packagr": "^9.0.0",
+    "npm-run-all": "^4.1.5",
     "protractor": "~5.4.3",
+    "rimraf": "^3.0.2",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
-    "typescript": "~3.8.3"
+    "typescript": "~3.8.3",
+    "wait-on": "^5.0.1"
   }
 }
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts
index 718c82f..badcb1f 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts
@@ -1,14 +1,23 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DataGridComponent } from './data-grid/data-grid.component';
+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],
+  declarations: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective, DataGridFooterDirective, DataGridHeaderDirective,
+    
+  ],
   imports: [
     CommonModule
   ],
-  exports: [DataGridComponent]
+  exports: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective,DataGridFooterDirective, DataGridHeaderDirective]
 })
 export class DataGridModule { }
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html
index 1b479e7..afababd 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html
@@ -1,5 +1,42 @@
-<table>
+<table [ngClass]="tableClasses">
+  <thead>
     <tr>
-        <th>some header</th>
+      <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>
+  <tfoot>
+    <tr>
+      <td *ngFor="let footer of gridFooters" [attr.colspan]="columns.length">
+        <ng-container [ngTemplateOutlet]="footer.template"></ng-container>
+      </td>
+    </tr>
+  </tfoot>
 </table>
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts
index bacfb5a..66ce517 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts
@@ -1,4 +1,8 @@
-import { Component, OnInit } 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/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',
@@ -7,9 +11,72 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DataGridComponent implements OnInit {
 
+  latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
+  pages: any[];
+
+  @ContentChildren(DataGridColDirective) columnDefinitions: QueryList<DataGridColDirective>;
+  @ContentChildren(DataGridHeaderDirective) gridHeaders: QueryList<DataGridHeaderDirective>;
+  @ContentChildren(DataGridFooterDirective) gridFooters: QueryList<DataGridFooterDirective>;
+  
+  
+  @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)
+        this.pages = new Array(newData.numberOfPages);
+    });
   }
 
+  getColumn(columnName: string) {
+    
+    const ret = this.columnDefinitions.find(t => 
+    {
+      return t.columnName == columnName;
+    });
+
+    return ret;
+  }
+
+  getColumnHeaderTemplate(columnName: string) {
+    const ret = this.getColumn(columnName);
+    if (ret && ret.headerTemplate) 
+      return ret.headerTemplate.template;
+
+    return null;
+  } 
+
+  getColumnCellTemplate(columnName: string) {
+    const ret = this.getColumn(columnName);
+    if (ret && ret.cellTemplate) 
+      return ret.cellTemplate.template;
+
+    return null;
+  } 
+
+  hasHeaderTemplate(columnName: string) {
+    return this.getColumnHeaderTemplate(columnName) ? true :false;
+  }
+
+  hasCellTemplate(columnName: string) {
+    return this.getColumnCellTemplate(columnName) ? true :false;
+  }
+
+
 }
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-cell.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-cell.directive.ts
new file mode 100644
index 0000000..cd57380
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-cell.directive.ts
@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[psDataGridCell]'
+})
+export class DataGridCellDirective {
+
+  constructor(public template: TemplateRef<any>) { }
+
+}
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col-header.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col-header.directive.ts
new file mode 100644
index 0000000..f78c34f
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col-header.directive.ts
@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[psDataGridColHeader]'
+})
+export class DataGridColHeaderDirective {
+
+  constructor(public template: TemplateRef<any>) { }
+
+}
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col.directive.ts
new file mode 100644
index 0000000..545a5fb
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col.directive.ts
@@ -0,0 +1,16 @@
+import { Directive, Input, ContentChild } from '@angular/core';
+import { DataGridColHeaderDirective } from './data-grid-col-header.directive';
+import { DataGridCellDirective } from './data-grid-cell.directive';
+
+@Directive({
+  selector: '[psDataGridCol]'
+})
+export class DataGridColDirective {
+
+  @Input('psDataGridCol') columnName:string;
+  @ContentChild(DataGridColHeaderDirective) headerTemplate:DataGridColHeaderDirective;
+  @ContentChild(DataGridCellDirective) cellTemplate:DataGridCellDirective;  
+
+  constructor() { }
+
+}
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-footer.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-footer.directive.ts
new file mode 100644
index 0000000..abff278
--- /dev/null
+++ b/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>) { }
+
+}
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-header.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-header.directive.ts
new file mode 100644
index 0000000..6944df1
--- /dev/null
+++ b/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>) { }
+
+}
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
index b671c28..8218be5 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
+++ b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
@@ -3,4 +3,9 @@
  */
 
 export * from './lib/data-grid/data-grid.module';
-export * from './lib/data-grid/data-grid/data-grid.component';
\ No newline at end of file
+export * from './lib/data-grid/data-grid/data-grid.component';
+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';
\ No newline at end of file
diff --git a/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html b/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html
index 7d51f4f..c63e8a7 100644
--- a/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html
+++ b/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html
@@ -2,4 +2,36 @@
     This is a demo for a grid.
 </h1>
 
-<ps-data-grid></ps-data-grid>
\ No newline at end of file
+    <ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns" tableClasses="table table-sm table-bordered" >
+        
+        <ng-container *psDataGridHeader>
+            <h1>Hey! </h1>
+            <p>Welcome to my Grid!</p>
+            <label>New merchant name</label>
+            <input class="form-control" #newMerchantName/>
+            <button class="btn btn-primary btn-sm" (click)="newMerchant(newMerchantName.value)">Add</button>
+        </ng-container>
+        <ng-container psDataGridCol="id">
+            <div *psDataGridColHeader>ID</div>
+            <div *psDataGridCell="let model">{{model.id}}</div>
+        </ng-container>
+        <ng-container psDataGridCol="name">
+            <div *psDataGridColHeader>Name</div>
+            <div *psDataGridCell="let model">{{model.name}}</div>
+        </ng-container>
+        <ng-container psDataGridCol="address">
+            <div *psDataGridColHeader>Address</div>
+            <div *psDataGridCell="let model">{{model.address}}</div>
+        </ng-container>
+
+        <ng-container psDataGridCol="commands">
+            <ng-container *psDataGridColHeader>Actions</ng-container>
+            <ng-container *psDataGridCell="let model">
+                <button class="btn btn-primary mr-2">{{model.name}}</button>
+            </ng-container>
+        </ng-container>
+        <ng-container *psDataGridFooter>
+            
+            <strong>Footer works!</strong>
+        </ng-container>
+    </ps-data-grid>
\ No newline at end of file
diff --git a/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts b/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts
index 7b0e0c2..b6307fc 100644
--- a/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts
+++ b/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts
@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { DataSource, IDataSource, IQueryExecutionResult, IQueryExecutionGroupResult } from '@poweredsoft/data';
+import { IMerchant } from 'src/app/data/services/IMerchant';
+import { MerchantService } from 'src/app/data/services/merchant.service';
 
 @Component({
   selector: 'ps-data-grid-demo-home',
@@ -7,9 +10,50 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DataGridDemoHomeComponent implements OnInit {
 
-  constructor() { }
+  title = 'cdkDemo';
+  columns = ['id','name', 'address', 'commands']
+  merchantDataSource: IDataSource<IMerchant>;  
+  constructor(private  merchantService: MerchantService){
+    this.merchantDataSource = this.createDataSource();
 
-  ngOnInit(): void {
   }
 
+  
+
+
+  newMerchant(name: string) {
+    this.merchantDataSource.executeCommandByName('addMerchant', {
+      name: name
+    }).subscribe(
+      res => {
+        alert('it worked!');
+        this.merchantDataSource.refresh();
+      },
+      err => {
+        console.log(err);
+        alert('failed');
+      }
+    );
+  }
+
+  createDataSource(): IDataSource<IMerchant> {
+    return this.merchantService.createDataSource();
+  }
+
+  ngOnInit() {
+    this.merchantDataSource.loading$.subscribe(isLoading => {
+      console.log('merchant data source event loading', isLoading);
+    });
+
+    this.merchantDataSource.data$.subscribe(receivedData => {
+      console.log('new data is coming from the server', receivedData);
+    });
+    this.merchantDataSource.refresh();
+  }
+ 
+
+  
+
+
+
 }
diff --git a/src/app/data-grid-demo/data-grid-demo.module.ts b/src/app/data-grid-demo/data-grid-demo.module.ts
index 043c20e..c4b3530 100644
--- a/src/app/data-grid-demo/data-grid-demo.module.ts
+++ b/src/app/data-grid-demo/data-grid-demo.module.ts
@@ -4,6 +4,7 @@ import { CommonModule } from '@angular/common';
 import { DataGridDemoRoutingModule } from './data-grid-demo-routing.module';
 import { DataGridDemoHomeComponent } from './data-grid-demo-home/data-grid-demo-home.component';
 import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
+import { PaginationModule } from 'ngx-bootstrap/pagination';
 
 
 @NgModule({
@@ -11,7 +12,8 @@ import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
   imports: [
     CommonModule,
     DataGridDemoRoutingModule,
-    DataGridModule
+    DataGridModule,
+    PaginationModule
   ]
 })
 export class DataGridDemoModule { }
diff --git a/src/app/data/services/IChangeMerchantNameCommand.ts b/src/app/data/services/IChangeMerchantNameCommand.ts
index 7e93063..1441524 100644
--- a/src/app/data/services/IChangeMerchantNameCommand.ts
+++ b/src/app/data/services/IChangeMerchantNameCommand.ts
@@ -2,3 +2,7 @@ export interface IChangeMerchantNameCommand {
   merchantId: string;
   newName: string;
 }
+export interface IAddMerchantCommand {
+  name: string;
+  address: string;
+}
diff --git a/src/app/data/services/merchant.service.ts b/src/app/data/services/merchant.service.ts
index 0f8234f..d89fcf7 100644
--- a/src/app/data/services/merchant.service.ts
+++ b/src/app/data/services/merchant.service.ts
@@ -2,9 +2,9 @@ import { Injectable } from '@angular/core';
 import { GraphQLDataSourceService } from '@poweredsoft/ngx-data-apollo';
 import { IDataSource, DataSource } from '@poweredsoft/data';
 import { Apollo } from 'apollo-angular';
-import { gql } from 'graphql-tag';
+import  gql  from 'graphql-tag';
 import { of } from 'rxjs';
-import { IChangeMerchantNameCommand } from './IChangeMerchantNameCommand';
+import { IChangeMerchantNameCommand, IAddMerchantCommand } from './IChangeMerchantNameCommand';
 import { IMerchant } from './IMerchant';
 
 @Injectable({
@@ -16,7 +16,7 @@ export class MerchantService {
     private apollo: Apollo
   ) {}
 
-  createMerchantDataSource(): IDataSource<IMerchant> {
+  createDataSource(): IDataSource<IMerchant> {
     const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder<
       IMerchant,
       string
@@ -27,7 +27,7 @@ export class MerchantService {
       (model) => model.id,
       {
         page: 1,
-        pageSize: 4,
+        pageSize: 50,
       },
       true
     );
@@ -57,7 +57,56 @@ export class MerchantService {
       })
     );
 
+    builder.addMutation<IAddMerchantCommand, string>(
+      'addMerchant', //<-- command name
+      'addMerchant', //<-- graph ql mutation name
+      
+      // implementation of the command.
+      command => {
+        
+        return this.apollo.use('command').mutate<string>({
+          mutation: gql`
+            mutation executeAddMerchant($command: AddMerchantCommandInput) {
+              addMerchant(params: $command)
+            }
+          `,
+          variables: {
+            command: command,
+          },
+        });
+      },
+      
+      // viewModel -> transform to the form model for that command -> IChangeMerchantName
+      e => of(<IAddMerchantCommand>{
+        name: '',
+        address: ''
+      })
+    );
+
     const options = builder.create();
     return new DataSource<IMerchant>(options);
   }
+
+  /*
+  createDataSource(): DataSource<IMerchant> {
+    const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder<IMerchant, string>(
+      'merchants',
+      'GraphQLAdvanceQueryOfMerchantInput',
+      'id, name, address',
+      (model) => model.id,
+      {
+        page: 1,
+        pageSize: 4,
+        sorts: [
+          {
+            path: 'name',
+            ascending: true
+          }
+        ]
+      }, 
+      true
+    );
+
+    return new DataSource<IMerchant>(builder.create());
+  }*/
 }