diff --git a/src/app/modules/angular-slickgrid/components/__tests__/slick-pagination-without-translate.component.spec.ts b/src/app/modules/angular-slickgrid/components/__tests__/slick-pagination-without-translate.component.spec.ts
index afdd931b7..fe2c7de14 100644
--- a/src/app/modules/angular-slickgrid/components/__tests__/slick-pagination-without-translate.component.spec.ts
+++ b/src/app/modules/angular-slickgrid/components/__tests__/slick-pagination-without-translate.component.spec.ts
@@ -140,10 +140,12 @@ describe('without ngx-translate', () => {
     setTimeout(() => {
       fixture.detectChanges();
       const elm = document.querySelector('.slick-pagination');
-      const pageInfo = fixture.debugElement.query(By.css('.slick-pagination-count')).nativeElement;
+      const pageInfoFromTo = fixture.debugElement.query(By.css('.page-info-from-to')).nativeElement;
+      const pageInfoTotalItems = fixture.debugElement.query(By.css('.page-info-total-items')).nativeElement;
 
       expect(elm.innerHTML).toContain('slick-pagination-nav');
-      expect(pageInfo.innerHTML).toBe('<span>5-10 of 100 items</span>');
+      expect(pageInfoFromTo.innerHTML).toBe('<span data-test="item-from">5</span>-<span data-test="item-to">10</span> of ');
+      expect(pageInfoTotalItems.innerHTML).toBe('<span data-test="total-items">100</span> items ');
       done();
     }, 10);
   });
diff --git a/src/app/modules/angular-slickgrid/components/__tests__/slick-pagination.component.spec.ts b/src/app/modules/angular-slickgrid/components/__tests__/slick-pagination.component.spec.ts
index d9bd061c7..e87fd6103 100644
--- a/src/app/modules/angular-slickgrid/components/__tests__/slick-pagination.component.spec.ts
+++ b/src/app/modules/angular-slickgrid/components/__tests__/slick-pagination.component.spec.ts
@@ -147,10 +147,27 @@ describe('App Component', () => {
       fixture.detectChanges();
 
       const elm = document.querySelector('.slick-pagination');
-      const pageInfo = fixture.debugElement.query(By.css('.slick-pagination-count')).nativeElement;
+      const pageInfoFromTo = fixture.debugElement.query(By.css('.page-info-from-to')).nativeElement;
+      const pageInfoTotalItems = fixture.debugElement.query(By.css('.page-info-total-items')).nativeElement;
 
       expect(elm.innerHTML).toContain('slick-pagination-nav');
-      expect(pageInfo.innerHTML).toBe('<span>5-10 de 100 éléments</span>');
+      expect(pageInfoFromTo.innerHTML).toBe('<span data-test="item-from">5</span>-<span data-test="item-to">10</span> de ');
+      expect(pageInfoTotalItems.innerHTML).toBe('<span data-test="total-items">100</span> éléments ');
+      expect(component.totalItems).toBe(100);
+    });
+
+    it('should create a the Slick-Pagination component in the DOM and expect different locale when changed', () => {
+      translate.use('en');
+      fixture.detectChanges();
+
+      const elm = document.querySelector('.slick-pagination');
+      const pageInfoFromTo = fixture.debugElement.query(By.css('.page-info-from-to')).nativeElement;
+      const pageInfoTotalItems = fixture.debugElement.query(By.css('.page-info-total-items')).nativeElement;
+
+      expect(translate.currentLang).toBe('en');
+      expect(elm.innerHTML).toContain('slick-pagination-nav');
+      expect(pageInfoFromTo.innerHTML).toBe('<span data-test="item-from">5</span>-<span data-test="item-to">10</span> of ');
+      expect(pageInfoTotalItems.innerHTML).toBe('<span data-test="total-items">100</span> items ');
       expect(component.totalItems).toBe(100);
     });
 
diff --git a/src/app/modules/angular-slickgrid/components/slick-pagination.component.html b/src/app/modules/angular-slickgrid/components/slick-pagination.component.html
index 5fabeb440..d4762b2f7 100644
--- a/src/app/modules/angular-slickgrid/components/slick-pagination.component.html
+++ b/src/app/modules/angular-slickgrid/components/slick-pagination.component.html
@@ -4,12 +4,12 @@
       <ul class="pagination">
         <li class="page-item" [ngClass]="(pager?.pageNumber === 1 || pager?.totalItems === 0) ? 'disabled' : ''">
           <a class="page-link icon-seek-first fa fa-angle-double-left" aria-label="First"
