diff --git a/src/app/pagination-demo/pagination-demo-routing.module.ts b/src/app/pagination-demo/pagination-demo-routing.module.ts
new file mode 100644
index 0000000..2fc85ac
--- /dev/null
+++ b/src/app/pagination-demo/pagination-demo-routing.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { PaginationDemoComponent } from './pagination-demo/pagination/pagination-demo.component';
+
+
+const routes: Routes = [{
+ path: '',
+ component: PaginationDemoComponent
+}];
+
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule]
+})
+export class PaginationDemoRoutingModule { }
diff --git a/src/app/pagination-demo/pagination-demo.module.ts b/src/app/pagination-demo/pagination-demo.module.ts
new file mode 100644
index 0000000..ba62201
--- /dev/null
+++ b/src/app/pagination-demo/pagination-demo.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { PaginationDemoRoutingModule } from './pagination-demo-routing.module';
+import { PaginationDemoComponent } from './pagination-demo/pagination/pagination-demo.component';
+import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
+import { FormGroupCommandModalModule,psbxPaginationModule, CommandModalModule } from '@poweredsoft/ngx-bootstrap';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+
+
+@NgModule({
+ declarations: [PaginationDemoComponent],
+ imports: [
+ CommonModule,
+ PaginationDemoRoutingModule,
+ psbxPaginationModule,
+ DataGridModule,
+ CommandModalModule,
+ FormsModule
+ ]
+})
+export class PaginationDemoModule { }
diff --git a/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html
new file mode 100644
index 0000000..86d4878
--- /dev/null
+++ b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+ ID
+ {{model.id}}
+
+
+ Name
+ {{model.name}}
+
+
+ Address
+ {{model.address}}
+
+
+
+ Actions
+
+
+
+
+
+
+
+
+
+
+ New Name
+
+
+
+
+ Name
+
+ Address
+
+
\ No newline at end of file
diff --git a/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.scss b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts
new file mode 100644
index 0000000..39af576
--- /dev/null
+++ b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts
@@ -0,0 +1,51 @@
+import { Component, OnInit } from '@angular/core';
+import { IDataSource } from '@poweredsoft/data';
+import { IMerchant } from 'src/app/data/services/IMerchant';
+import { MerchantService } from 'src/app/data/services/merchant.service';
+import { IModelFormCreateEvent } from '@poweredsoft/ngx-bootstrap';
+import { FormBuilder, Validators } from '@angular/forms';
+
+@Component({
+ selector: 'ps-pagination',
+ templateUrl: './pagination-demo.component.html',
+ styleUrls: ['./pagination-demo.component.scss']
+})
+export class PaginationDemoComponent implements OnInit {
+ columns = ['id','name', 'address', 'commands']
+ merchantDataSource: IDataSource
;
+ constructor(private merchantService: MerchantService){
+ this.merchantDataSource = this.createDataSource();
+
+ }
+
+ pages:any;
+
+ 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 {
+ return this.merchantService.createDataSource();
+ }
+
+ ngOnInit() {
+ this.merchantDataSource.refresh();
+ this.merchantDataSource.data$.subscribe(newData => {
+ if (newData)
+ this.pages = new Array(newData.numberOfPages);
+ });
+ }
+
+
+}