first test done!

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>
+<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>

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();
+  }
+ 
+
+  
+
+
+
 }

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());
   }
 }