-             (click)="changeToFirstPage($event)">
+            (click)="changeToFirstPage($event)">
           </a>
         </li>
         <li class="page-item" [ngClass]="(pager?.pageNumber === 1 || pager?.totalItems === 0) ? 'disabled' : ''">
           <a class="page-link icon-seek-prev fa fa-angle-left" aria-label="Previous"
-             (click)="changeToPreviousPage($event)">
+            (click)="changeToPreviousPage($event)">
           </a>
         </li>
       </ul>
@@ -17,23 +17,23 @@
 
     <div class="slick-page-number">
       <span>{{textPage}}</span>
-      <input type="text" class="form-control" [value]="pager?.pageNumber" size="1" [readOnly]="pager?.totalItems === 0"
-             (change)="changeToCurrentPage($event)">
-      <span>{{textOf}}</span><span> {{pager?.pageCount}}</span>
+      <input type="text" class="form-control" data-test="page-number-input" [value]="pager?.pageNumber" size="1"
+        [readOnly]="pager?.totalItems === 0" (change)="changeToCurrentPage($event)">
+      <span>{{textOf}}</span><span data-test="page-count"> {{pager?.pageCount}}</span>
     </div>
 
     <nav aria-label="Page navigation">
       <ul class="pagination">
         <li class="page-item"
-            [ngClass]="(pager?.pageNumber === pager?.pageCount || pager?.totalItems === 0) ? 'disabled' : ''">
+          [ngClass]="(pager?.pageNumber === pager?.pageCount || pager?.totalItems === 0) ? 'disabled' : ''">
           <a class="page-link icon-seek-next text-center fa fa-lg fa-angle-right" aria-label="Next"
-             (click)="changeToNextPage($event)">
+            (click)="changeToNextPage($event)">
           </a>
         </li>
         <li class="page-item"
-            [ngClass]="(pager?.pageNumber === pager?.pageCount || pager?.totalItems === 0) ? 'disabled' : ''">
+          [ngClass]="(pager?.pageNumber === pager?.pageCount || pager?.totalItems === 0) ? 'disabled' : ''">
           <a class="page-link icon-seek-end fa fa-lg fa-angle-double-right" aria-label="Last"
-             (click)="changeToLastPage($event)">
+            (click)="changeToLastPage($event)">
           </a>
         </li>
       </ul>
@@ -45,7 +45,15 @@
     </select>
     <span>{{textItemsPerPage}}</span>,
     <span class="slick-pagination-count">
-      <span>{{pager?.from}}-{{pager?.to}} {{textOf}} {{pager?.totalItems}} {{textItems}}</span>
+      <span *ngIf="pager?.totalItems">
+        <span class="page-info-from-to">
+          <span data-test="item-from">{{pager?.from}}</span>-<span data-test="item-to">{{pager?.to}}</span>
+          {{textOf}}
+        </span>
+      </span>
+      <span class="page-info-total-items">
+        <span data-test="total-items">{{pager?.totalItems}}</span> {{textItems}}
+      </span>
     </span>
   </span>
 </div>
