@swimlane/ngx-datatable 11.1.7 → 11.3.2

package/src/components/columns/column.directive.ts

@@ -24,13 +24,15 @@ export class DataTableColumnDirective {
   @Input() headerCheckboxable: boolean;
   @Input() headerClass: string | ((data: any) => string|any);
   @Input() cellClass: string | ((data: any) => string|any);
+  @Input() summaryFunc: (cells: any[]) => any;
+  @Input() summaryTemplate: TemplateRef<any>;
 
   @Input()
-  @ContentChild(DataTableColumnCellDirective, { read: TemplateRef }) 
+  @ContentChild(DataTableColumnCellDirective, { read: TemplateRef })
   cellTemplate: TemplateRef<any>;
 
   @Input()
-  @ContentChild(DataTableColumnHeaderDirective, { read: TemplateRef }) 
+  @ContentChild(DataTableColumnHeaderDirective, { read: TemplateRef })
   headerTemplate: TemplateRef<any>;
 
 }

package/src/components/datatable.component.scss

@@ -156,7 +156,7 @@
         cursor: pointer;
       }
 
-      .resize-handle{
+      .resize-handle, .resize-handle--not-resizable {
         display: inline-block;
         position: absolute;
         right: 0;
@@ -165,6 +165,9 @@
         width: 5px;
         padding: 0 4px;
         visibility: hidden;
+      }
+
+      .resize-handle {
         cursor: ew-resize;
       }
 
@@ -173,6 +176,16 @@
           visibility: visible;
         }
       }
+
+      &:hover {
+        .resize-handle--not-resizable {
+          visibility: visible;
+        }
+      }
+
+      .datatable-header-cell-template-wrap {
+        height: inherit;
+      }
     }
   }
 

package/src/components/datatable.component.spec.ts

@@ -10,11 +10,11 @@ import {
 } from '.';
 import { NgxDatatableModule } from '../datatable.module';
 
