feat: Add refresh button to the footer

Author: sajjadkarimi

docs/api/table/inputs.md

@@ -30,6 +30,7 @@ pagerLeftArrow: 'datatable-icon-left',
 pagerRightArrow: 'datatable-icon-right',
 pagerPrevious: 'datatable-icon-prev',
 pagerNext: 'datatable-icon-skip'
+refresh: 'datatable-icon-refresh'
 ```
 
 ## `externalPaging`

projects/swimlane/ngx-datatable/src/lib/components/datatable.component.html

@@ -78,7 +78,9 @@
     [selectedCount]="selected.length"
     [selectedMessage]="!!selectionType && messages.selectedMessage"
     [pagerNextIcon]="cssClasses.pagerNext"
+    [refreshIcon]="cssClasses.refresh"
     (page)="onFooterPage($event)"
+    (refresh)="onFooterRefresh($event)"
   >
   </datatable-footer>
 </div>

projects/swimlane/ngx-datatable/src/lib/components/datatable.component.ts

@@ -309,7 +309,8 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
     pagerLeftArrow: 'datatable-icon-left',
     pagerRightArrow: 'datatable-icon-right',
     pagerPrevious: 'datatable-icon-prev',
-    pagerNext: 'datatable-icon-skip'
+    pagerNext: 'datatable-icon-skip',
+    refresh: 'datatable-icon-refresh'
   };
 
   /**
@@ -436,6 +437,11 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
    */
   @Output() page: EventEmitter<any> = new EventEmitter();
 
+  /**
+ * The table was refreshed
+ */
+  @Output() refresh: EventEmitter<any> = new EventEmitter();
+
   /**
    * Columns were re-ordered.
    */
@@ -919,6 +925,28 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
     }
   }
 
+    /**
+   * The footer triggered a refresh event.
+   */
+    onFooterRefresh(event: any) {
+      this.offset = event.page - 1;
+      this.bodyComponent.updateOffsetY(this.offset);
+  
+      this.refresh.emit({
+        count: this.count,
+        pageSize: this.pageSize,
+        limit: this.limit,
+        offset: this.offset
+      });
+  
+      if (this.selectAllRowsOnPage) {
+        this.selected = [];
+        this.select.emit({
+          selected: this.selected
+        });
+      }
+    }
+
   /**
    * Recalculates the sizes of the page
    */

projects/swimlane/ngx-datatable/src/lib/components/footer/footer.component.spec.ts

@@ -212,6 +212,7 @@ describe('DataTableFooterComponent', () => {
       [selectedCount]="selectedCount"
       [selectedMessage]="selectedMessage"
       [pagerNextIcon]="pagerNextIcon"
+      [refreshIcon]="refreshIcon"
       (page)="onPageEvent($event)"
     >
     </datatable-footer>
@@ -243,6 +244,7 @@ class TestFixtureComponent {
   pagerRightArrowIcon: string;
   pagerPreviousIcon: string;
   pagerNextIcon: string;
+  refreshIcon: string;
   totalMessage: string;
   footerTemplate: { template: TemplateRef<any> };
   selectedCount: number;
@@ -274,6 +276,7 @@ class DataTablePagerComponentMock {
   @Input() pagerRightArrowIcon: string;
   @Input() pagerPreviousIcon: string;
   @Input() pagerNextIcon: string;
+  @Input() refreshIcon: string;
   @Input() page: number;
   @Input() size: number;
   @Input() count: number;

projects/swimlane/ngx-datatable/src/lib/components/footer/footer.component.ts

@@ -23,6 +23,9 @@ import { DatatableFooterDirective } from './footer.directive';
       <div class="page-count" *ngIf="!footerTemplate">
         <span *ngIf="selectedMessage"> {{ selectedCount?.toLocaleString() }} {{ selectedMessage }} / </span>
         {{ rowCount?.toLocaleString() }} {{ totalMessage }}
+        <a role="button" aria-label="refresh" href="javascript:void(0)" (click)="reload()">
+          <i class="{{ refreshIcon }}"></i>
+        </a>
       </div>
       <datatable-pager
         *ngIf="!footerTemplate"
@@ -53,13 +56,21 @@ export class DataTableFooterComponent {
   @Input() pagerRightArrowIcon: string;
   @Input() pagerPreviousIcon: string;
   @Input() pagerNextIcon: string;
+  @Input() refreshIcon: string;
   @Input() totalMessage: string;
   @Input() footerTemplate: DatatableFooterDirective;
 
   @Input() selectedCount: number = 0;
   @Input() selectedMessage: string | boolean;
 
   @Output() page: EventEmitter<any> = new EventEmitter();
+  @Output() refresh: EventEmitter<any> = new EventEmitter();
+
+  reload(): void {
+    this.refresh.emit({
+      page: this.curPage
+    })
+  }
 
   get isVisible(): boolean {
     return this.rowCount / this.pageSize > 1;

projects/swimlane/ngx-datatable/src/lib/components/footer/footer.directive.ts

@@ -10,6 +10,7 @@ export class DatatableFooterDirective {
   @Input() pagerRightArrowIcon: string;
   @Input() pagerPreviousIcon: string;
   @Input() pagerNextIcon: string;
+  @Input() refreshIcon: string;
 
   @Input('template')
   _templateInput: TemplateRef<any>;

projects/swimlane/ngx-datatable/src/lib/themes/bootstrap.scss

@@ -49,6 +49,26 @@ bootstrap table theme
       line-height: 50px;
       height: 50px;
       padding: 0 1.2rem;
+
+      a {
+        height: 22px;
+        min-width: 24px;
+        line-height: 22px;
+        padding: 4px 8px;
+        border-radius: 3px;
+        margin: 0 3px;
+        text-align: center;
+        vertical-align: top;
+        text-decoration: none;
+        vertical-align: middle;
+        color: #ededed;
+        font-size: 16px;
+
+        &:hover {
+            background-color: #545454;
+            font-weight: bold;
+        }
+      }
     }
     .datatable-pager {
       margin: 0 10px;
@@ -80,6 +100,8 @@ bootstrap table theme
         vertical-align: bottom;
         color: #ededed;
       }
+
+      .datatable-icon-refresh,
       .datatable-icon-left,
       .datatable-icon-skip,
       .datatable-icon-right,

projects/swimlane/ngx-datatable/src/lib/themes/dark.scss

@@ -59,6 +59,26 @@
       line-height: 50px;
       height: 50px;
       padding: 0 1.2rem;
+      
+      a {
+        height: 22px;
+        min-width: 24px;
+        line-height: 22px;
+        padding: 4px 8px;
+        border-radius: 3px;
+        margin: 0 3px;
+        text-align: center;
+        vertical-align: top;
+        text-decoration: none;
+        vertical-align: middle;
+        color: #72809b;
+        font-size: 16px;
+
+        &:hover {
+          background-color: #455066;
+          font-weight: bold;
+        }
+      }
     }
 
     .datatable-pager {
@@ -93,6 +113,8 @@
         color: #72809b;
       }
 
+      
+      .datatable-icon-refresh,
       .datatable-icon-left,
       .datatable-icon-skip,
       .datatable-icon-right,

projects/swimlane/ngx-datatable/src/lib/themes/material.scss

@@ -344,6 +344,28 @@ $datatable-summary-row-background-hover: #ddd !default;
       line-height: 50px;
       height: 50px;
       padding: 0 1.2rem;
+
+
+      a {
+        height: 22px;
+        min-width: 24px;
+        line-height: 22px;
+        padding: 3px 12px;
+        border-radius: 3px;
+        margin: 6px 3px;
+        text-align: center;
+        vertical-align: top;
+        color: $datatable-pager-color;
+        text-decoration: none;
+        vertical-align: middle;
+        font-weight: bold;
+        font-size: 16px;
+
+        &:hover {
+          color: $datatable-pager-color-hover;
+          background-color: $datatable-pager-background-hover;
+        }
+      }
     }
 
     .datatable-pager {
@@ -382,6 +404,7 @@ $datatable-summary-row-background-hover: #ddd !default;
         }
       }
 
+      .datatable-icon-refresh,
       .datatable-icon-left,
       .datatable-icon-skip,
       .datatable-icon-right,

src/app/basic/responsive.component.ts

@@ -46,6 +46,7 @@ import { ColumnMode } from 'projects/swimlane/ngx-datatable/src/public-api';
         [scrollbarV]="true"
         [rows]="rows"
         (page)="onPage($event)"
+        (refresh)="onPage($event)"
       >
         <!-- Row Detail Template -->
         <ngx-datatable-row-detail [rowHeight]="50" #myDetailRow (toggle)="onDetailToggle($event)">