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..b8d8cc1 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,17 @@
 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';
 
 
 
 @NgModule({
-  declarations: [DataGridComponent],
+  declarations: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective],
   imports: [
     CommonModule
   ],
-  exports: [DataGridComponent]
+  exports: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective]
 })
 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..df30d05 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,36 @@
+<p>some content is showing up here!</p>
+
 <table>
-    <tr>
-        <th>some header</th>
-    </tr>
+    <thead>
+        <tr>
+            <th *ngFor="let column of columns">
+                <p *ngIf="hasHeaderTemplate(column)">
+                    <ng-container
+                      [ngTemplateOutlet]="getColumnHeaderTemplate(column)"
+                    ></ng-container>
+                </p>
+            </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>
 </table>
+
+
+
+<!-- test content !!! -->
\ No newline at end of file
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..6ae3149 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,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ContentChildren, QueryList, Input } from '@angular/core';
+import { IQueryExecutionResult, IQueryExecutionGroupResult, IDataSource } from '@poweredsoft/data';
+import { DataGridColDirective } from '../directives/DataGridCol.directive';
 
 @Component({
   selector: 'ps-data-grid',
@@ -7,9 +9,56 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DataGridComponent implements OnInit {
 
+  latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
+  pages: any[];
+
+  @ContentChildren(DataGridColDirective) headers: QueryList<DataGridColDirective>;
+  
+  @Input() columns: string[];
+  @Input() dataSource: IDataSource<any>;
   constructor() { }
 
   ngOnInit(): void {
+    this.dataSource.data$.subscribe(newData => {
+      this.latestResult = newData;
+      if (newData)
+        this.pages = new Array(newData.numberOfPages);
+    });
   }
 
+  getColumn(columnName: string) {
+    
+    const ret = this.headers.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/DataGridCell.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/DataGridCell.directive.ts
new file mode 100644
index 0000000..cd57380
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/DataGridCell.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/DataGridCol.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/DataGridCol.directive.ts
new file mode 100644
index 0000000..4a35aff
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/DataGridCol.directive.ts
@@ -0,0 +1,16 @@
+import { Directive, Input, ContentChild } from '@angular/core';
+import { DataGridColHeaderDirective } from './DataGridColHeader.directive';
+import { DataGridCellDirective } from './DataGridCell.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/DataGridColHeader.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/DataGridColHeader.directive.ts
new file mode 100644
index 0000000..f78c34f
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/DataGridColHeader.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/public-api.ts b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
index b671c28..497e87f 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
+++ b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
@@ -3,4 +3,7 @@
  */
 
 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/DataGridCell.directive';
+export * from './lib/data-grid/directives/DataGridCol.directive';
+export * from './lib/data-grid/directives/DataGridColHeader.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..82be427 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,24 @@
     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">
+    <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">
+        <p *psDataGridColHeader>Actions</p>
+        <ng-container *psDataGridCell="let model">
+            <button class="btn btn-primary mr-2">{{model.name}}</button>
+        </ng-container>
+    </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..c0aaa30 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,9 @@
 import { Component, OnInit } from '@angular/core';
+import { DataSource } from '@poweredsoft/data';
+import { IMerchant } from 'src/app/data/services/IMerchant';
+import { GraphQLDataSourceService } from '@poweredsoft/ngx-data-apollo';
+import { of } from 'rxjs';
+import { MerchantService } from 'src/app/data/services/merchant.service';
 
 @Component({
   selector: 'ps-data-grid-demo-home',
@@ -7,9 +12,33 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DataGridDemoHomeComponent implements OnInit {
 
-  constructor() { }
+  title = 'cdkDemo';
+  columns = ['id','name', 'address', 'commands']
+  merchantDataSource: DataSource<IMerchant>;
+  constructor(private  merchantService: MerchantService){
+    this.merchantDataSource = this.createDataSource();
 
-  ngOnInit(): void {
   }
 
+  createDataSource(): DataSource<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/services/merchant.service.ts b/src/app/data/services/merchant.service.ts
index 0f8234f..71b3ede 100644
--- a/src/app/data/services/merchant.service.ts
+++ b/src/app/data/services/merchant.service.ts
@@ -2,7 +2,7 @@ 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 { IMerchant } from './IMerchant';
@@ -16,11 +16,53 @@ export class MerchantService {
     private apollo: Apollo
   ) {}
 
-  createMerchantDataSource(): IDataSource<IMerchant> {
-    const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder<
-      IMerchant,
-      string
-    >(
+//   createMerchantDataSource(): IDataSource<IMerchant> {
+//     const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder<
+//       IMerchant,
+//       string
+//     >(
+//       'merchants',
+//       'GraphQLAdvanceQueryOfMerchantInput',
+//       'id, name, address',
+//       (model) => model.id,
+//       {
+//         page: 3,
+//         pageSize: 10,
+//       },
+//       true
+//     );
+
+//     builder.addMutation<IChangeMerchantNameCommand, string>(
+//       'changeMerchantName', //<-- command name
+//       'changeMerchantName', //<-- graph ql mutation name
+      
+//       // implementation of the command.
+//       command => {
+//         return this.apollo.use('command').mutate<string>({
+//           mutation: gql`
+//             mutation executeChangeName($command: changeMerchantNameInput) {
+//               changeMerchantName(params: $command)
+//             }
+//           `,
+//           variables: {
+//             command: command,
+//           },
+//         });
+//       },
+      
+//       // viewModel -> transform to the form model for that command -> IChangeMerchantName
+//       e => of(<IChangeMerchantNameCommand>{
+//         merchantId: e.model.id,
+//         newName: e.model.name,
+//       })
+//     );
+
+//     const options = builder.create();
+//     return new DataSource<IMerchant>(options);
+//   }
+
+  createDataSource(): DataSource<IMerchant> {
+    const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder<IMerchant, string>(
       'merchants',
       'GraphQLAdvanceQueryOfMerchantInput',
       'id, name, address',
@@ -28,36 +70,16 @@ export class MerchantService {
       {
         page: 1,
         pageSize: 4,
-      },
+        sorts: [
+          {
+            path: 'name',
+            ascending: true
+          }
+        ]
+      }, 
       true
     );
 
-    builder.addMutation<IChangeMerchantNameCommand, string>(
-      'changeMerchantName', //<-- command name
-      'changeMerchantName', //<-- graph ql mutation name
-      
-      // implementation of the command.
-      command => {
-        return this.apollo.use('command').mutate<string>({
-          mutation: gql`
-            mutation executeChangeName($command: changeMerchantNameInput) {
-              changeMerchantName(params: $command)
-            }
-          `,
-          variables: {
-            command: command,
-          },
-        });
-      },
-      
-      // viewModel -> transform to the form model for that command -> IChangeMerchantName
-      e => of(<IChangeMerchantNameCommand>{
-        merchantId: e.model.id,
-        newName: e.model.name,
-      })
-    );
-
-    const options = builder.create();
-    return new DataSource<IMerchant>(options);
+    return new DataSource<IMerchant>(builder.create());
   }
 }