Merge branch 'master' into patch-1

Author: amcdnl

assets/app.css

@@ -24,8 +24,8 @@ body {
 
 .info {
   box-sizing: border-box;
-  padding: 0 1em; 
-  border: solid 1px #ccc; 
+  padding: 0 1em;
+  border: solid 1px #ccc;
   background: white;
   font-size: .8em;
   margin-bottom: 1em;
@@ -149,7 +149,6 @@ nav {
   z-index: 99;
   top:0;
   left:0;
-  height: 100%;
   width: 200px;
   position: absolute;
   min-height: 1900px;
@@ -251,7 +250,7 @@ select {
   margin: 0 .25em 0 0;
   padding: 0;
   vertical-align: top;
-  width: 16px;  
+  width: 16px;
 }
 
 .expectedpayment2 + label:before {
@@ -263,7 +262,7 @@ select {
   margin: 0 .25em 0 0;
   padding: 0;
   vertical-align: top;
-  width: 16px;  
+  width: 16px;
 }
 
 .expectedpayment3 + label:before {
@@ -275,7 +274,7 @@ select {
   margin: 0 .25em 0 0;
   padding: 0;
   vertical-align: top;
-  width: 16px;  
+  width: 16px;
 }
 
 .expectedpayment:checked + label:before{

config/webpack.dev.js

@@ -9,7 +9,7 @@ const { ENV, dir } = require('./helpers');
 
 module.exports = function(options) {
   return webpackMerge(commonConfig({ env: ENV }), {
-    devtool: 'cheap-module-source-map',
+    devtool: 'inline-source-map',
     devServer: {
       port: 9999,
       hot: options.HMR,

demo/app.component.ts

@@ -58,7 +58,7 @@ import { Location, LocationStrategy, HashLocationStrategy } from '@angular/commo
           <li>
             <h4>Rows</h4>
             <ul>
-              <li><a href="#row-grouping" (click)="state='row-grouping'">Row Grouping</a></li>            
+              <li><a href="#row-grouping" (click)="state='row-grouping'">Row Grouping</a></li>
               <li><a href="#" (click)="state=''">Fluid Row Height</a></li>
               <li><a href="#basic-fixed" (click)="state='basic-fixed'">Fixed Row Height</a></li>
               <li><a href="#dynamic" (click)="state='dynamic'">Dynamic Row Height</a></li>
@@ -113,6 +113,15 @@ import { Location, LocationStrategy, HashLocationStrategy } from '@angular/commo
               <li><a href="#pinning" (click)="state='pinning'">Pinning</a></li>
             </ul>
           </li>
+          <li>
+            <h4>Summary Row</h4>
+            <ul>
+              <li><a href="#simple-summary" (click)="state='simple-summary'">Simple</a></li>
+              <li><a href="#custom-template-summary" (click)="state='custom-template-summary'">Custom Template</a></li>
+              <li><a href="#paging-summary" (click)="state='paging-summary'">Server-side paging</a></li>
+              <li><a href="#inline-html-summary" (click)="state='inline-html-summary'">Inline HTML</a></li>
+            </ul>
+          </li>
         </ul>
       </nav>
       <content>
@@ -171,6 +180,14 @@ import { Location, LocationStrategy, HashLocationStrategy } from '@angular/commo
         <column-standard-demo *ngIf="state === 'fixed'"></column-standard-demo>
         <column-force-demo *ngIf="state === 'force'"></column-force-demo>
         <column-pinning-demo *ngIf="state === 'pinning'"></column-pinning-demo>
+
+        <!-- Summary row -->
+        <summary-row-simple-demo *ngIf="state === 'simple-summary'"></summary-row-simple-demo>
+        <summary-row-custom-template-demo *ngIf="state === 'custom-template-summary'">
+        </summary-row-custom-template-demo>
+        <summary-row-server-paging-demo *ngIf="state === 'paging-summary'">
+        </summary-row-server-paging-demo>
+        <summary-row-inline-html *ngIf="state === 'inline-html-summary'"></summary-row-inline-html>
       </content>
     </div>
   `

demo/basic/bootstrap.component.ts

@@ -19,6 +19,8 @@ import { Component } from '@angular/core';
         [columns]="columns"
         [columnMode]="'force'"
         [headerHeight]="40"
+        [summaryRow]="true"
+        [summaryPosition]="'bottom'"
         [footerHeight]="40"
         [limit]="10"
         [rowHeight]="'auto'"
@@ -34,9 +36,9 @@ export class BootstrapThemeComponent {
   reorderable: boolean = true;
 
   columns = [
-    { prop: 'name' },
-    { name: 'Gender' },
-    { name: 'Company' }
+    { prop: 'name', summaryFunc: () => null },
+    { name: 'Gender', summaryFunc: (cells) => this.summaryForGender(cells) },
+    { name: 'Company', summaryFunc: () => null }
   ];
 
   constructor() {
@@ -57,4 +59,11 @@ export class BootstrapThemeComponent {
     req.send();
   }
 
+  private summaryForGender(cells: string[]) {
+    const males = cells.filter(cell => cell === 'male').length;
+    const females = cells.filter(cell => cell === 'female').length;
+
+    return `males: ${males}, females: ${females}`;
+  }
+
 }

demo/basic/dark-theme.component.ts

@@ -19,6 +19,7 @@ import { Component } from '@angular/core';
         [columns]="columns"
         [columnMode]="'force'"
         [headerHeight]="40"
+        [summaryRow]="true"
         [footerHeight]="40"
         [limit]="10"
         [rowHeight]="'auto'"
@@ -34,9 +35,9 @@ export class DarkThemeComponent {
   reorderable: boolean = true;
 
   columns = [
-    { prop: 'name' },
-    { name: 'Gender' },
-    { name: 'Company' }
+    { prop: 'name', summaryFunc: () => null },
+    { name: 'Gender', summaryFunc: (cells) => this.summaryForGender(cells) },
+    { name: 'Company', summaryFunc: () => null }
   ];
 
   constructor() {
@@ -57,4 +58,11 @@ export class DarkThemeComponent {
     req.send();
   }
 
+  private summaryForGender(cells: string[]) {
+    const males = cells.filter(cell => cell === 'male').length;
+    const females = cells.filter(cell => cell === 'female').length;
+
+    return `males: ${males}, females: ${females}`;
+  }
+
 }

demo/module.ts

@@ -60,6 +60,12 @@ import { ColumnForceComponent } from './columns/column-force.component';
 import { ColumnFlexComponent } from './columns/column-flex.component';
 import { ColumnPinningComponent } from './columns/pinning.component';
 
+// -- Summary row
+import { SummaryRowSimpleComponent } from './summary/summary-row-simple.component';
+import { SummaryRowCustomTemplateComponent } from './summary/summary-row-custom-template.component';
+import { SummaryRowServerPagingComponent } from './summary/summary-row-server-paging.component';
+import { SummaryRowInlineHtmlComponent } from './summary/summary-row-inline-html.component';
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -104,7 +110,11 @@ import { ColumnPinningComponent } from './columns/pinning.component';
     DynamicHeightComponent,
     FooterDemoComponent,
     RowGroupingComponent,
-    BootstrapThemeComponent
+    BootstrapThemeComponent,
+    SummaryRowSimpleComponent,
+    SummaryRowCustomTemplateComponent,
+    SummaryRowServerPagingComponent,
+    SummaryRowInlineHtmlComponent,
   ],
   imports: [BrowserModule, NgxDatatableModule],
   bootstrap: [AppComponent]

demo/paging/mock-server-results-service.ts

@@ -1,8 +1,8 @@
-import {Injectable} from "@angular/core";
-import {Observable} from "rxjs";
-import {PagedData} from "./model/paged-data";
-import {CorporateEmployee} from "./model/corporate-employee";
-import {Page} from "./model/page";
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {PagedData} from './model/paged-data';
+import {CorporateEmployee} from './model/corporate-employee';
+import {Page} from './model/page';
 const companyData = require('../../assets/data/company.json');
 
 /**
@@ -26,14 +26,14 @@ export class MockServerResultsService {
      * @returns {PagedData<CorporateEmployee>} An array of the selected data and page
      */
     private getPagedData(page: Page): PagedData<CorporateEmployee> {
-        let pagedData = new PagedData<CorporateEmployee>();
+        const pagedData = new PagedData<CorporateEmployee>();
         page.totalElements = companyData.length;
         page.totalPages = page.totalElements / page.size;
-        let start = page.pageNumber * page.size;
-        let end = Math.min((start + page.size), page.totalElements);
+        const start = page.pageNumber * page.size;
+        const end = Math.min((start + page.size), page.totalElements);
         for (let i = start; i < end; i++){
-            let jsonObj = companyData[i];
-            let employee = new CorporateEmployee(jsonObj.name, jsonObj.gender, jsonObj.company, jsonObj.age);
+            const jsonObj = companyData[i];
+            const employee = new CorporateEmployee(jsonObj.name, jsonObj.gender, jsonObj.company, jsonObj.age);
             pagedData.data.push(employee);
         }
         pagedData.page = page;

demo/paging/paging-client.component.ts

@@ -46,4 +46,4 @@ export class ClientPagingComponent {
     req.send();
   }
 
-}
+}

demo/paging/paging-server.component.ts

@@ -1,8 +1,8 @@
 import { Component } from '@angular/core';
-import {MockServerResultsService} from "./mock-server-results-service";
-import {PagedData} from "./model/paged-data";
-import {CorporateEmployee} from "./model/corporate-employee";
-import {Page} from "./model/page";
+import {MockServerResultsService} from './mock-server-results-service';
+import {PagedData} from './model/paged-data';
+import {CorporateEmployee} from './model/corporate-employee';
+import {Page} from './model/page';
 
 @Component({
   selector: 'server-paging-demo',

demo/summary/summary-row-custom-template.component.scss

@@ -0,0 +1,20 @@
+
+.name-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  .chip {
+    background-color: #555;
+    border-radius: 20px;
+    text-align: center;
+    margin: 3px 1px;
+    width: 100px;
+    padding: 2px 0px;
+
+    .chip-content {
+      color: #fff;
+    }
+  }
+}
+