-let fixture: ComponentFixture<TestFixtureComponent>;
-let component: TestFixtureComponent;
+let fixture: ComponentFixture<any>;
+let component: any;
 
 describe('DatatableComponent', () => {
-  beforeEach(async(setupTest));
+  beforeEach(async(() => setupTest(TestFixtureComponent)));
 
   it('should sort date values', () => {
     const initialRows = [
@@ -365,27 +365,75 @@ describe('DatatableComponent', () => {
   });
 });
 
+describe('DatatableComponent With Custom Templates', () => {
+  beforeEach(async(() => setupTest(TestFixtureComponentWithCustomTemplates)));
+  
+  it('should sort when the table is initially rendered if `sorts` are provided', () => {
+    const initialRows = [
+      { id: 5  },
+      { id: 20 },
+      { id: 12 }
+    ];
+    
+    const sorts = [
+      {
+        prop: 'id',
+        dir: 'asc'
+      }
+    ];
+
+    component.rows = initialRows;
+    component.sorts = sorts;
+    fixture.detectChanges();
+
+    expect(textContent({ row: 1, column: 1 })).toContain('5', 'Ascending');
+    expect(textContent({ row: 2, column: 1 })).toContain('12', 'Ascending');
+    expect(textContent({ row: 3, column: 1 })).toContain('20', 'Ascending');
+  });
+});
+
 @Component({
   template: `
     <ngx-datatable
       [columns]="columns"
-      [rows]="rows">
+      [rows]="rows"
+      [sorts]="sorts">
     </ngx-datatable>
   `
 })
 class TestFixtureComponent {
   columns: any[] = [];
   rows: any[] = [];
+  sorts: any[] = [];
+}
+
+@Component({
+  template: `
+    <ngx-datatable [rows]="rows" [sorts]="sorts">
+      <ngx-datatable-column name="Id" prop="id">
+        <ng-template let-column="column" ngx-datatable-header-template>
+          {{ column.name }}
+        </ng-template>
+        <ng-template let-row="row" ngx-datatable-cell-template>
+          {{ row.id }}
+        </ng-template>
+      </ngx-datatable-column>
+    </ngx-datatable>
+  `
+})
+class TestFixtureComponentWithCustomTemplates {
+  rows: any[] = [];
+  sorts: any[] = [];
 }
 
-function setupTest() {
+function setupTest(componentClass) {
   return TestBed.configureTestingModule({
-    declarations: [ TestFixtureComponent ],
+    declarations: [ componentClass ],
     imports: [ NgxDatatableModule ]
   })
   .compileComponents()
   .then(() => {
-    fixture = TestBed.createComponent(TestFixtureComponent);
+    fixture = TestBed.createComponent(componentClass);
     component = fixture.componentInstance;
   });
 }

package/src/components/datatable.component.ts

@@ -76,6 +76,9 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject';
         [rowClass]="rowClass"
         [selectCheck]="selectCheck"
         [displayCheck]="displayCheck"
+        [summaryRow]="summaryRow"
+        [summaryHeight]="summaryHeight"
+        [summaryPosition]="summaryPosition"
         (page)="onBodyPage($event)"
         (activate)="activate.emit($event)"
         (rowContextmenu)="onRowContextmenu($event)"
@@ -118,10 +121,10 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
     if (val) {
       this._internalRows = [...val];
     }
-
+    
     // auto sort on new updates
     if (!this.externalSorting) {
-      this._internalRows = sortRows(this._internalRows, this._internalColumns, this.sorts);
+      this.sortInternalRows();
     }
 
     // recalculate sizes/etc
@@ -307,7 +310,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
    *
    *  - `single`
    *  - `multi`
-   *  - `chkbox`
+   *  - `checkbox`
    *  - `multiClick`
    *  - `cell`
    *
@@ -428,6 +431,21 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
    */
   @Input() virtualization: boolean = true;
 
+  /**
+   * A flag for switching summary row on / off
+   */
+  @Input() summaryRow: boolean = false;
+
+  /**
+   * A height of summary row
+   */
+  @Input() summaryHeight: number = this.rowHeight;
+
+  /**
+   * A property holds a summary row position: top/bottom
+   */
+  @Input() summaryPosition: string = 'top';
+
   /**
    * Body was scrolled typically in a `scrollbarV:true` scenario.
    */
@@ -673,7 +691,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
    */
   ngAfterViewInit(): void {
     if (!this.externalSorting) {
-      this._internalRows = sortRows(this._internalRows, this._internalColumns, this.sorts);
+      this.sortInternalRows();
     }
 
     // this has to be done to prevent the change detection
@@ -681,7 +699,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
     if (typeof requestAnimationFrame === 'undefined') {
       return;
     }
-    
+
     requestAnimationFrame(() => {
       this.recalculate();
 
@@ -716,6 +734,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
         this._internalColumns = translateTemplates(arr);
         setColumnDefaults(this._internalColumns);
         this.recalculateColumns();
+        this.sortInternalRows();
         this.cd.markForCheck();
       }
     }
@@ -756,7 +775,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
   ngDoCheck(): void {
     if (this.rowDiffer.diff(this.rows)) {
       if (!this.externalSorting) {
-        this._internalRows = sortRows(this._internalRows, this._internalColumns, this.sorts);
+        this.sortInternalRows();
       } else {
         this._internalRows = [...this.rows];
       }
@@ -1012,16 +1031,15 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
       });
     }
 
-    const { sorts } = event;
+    this.sorts = event.sorts;
 
     // this could be optimized better since it will resort
     // the rows again on the 'push' detection...
     if (this.externalSorting === false) {
       // don't use normal setter so we don't resort
-      this._internalRows = sortRows(this._internalRows, this._internalColumns, sorts);
+      this.sortInternalRows();
     }
 
-    this.sorts = sorts;
     // Always go to first page when sorting to see the newly sorted data
     this.offset = 0;
     this.bodyComponent.updateOffsetY(this.offset);
@@ -1068,4 +1086,8 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
   onBodySelect(event: any): void {
     this.select.emit(event);
   }
+  
+  private sortInternalRows(): void {
+    this._internalRows = sortRows(this._internalRows, this._internalColumns, this.sorts);
+  }
 }

package/src/components/footer/footer.component.spec.ts

@@ -1,76 +1,358 @@
 import {
-  async,
-  TestBed
-} from '@angular/core/testing';
+  Component,
+  DebugElement,
+  Input,
+  Output,
+  EventEmitter,
+  ViewChild,
+  TemplateRef
+} from '@angular/core';
+import { async, TestBed, ComponentFixture } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
-import {
-  DataTableFooterComponent,
-  DataTablePagerComponent
-} from '.';
-import {By} from "@angular/platform-browser";
+import { DataTableFooterComponent, DataTablePagerComponent } from '.';
+import { addMatchers } from '../../../test';
+
+let fixture: ComponentFixture<TestFixtureComponent>;
+let component: TestFixtureComponent;
+let page: Page;
 
 describe('DataTableFooterComponent', () => {
-  let fixture: any;
-  let component: DataTableFooterComponent;
-  let element;
-
-  // provide our implementations or mocks to the dependency injector
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [ 
-        DataTableFooterComponent,
-        DataTablePagerComponent
-      ]
+  beforeAll(addMatchers);
+
+  beforeEach(async(setupTest));
+
+  describe('div.datatable-footer-inner', () => {
+    it(`should have a height`, () => {
+      component.footerHeight = 123;
+      page.detectChangesAndRunQueries();
+
+      expect(page.datatableFooterInner.nativeElement.style.height).toEqual(
+        '123px'
+      );
     });
-  });
 
-  beforeEach(async(() => {
-    TestBed.compileComponents().then(() => {
-      fixture = TestBed.createComponent(DataTableFooterComponent);
-      component = fixture.componentInstance;
-      element = fixture.nativeElement;
+    it('should have `.selected-count` class when selectedMessage is set', () => {
+      component.selectedMessage = 'selected';
+      component.selectedCount = 1;
+      page.detectChangesAndRunQueries();
+
+      expect(page.datatableFooterInner.nativeElement).toHaveCssClass(
+        'selected-count'
+      );
     });
-  }));
 
-  describe('fixture', () => {
-    it('component is created', () => {
-      expect(component).toBeTruthy();
+    it('should not have `.selected-count` class if selectedMessage is not set', () => {
+      component.selectedMessage = undefined;
+      page.detectChangesAndRunQueries();
+
+      expect(page.datatableFooterInner.nativeElement).not.toHaveCssClass(
+        'selected-count'
+      );
     });
   });
 
-  describe('when the component has a selectionMessage set', () => {
+  describe('when there is no template', () => {
+    it('should not render a template', () => {
+      component.footerTemplate = undefined;
+      page.detectChangesAndRunQueries();
 
-    beforeEach(() => {
-      // setup for the template
-      component.rowCount = 9;
+      expect(page.templateList).toBeNull();
+    });
 
+    it('should display the selected count and total if selectedMessage set', () => {
+      component.footerTemplate = undefined;
       component.selectedMessage = 'selected';
-      component.selectedCount = 3;
+      component.selectedCount = 7;
+      component.rowCount = 10;
+      component.totalMessage = 'total';
+      page.detectChangesAndRunQueries();
+
+      expect(page.pageCount.nativeElement.innerText).toEqual(
+        '7 selected / 10 total'
+      );
+    });
+
+    it('should display only the total if selectedMessage is not set', () => {
+      component.footerTemplate = undefined;
+      component.selectedMessage = undefined;
+      component.rowCount = 100;
+      component.totalMessage = 'total';
+      page.detectChangesAndRunQueries();
+
+      expect(page.pageCount.nativeElement.innerText).toEqual('100 total');
+    });
+
+    it('should render a DataTablePagerComponent', () => {
+      component.footerTemplate = undefined;
+      page.detectChangesAndRunQueries();
+
+      expect(page.datatablePager).not.toBeNull();
+    });
+
+    it('should propagate page change events upward from the DataTablePagerComponent', () => {
+      component.footerTemplate = undefined;
+      page.detectChangesAndRunQueries();
+      const spy = spyOn(component, 'onPageEvent');
+      const pageChangeEvent = { page: 7 };
+      const datatablePagerComponent: DataTablePagerComponent =
+        page.datatablePager.componentInstance;
+      // mimic the act of changing the page through the datatable pager
+      datatablePagerComponent.change.emit(pageChangeEvent);
+
+      expect(spy).toHaveBeenCalledWith(pageChangeEvent);
+    });
+
+    it('should bind to DataTablePagerComponent pagerLeftArrowIcon input', () => {
+      component.pagerLeftArrowIcon = 'pager-left-arrow-icon';
+      page.detectChangesAndRunQueries();
+      const datatablePagerComponent: DataTablePagerComponent =
+        page.datatablePager.componentInstance;
+
+      expect(datatablePagerComponent.pagerLeftArrowIcon).toBe(
+        component.pagerLeftArrowIcon
+      );
+    });
+
+    it('should bind to DataTablePagerComponent pagerRightArrowIcon input', () => {
+      component.pagerRightArrowIcon = 'pager-right-arrow-icon';
+      page.detectChangesAndRunQueries();
+      const datatablePagerComponent: DataTablePagerComponent =
+        page.datatablePager.componentInstance;
+
+      expect(datatablePagerComponent.pagerRightArrowIcon).toBe(
+        component.pagerRightArrowIcon
+      );
+    });
+
+    it('should bind to DataTablePagerComponent pagerNextIcon input', () => {
+      component.pagerNextIcon = 'pager-next-icon';
+      page.detectChangesAndRunQueries();
+      const datatablePagerComponent: DataTablePagerComponent =
+        page.datatablePager.componentInstance;
 
-      fixture.detectChanges();
+      expect(datatablePagerComponent.pagerNextIcon).toBe(
+        component.pagerNextIcon
+      );
     });
 
-    it('then the selectionCount is shown', () => {
-      let selectedElement = fixture.debugElement.query(By.css('.page-count>span'));
+    it('should bind to DataTablePagerComponent pagerPreviousIcon input', () => {
+      component.pagerPreviousIcon = 'pager-previous-icon';
+      page.detectChangesAndRunQueries();
+      const datatablePagerComponent: DataTablePagerComponent =
+        page.datatablePager.componentInstance;
 
-      expect(selectedElement.nativeElement.innerHTML.trim()).toBe('3 selected /');
+      expect(datatablePagerComponent.pagerPreviousIcon).toBe(
+        component.pagerPreviousIcon
+      );
+    });
+
+    it('should bind to DataTablePagerComponent size input', () => {
+      component.pageSize = 4;
+      page.detectChangesAndRunQueries();
+      const datatablePagerComponent: DataTablePagerComponent =
+        page.datatablePager.componentInstance;
+
+      expect(datatablePagerComponent.size).toBe(component.pageSize);
+    });
+
+    it('should bind to DataTablePagerComponent count input', () => {
+      component.rowCount = 40;
+      page.detectChangesAndRunQueries();
+      const datatablePagerComponent: DataTablePagerComponent =
+        page.datatablePager.componentInstance;
+
+      expect(datatablePagerComponent.count).toBe(component.rowCount);
+    });
+
+    it('should bind to DataTablePagerComponent page input', () => {
+      component.offset = 200;
+      page.detectChangesAndRunQueries();
+      const datatablePagerComponent: DataTablePagerComponent =
+        page.datatablePager.componentInstance;
+
+      expect(datatablePagerComponent.page).toBe(201);
+    });
+
+    it('should show & hide the DataTablePagerComponent', () => {
+      component.rowCount = 200;
+      component.pageSize = 5;
+      page.detectChangesAndRunQueries();
+
+      expect(page.datatablePager.nativeElement.hidden).toBe(
+        false,
+        'DataTablePagerComponent should be hidden'
+      );
+
+      component.rowCount = 1;
+      component.pageSize = 2;
+      page.detectChangesAndRunQueries();
+
+      expect(page.datatablePager.nativeElement.hidden).toBe(
+        true,
+        'DataTablePagerComponent should not be hidden'
+      );
     });
   });
 
-  describe('when the component does not have a selectionMessage set', () => {
+  describe('when there is a template', () => {
+    it('should not render div.page-count or DatatablePagerComponent', () => {
+      component.footerTemplate = { template: component.testTemplate };
+      page.detectChangesAndRunQueries();
 
-    beforeEach(() => {
-      // setup for the template
-      component.rowCount = 9;
-      component.selectedCount = 3;
+      expect(page.pageCount).toBeNull();
+      expect(page.datatablePager).toBeNull();
+    });
+
+    it('should render the template', () => {
+      page.detectChangesAndRunQueries();
+      component.footerTemplate = { template: component.testTemplate };
+      page.detectChangesAndRunQueries();
 
-      fixture.detectChanges();
+      expect(page.templateList).not.toBeNull();
     });
 
-    it('then the selectionCount is shown', () => {
-      let selectedElement = fixture.debugElement.query(By.css('.page-count>span'));
+    it('should give the template proper context', () => {
+      component.footerTemplate = { template: component.testTemplate };
+      component.rowCount = 12;
+      component.pageSize = 1;
+      component.selectedCount = 4;
+      component.offset = 0;
+      page.detectChangesAndRunQueries();
+      const listItems = page.templateList.queryAll(By.css('li'));
 
-      expect(selectedElement).toBeNull();
+      expect(listItems[0].nativeElement).toHaveText('rowCount 12');
+      expect(listItems[1].nativeElement).toHaveText('pageSize 1');
+      expect(listItems[2].nativeElement).toHaveText('selectedCount 4');
+      expect(listItems[3].nativeElement).toHaveText('curPage 1');
+      expect(listItems[4].nativeElement).toHaveText('offset 0');
     });
   });
 });
+
+/**
+ * we test DatatableFooterComponent by embedding it in a
+ * test host component
+ */
+@Component({
+  template: `
+    <datatable-footer
+      [rowCount]="rowCount"
+      [pageSize]="pageSize"
+      [offset]="offset"
+      [footerHeight]="footerHeight"
+      [footerTemplate]="footerTemplate"
+      [totalMessage]="totalMessage"
+      [pagerLeftArrowIcon]="pagerLeftArrowIcon"
+      [pagerRightArrowIcon]="pagerRightArrowIcon"
+      [pagerPreviousIcon]="pagerPreviousIcon"
+      [selectedCount]="selectedCount"
+      [selectedMessage]="selectedMessage"
+      [pagerNextIcon]="pagerNextIcon"
+      (page)="onPageEvent($event)">
+    </datatable-footer>
+    
+    <ng-template
+      #testTemplate
+      let-rowCount="rowCount"
+      let-pageSize="pageSize"
+      let-selectedCount="selectedCount"
+      let-curPage="curPage"
+      let-offset="offset">
+        <ul id="template-list">
+          <li>rowCount {{rowCount}}</li>
+          <li>pageSize {{pageSize}}</li>
+          <li>selectedCount {{selectedCount}}</li>
+          <li>curPage {{curPage}}</li>
+          <li>offset {{offset}}</li>
+        </ul>
+    </ng-template>
+  `
+})
+class TestFixtureComponent {
+  footerHeight: number;
+  rowCount: number = 100;
+  pageSize = 1;
+  offset = 0;
+  pagerLeftArrowIcon: string;
+  pagerRightArrowIcon: string;
+  pagerPreviousIcon: string;
+  pagerNextIcon: string;
+  totalMessage: string;
+  footerTemplate: { template: TemplateRef<any> };
+  selectedCount: number;
+  selectedMessage: string;
+
+  /**
+   * establishes a reference to a test template that can
+   * selectively be passed to the DatatableFooterComponent
+   * in these unit tests
+   */
+  @ViewChild('testTemplate', { read: TemplateRef })
+  testTemplate: TemplateRef<any>;
+
+  onPageEvent() {
+    return;
+  }
+}
+
+/**
+ * we use a mock DataTablePagerComponent when testing
+ * the DataTableFooterComponent
+ */
+@Component({
+  selector: 'datatable-pager',
+  template: ''
+})
+class DataTablePagerComponentMock {
+  @Input() pagerLeftArrowIcon: string;
+  @Input() pagerRightArrowIcon: string;
+  @Input() pagerPreviousIcon: string;
+  @Input() pagerNextIcon: string;
+  @Input() page: number;
+  @Input() size: number;
+  @Input() count: number;
+
+  @Output() change: EventEmitter<any> = new EventEmitter();
+}
+
+function setupTest() {
+  return TestBed.configureTestingModule({
+    declarations: [
+      TestFixtureComponent,
+      DataTableFooterComponent,
+      DataTablePagerComponentMock
+    ]
+  })
+    .compileComponents()
+    .then(() => {
+      fixture = TestBed.createComponent(TestFixtureComponent);
+      component = fixture.componentInstance;
+      page = new Page();
+      page.detectChangesAndRunQueries();
+    });
+}
+
+/**
+ * a Page is a collection of references to DebugElements. it
+ * makes for cleaner testing
+ */
+class Page {
+  datatableFooter: DebugElement;
+  datatableFooterInner: DebugElement;
+  templateList: DebugElement;
+  pageCount: DebugElement;
+  datatablePager: DebugElement;
+
+  detectChangesAndRunQueries() {
+    fixture.detectChanges();
+
+    const de = fixture.debugElement;
+
+    this.datatableFooter = de.query(By.css('datatable-footer'));
+    this.datatableFooterInner = de.query(By.css('.datatable-footer-inner'));
+    this.templateList = de.query(By.css('#template-list'));
+    this.pageCount = de.query(By.css('.page-count'));
+    this.datatablePager = de.query(By.css('datatable-pager'));
+  }
+}