diff --git a/src/app/modules/angular-slickgrid/filters/compoundInputFilter.ts b/src/app/modules/angular-slickgrid/filters/compoundInputFilter.ts
index d57706bef..88c46cf56 100644
--- a/src/app/modules/angular-slickgrid/filters/compoundInputFilter.ts
+++ b/src/app/modules/angular-slickgrid/filters/compoundInputFilter.ts
@@ -139,7 +139,7 @@ export class CompoundInputFilter implements Filter {
     if (this.columnFilter && this.columnFilter.placeholder) {
       placeholder = this.columnFilter.placeholder;
     }
-    return `<input type="${this._inputType || 'text'}" role="presentation"  autocomplete="off" class="form-control" placeholder="${placeholder}" /><span></span>`;
+    return `<input type="${this._inputType || 'text'}" role="presentation"  autocomplete="off" class="form-control compound-input" placeholder="${placeholder}" /><span></span>`;
   }
 
   private buildSelectOperatorHtmlString() {
@@ -205,7 +205,7 @@ export class CompoundInputFilter implements Filter {
         <div class="input-group-addon input-group-prepend operator">
           <select class="form-control"></select>
         </div>
-        <input class="form-control" type="text" />
+        <input class="form-control compount-input" type="text" />
       </div>
     */
     $operatorInputGroupAddon.append(this.$selectOperatorElm);
diff --git a/src/app/modules/angular-slickgrid/formatters/checkmarkFormatter.ts b/src/app/modules/angular-slickgrid/formatters/checkmarkFormatter.ts
index a4cbcbf69..c5109941e 100644
--- a/src/app/modules/angular-slickgrid/formatters/checkmarkFormatter.ts
+++ b/src/app/modules/angular-slickgrid/formatters/checkmarkFormatter.ts
@@ -4,4 +4,4 @@ import { parseBoolean } from '../services/utilities';
 
 export const checkmarkFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => {
   return parseBoolean(value) ? `<i class="fa fa-check checkmark-icon" aria-hidden="true"></i>` : '';
-}
+};
diff --git a/src/app/modules/angular-slickgrid/services/__tests__/pagination.service.spec.ts b/src/app/modules/angular-slickgrid/services/__tests__/pagination.service.spec.ts
index e2b95c7d5..5bdf996f0 100644
--- a/src/app/modules/angular-slickgrid/services/__tests__/pagination.service.spec.ts
+++ b/src/app/modules/angular-slickgrid/services/__tests__/pagination.service.spec.ts
@@ -132,12 +132,12 @@ describe('PaginationService', () => {
   });
 
   describe('changeItemPerPage method', () => {
-    it('should be on page 0 when total items is 0', () => {
+    it('should be on page 1 when total items is 0', () => {
       mockGridOption.pagination.totalItems = 0;
       service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.changeItemPerPage(30);
 
-      expect(service.getCurrentPageNumber()).toBe(0);
+      expect(service.getCurrentPageNumber()).toBe(1);
       expect(service.getCurrentItemPerPageCount()).toBe(30);
     });
 
@@ -403,7 +403,7 @@ describe('PaginationService', () => {
   });
 
   describe('recalculateFromToIndexes method', () => {
-    it('should recalculate the From/To as 0 when total items is 0', () => {
+    it('should recalculate the From/To as 1 when total items is 0', () => {
       mockGridOption.pagination.pageSize = 25;
       mockGridOption.pagination.pageNumber = 2;
       mockGridOption.pagination.totalItems = 0;
@@ -411,8 +411,8 @@ describe('PaginationService', () => {
       service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.recalculateFromToIndexes();
 
-      expect(service.pager.from).toBe(0);
-      expect(service.pager.to).toBe(0);
+      expect(service.pager.from).toBe(1);
+      expect(service.pager.to).toBe(1);
     });
 
     it('should recalculate the From/To within range', () => {
diff --git a/src/app/modules/angular-slickgrid/services/pagination.service.ts b/src/app/modules/angular-slickgrid/services/pagination.service.ts
index 5d0f747df..90b678b2b 100644
--- a/src/app/modules/angular-slickgrid/services/pagination.service.ts
+++ b/src/app/modules/angular-slickgrid/services/pagination.service.ts
@@ -34,7 +34,7 @@ export class PaginationService {
   private _dataFrom = 1;
   private _dataTo = 1;
   private _itemsPerPage: number;
-  private _pageCount = 0;
+  private _pageCount = 1;
   private _pageNumber = 1;
   private _totalItems = 0;
   private _availablePageSizes: number[];
@@ -54,10 +54,10 @@ export class PaginationService {
   get pager(): Pager {
     return {
       from: this._dataFrom,
-      to: this._dataTo,
+      to: this._dataTo || 1,
       itemsPerPage: this._itemsPerPage,
-      pageCount: this._pageCount,
-      pageNumber: this._pageNumber,
+      pageCount: this._pageCount || 1,
+      pageNumber: this._pageNumber || 1,
       availablePageSizes: this._availablePageSizes,
       totalItems: this._totalItems,
     };
@@ -109,8 +109,8 @@ export class PaginationService {
   }
 
   changeItemPerPage(itemsPerPage: number, event?: any): Promise<any> {
+    this._pageNumber = 1;
     this._pageCount = Math.ceil(this._totalItems / itemsPerPage);
-    this._pageNumber = (this._totalItems > 0) ? 1 : 0;
     this._itemsPerPage = itemsPerPage;
     return this.processOnPageChanged(this._pageNumber, event);
   }
@@ -249,9 +249,9 @@ export class PaginationService {
 
   recalculateFromToIndexes() {
     if (this._totalItems === 0) {
-      this._dataFrom = 0;
-      this._dataTo = 0;
-      this._pageNumber = 0;
+      this._dataFrom = 1;
+      this._dataTo = 1;
+      this._pageNumber = 1;
     } else {
       this._dataFrom = this._pageNumber > 1 ? ((this._pageNumber * this._itemsPerPage) - this._itemsPerPage + 1) : 1;
       this._dataTo = (this._totalItems < this._itemsPerPage) ? this._totalItems : (this._pageNumber * this._itemsPerPage);
diff --git a/src/app/modules/angular-slickgrid/styles/_variables.scss b/src/app/modules/angular-slickgrid/styles/_variables.scss
index 7f553c81a..3440f9dec 100644
--- a/src/app/modules/angular-slickgrid/styles/_variables.scss
+++ b/src/app/modules/angular-slickgrid/styles/_variables.scss
@@ -351,7 +351,7 @@ $pagination-page-input-padding:           2px !default;
 $pagination-page-select-border-radius:    3px !default;
 $pagination-page-select-padding:          0 0 2px 2px !default;
 $pagination-page-select-height:           32px !default;
-$pagination-page-select-width:            54px !default;
+$pagination-page-select-width:            60px !default;
 $pagination-page-select-font-size:        ($font-size-base - 2px) !default;
 $pagination-text-color:                   #808080 !default;
 
diff --git a/src/app/modules/angular-slickgrid/styles/slick-plugins.scss b/src/app/modules/angular-slickgrid/styles/slick-plugins.scss
index 6d8f700c3..75f26c509 100644
--- a/src/app/modules/angular-slickgrid/styles/slick-plugins.scss
+++ b/src/app/modules/angular-slickgrid/styles/slick-plugins.scss
@@ -376,6 +376,9 @@ input.search-filter {
 .search-filter {
     input {
         font-family: $filter-placeholder-font-family;
+        &.compound-input {
+          border-radius: $compound-filter-border-radius !important;
+        }
     }
 }
 
diff --git a/test/cypress/integration/example5.spec.js b/test/cypress/integration/example5.spec.js
index 28e43de54..d28d13ee4 100644
--- a/test/cypress/integration/example5.spec.js
+++ b/test/cypress/integration/example5.spec.js
@@ -24,6 +24,22 @@ describe('Example 5 - OData Grid', () => {
       // wait for the query to finish
       cy.get('[data-test=status]').should('contain', 'done');
 
+      cy.get('[data-test=page-number-input]')
+        .invoke('val')
+        .then(pageNumber => expect(pageNumber).to.eq('3'));
+
+      cy.get('[data-test=page-count]')
+        .contains('3');
+
+      cy.get('[data-test=item-from]')
+        .contains('41');
+
+      cy.get('[data-test=item-to]')
+        .contains('50');
+
+      cy.get('[data-test=total-items]')
+        .contains('50');
+
       cy.get('[data-test=odata-query-result]')
         .should(($span) => {
           expect($span.text()).to.eq(`$inlinecount=allpages&$top=20&$skip=40&$orderby=Name asc&$filter=(Gender eq 'male')`);
@@ -33,9 +49,26 @@ describe('Example 5 - OData Grid', () => {
     it('should change Pagination to first page with 10 items', () => {
       cy.get('#items-per-page-label').select('10');
 
-      // wait for the query to finish
+      // wait for the query to start and finish
+      cy.get('[data-test=status]').should('contain', 'processing...');
       cy.get('[data-test=status]').should('contain', 'done');
 
+      cy.get('[data-test=page-number-input]')
+        .invoke('val')
+        .then(pageNumber => expect(pageNumber).to.eq('1'));
+
+      cy.get('[data-test=page-count]')
+        .contains('5');
+
+      cy.get('[data-test=item-from]')
+        .contains('1');
+
+      cy.get('[data-test=item-to]')
+        .contains('10');
+
+      cy.get('[data-test=total-items]')
+        .contains('50');
+
       cy.get('[data-test=odata-query-result]')
         .should(($span) => {
           expect($span.text()).to.eq(`$inlinecount=allpages&$top=10&$orderby=Name asc&$filter=(Gender eq 'male')`);
@@ -48,6 +81,22 @@ describe('Example 5 - OData Grid', () => {
       // wait for the query to finish
       cy.get('[data-test=status]').should('contain', 'done');
 
+      cy.get('[data-test=page-number-input]')
+        .invoke('val')
+        .then(pageNumber => expect(pageNumber).to.eq('5'));
+
+      cy.get('[data-test=page-count]')
+        .contains('5');
+
+      cy.get('[data-test=item-from]')
+        .contains('41');
+
+      cy.get('[data-test=item-to]')
+        .contains('50');
+
+      cy.get('[data-test=total-items]')
+        .contains('50');
+
       cy.get('[data-test=odata-query-result]')
         .should(($span) => {
           expect($span.text()).to.eq(`$inlinecount=allpages&$top=10&$skip=40&$orderby=Name asc&$filter=(Gender eq 'male')`);
@@ -61,6 +110,22 @@ describe('Example 5 - OData Grid', () => {
       // wait for the query to finish
       cy.get('[data-test=status]').should('contain', 'done');
 
+      cy.get('[data-test=page-number-input]')
+        .invoke('val')
+        .then(pageNumber => expect(pageNumber).to.eq('1'));
+
+      cy.get('[data-test=page-count]')
+        .contains('5');
+
+      cy.get('[data-test=item-from]')
+        .contains('1');
+
+      cy.get('[data-test=item-to]')
+        .contains('10');
+
+      cy.get('[data-test=total-items]')
+        .contains('50');
+
       cy.get('[data-test=odata-query-result]')
         .should(($span) => {
           expect($span.text()).to.eq(`$inlinecount=allpages&$top=10&$orderby=Name asc&$filter=(Gender eq 'male')`);
@@ -74,6 +139,22 @@ describe('Example 5 - OData Grid', () => {
       // wait for the query to finish
       cy.get('[data-test=status]').should('contain', 'done');
 
+      cy.get('[data-test=page-number-input]')
+        .invoke('val')
+        .then(pageNumber => expect(pageNumber).to.eq('5'));
+
+      cy.get('[data-test=page-count]')
+        .contains('5');
+
+      cy.get('[data-test=item-from]')
+        .contains('41');
+
+      cy.get('[data-test=item-to]')
+        .contains('50');
+
+      cy.get('[data-test=total-items]')
+        .contains('50');
+
       cy.get('[data-test=odata-query-result]')
         .should(($span) => {
           expect($span.text()).to.eq(`$inlinecount=allpages&$top=10&$skip=40&$orderby=Name asc&$filter=(Gender eq 'male')`);
@@ -96,6 +177,22 @@ describe('Example 5 - OData Grid', () => {
       // wait for the query to finish
       cy.get('[data-test=status]').should('contain', 'done');
 
+      cy.get('[data-test=page-number-input]')
+        .invoke('val')
+        .then(pageNumber => expect(pageNumber).to.eq('1'));
+
+      cy.get('[data-test=page-count]')
+        .contains('10');
+
+      cy.get('[data-test=item-from]')
+        .contains('1');
+
+      cy.get('[data-test=item-to]')
+        .contains('10');
+
+      cy.get('[data-test=total-items]')
+        .contains('100');
+
       cy.get('[data-test=odata-query-result]')
         .should(($span) => {
           expect($span.text()).to.eq(`$inlinecount=allpages&$top=10&$orderby=Name asc`);
@@ -205,7 +302,8 @@ describe('Example 5 - OData Grid', () => {
     it('should change Pagination to first page with 10 items', () => {
       cy.get('#items-per-page-label').select('10');
 
-      // wait for the query to finish
+      // wait for the query to start and finish
+      cy.get('[data-test=status]').should('contain', 'processing...');
       cy.get('[data-test=status]').should('contain', 'done');
 
       cy.get('[data-test=odata-query-result]')
@@ -308,4 +406,34 @@ describe('Example 5 - OData Grid', () => {
         .should('have.length', 1);
     });
   });
+
+  describe('General Pagination Behaviors', () => {
+    it('should display page 1 of 1 but hide pagination from/to numbers when filtered data returns an empty dataset', () => {
+      cy.get('.search-filter.filter-name')
+        .find('input')
+        .clear()
+        .type('xyz');
+
+      cy.get('[data-test=page-number-input]')
+        .invoke('val')
+        .then(pageNumber => expect(pageNumber).to.eq('1'));
+
+      cy.get('[data-test=page-count]')
+        .contains('1');
+
+      cy.get('[data-test=item-from]')
+        .should('not.exist');
+
+      cy.get('[data-test=item-to]')
+        .should('not.exist');
+
+      cy.get('[data-test=total-items]')
+        .contains('0');
+
+      cy.get('[data-test=odata-query-result]')
+        .should(($span) => {
+          expect($span.text()).to.eq(`$top=10&$filter=(contains(Name, 'xyz'))`);
+        });
+    });
+  });
 });