feat(DataTable): Add ability to show pagination on footer of Data Tab…

…le (#1532) * feat(DataTable): Add ability to show pagination on footer of Data Table * Remove custom headers from footer * Fix spacing * Add justify content to make sure actions are displayed properly * Update demo * Update demo styling * Remove unused if checks * Apply styling only when pagination in footer
bullhorn · Apr 24, 2024 · 38bb94f · 38bb94f
1 parent 967f441
commit 38bb94f
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 2 deletions.
diff --git a/projects/novo-elements/src/elements/data-table/data-table.component.scss b/projects/novo-elements/src/elements/data-table/data-table.component.scss
@@ -357,6 +357,9 @@ novo-data-table {
     align-items: center;
     flex-shrink: 0;
     border-bottom: 1px solid var(--border, $off-white);
+    &.pagination-footer {
+      justify-content: space-between;
+    }
     &.empty {
       padding: 0;
     }

diff --git a/projects/novo-elements/src/elements/data-table/data-table.component.ts b/projects/novo-elements/src/elements/data-table/data-table.component.ts
@@ -51,6 +51,7 @@ import { DataTableState } from './state/data-table-state.service';
     <header
       *ngIf="(!(empty && !state.userFiltered) && !loading) || forceShowHeader"
       [class.empty]="hideGlobalSearch && !paginationOptions && !templates['customActions']"
+      [ngClass]="{ 'pagination-footer': paginationOptions?.onFooter }"
     >
       <ng-container *ngTemplateOutlet="templates['customHeader']"></ng-container>
       <novo-search
@@ -62,8 +63,9 @@ import { DataTableState } from './state/data-table-state.service';
         [hint]="searchOptions?.tooltip"
       >
       </novo-search>
+      <!-- Updates to novo-data-table-pagination here need to be applied to the footer as well -->
       <novo-data-table-pagination
-        *ngIf="paginationOptions"
+        *ngIf="paginationOptions && !paginationOptions.onFooter"
         [theme]="paginationOptions.theme"
         [length]="useOverrideTotal ? overrideTotal : dataSource?.currentTotal"
         [page]="paginationOptions.page"
@@ -277,6 +279,27 @@ import { DataTableState } from './state/data-table-state.service';
       </div>
     </ng-template>
     <!-- CUSTOM CELLS PASSED IN -->
+    <footer
+      *ngIf="paginationOptions?.onFooter && ((!(empty && !state.userFiltered) && !loading) || forceShowHeader)"
+      [class.empty]="!paginationOptions"
+    >
+      <!-- Updates to novo-data-table-pagination here need to be applied to the header as well -->
+      <novo-data-table-pagination
+        *ngIf="paginationOptions?.onFooter"
+        [theme]="paginationOptions.theme"
+        [length]="useOverrideTotal ? overrideTotal : dataSource?.currentTotal"
+        [page]="paginationOptions.page"
+        [pageSize]="paginationOptions.pageSize"
+        [pageSizeOptions]="paginationOptions.pageSizeOptions"
+        [dataFeatureId]="paginatorDataFeatureId"
+        [canSelectAll]="canSelectAll"
+        [allMatchingSelected]="allMatchingSelected"
+        [loading]="paginationOptions.loading"
+        [errorLoading]="paginationOptions.errorLoading"
+        [paginationRefreshSubject]="paginationRefreshSubject"
+      >
+      </novo-data-table-pagination>
+    </footer>
     <ng-content></ng-content>
   `,
   styleUrls: ['./data-table.component.scss'],

diff --git a/projects/novo-elements/src/elements/data-table/interfaces.ts b/projects/novo-elements/src/elements/data-table/interfaces.ts
@@ -78,6 +78,7 @@ export interface IDataTablePaginationOptions {
   pageSizeOptions: number[] | { value: string; label: string }[];
   loading?: boolean;
   errorLoading?: boolean;
+  onFooter?: boolean;
 }
 
 export interface IDataTableColumnSortConfig {

diff --git a/...ts/novo-examples/src/components/data-table/data-table-remote/data-table-remote-example.ts b/...ts/novo-examples/src/components/data-table/data-table-remote/data-table-remote-example.ts
@@ -36,6 +36,11 @@ export class DataTableRemoteExample {
     { label: 'Basic', value: 'basic' },
   ];
   public loadedPaginationType: string = 'standard';
+  public paginationPlacementOptions: any[] = [
+    { label: 'Top', value: false },
+    { label: 'Bottom', value: true },
+  ];
+  public loadedPaginationPlacement: boolean = false;
   public globalSearchOptions: any[] = [
     { label: 'Show', value: true },
     { label: 'Hide', value: false },
@@ -299,6 +304,11 @@ export class DataTableRemoteExample {
     this.ref.detectChanges();
   }
 
+  public switchPaginationPlacement(onFooter: boolean) {
+    this.sharedPaginationOptions = Object.assign({}, this.sharedPaginationOptions, { onFooter });
+    this.ref.detectChanges();
+  }
+
   public toggleGlobalSearch(toggle: boolean): void {
     this.globalSearchEnabled = toggle;
     this.ref.detectChanges();

diff --git a/projects/novo-examples/src/components/data-table/data-table-rows/data-table-rows-example.css b/projects/novo-examples/src/components/data-table/data-table-rows/data-table-rows-example.css
@@ -6,3 +6,13 @@
 novo-data-table {
   height: 100%;
 }
+
+.custom-header-buttons {
+  display: flex;
+  align-items: center;
+}
+
+.custom-header-buttons > * {
+  margin-right: .2rem;
+}
+
diff --git a/...ects/novo-examples/src/components/data-table/data-table-rows/data-table-rows-example.html b/...ects/novo-examples/src/components/data-table/data-table-rows/data-table-rows-example.html
@@ -3,6 +3,9 @@ <h6>Change Dataset</h6>
 <h6>Change Pagination Style</h6>
 <novo-tiles [options]="paginationTypeOptions" (onChange)="switchPaginationType($event)"
   [(ngModel)]="loadedPaginationType"></novo-tiles>
+<h6>Change Pagination Placement</h6>
+<novo-tiles [options]="paginationPlacementOptions" (onChange)="switchPaginationPlacement($event)"
+  [(ngModel)]="loadedPaginationPlacement"></novo-tiles>
 <h6>Toggle Global Search</h6>
 <novo-tiles [options]="globalSearchOptions" (onChange)="toggleGlobalSearch($event)" [(ngModel)]="loadedGlobalSearch">
 </novo-tiles>
@@ -31,9 +34,16 @@ <h6>Enable Selection Retention</h6>
     [activeRowIdentifier]="selectedRecordId"
     [fixedHeader]="true"
     #basic>
+    <!-- Custom Header -->
+    <ng-template novoTemplate="customHeader">
+      <div class="custom-header-buttons">
+        <button theme="secondary"
+        (click)="configureColumns()">Config</button>
+        <span>Total: {{ basic.dataSource.currentTotal }}</span>
+      </div>
+    </ng-template>
     <!-- Custom Actions -->
     <ng-template novoTemplate="customActions">
-      <span>Total: {{ basic.dataSource.currentTotal }}</span>
       <novo-data-table-clear-button *ngIf="basic.state.userFiltered"></novo-data-table-clear-button>
       <button theme="secondary"
         (click)="refresh()">Refresh</button>

diff --git a/projects/novo-examples/src/components/data-table/data-table-rows/data-table-rows-example.ts b/projects/novo-examples/src/components/data-table/data-table-rows/data-table-rows-example.ts
@@ -40,6 +40,11 @@ export class DataTableRowsExample implements AfterViewInit {
     { label: 'Standard', value: 'standard' },
     { label: 'Basic', value: 'basic' },
   ];
+  public paginationPlacementOptions: any[] = [
+    { label: 'Top', value: false },
+    { label: 'Bottom', value: true },
+  ];
+  public loadedPaginationPlacement: boolean = false;
   public selectionOptions: IDataTableSelectionOption[] = [];
   public loadedPaginationType: string = 'standard';
   public globalSearchOptions: any[] = [
@@ -365,6 +370,11 @@ export class DataTableRowsExample implements AfterViewInit {
     this.ref.detectChanges();
   }
 
+  public switchPaginationPlacement(onFooter: boolean) {
+    this.sharedPaginationOptions = Object.assign({}, this.sharedPaginationOptions, { onFooter });
+    this.ref.detectChanges();
+  }
+
   public loadDataset(setIndex: number) {
     switch (setIndex) {
       case 1:

diff --git a/.../novo-examples/src/components/data-table/data-table-service/data-table-service-example.ts b/.../novo-examples/src/components/data-table/data-table-service/data-table-service-example.ts
@@ -34,6 +34,11 @@ export class DataTableServiceExample {
     { label: 'Basic', value: 'basic' },
   ];
   public loadedPaginationType: string = 'standard';
+  public paginationPlacementOptions: any[] = [
+    { label: 'Top', value: false },
+    { label: 'Bottom', value: true },
+  ];
+  public loadedPaginationPlacement: boolean = false;
   public globalSearchOptions: any[] = [
     { label: 'Show', value: true },
     { label: 'Hide', value: false },
@@ -315,6 +320,11 @@ export class DataTableServiceExample {
     this.ref.detectChanges();
   }
 
+  public switchPaginationPlacement(onFooter: boolean) {
+    this.sharedPaginationOptions = Object.assign({}, this.sharedPaginationOptions, { onFooter });
+    this.ref.detectChanges();
+  }
+
   public loadDataset(setIndex: number) {
     switch (setIndex) {
       case 1: