import { Component } from '@angular/core';
import { UniverseRecord } from './universe-record';
@Component({
selector: 'my-app',
templateUrl: 'app/app.template.html'
})
export class AppComponent {
cols = [
{field: 'zip', header: 'ZIP'},
{field: 'crrt', header: 'CRRT'},
{field: 'quantity', header: 'QTY'},
{field: 'dateLastMailed', header: 'Date Last Mailed'}
];
feb14: Date = new Date('Wed Feb 14 2018');
feb20: Date = new Date('Tue Feb 20 2018');
mar21: Date = new Date('Wed Mar 21 2018');
/* Uncomment this and comment the block below and multi-sort will work because all the date values use the same Date object
testRecord1: UniverseRecord = new UniverseRecord('49415', 'R002', 431, null);
testRecord2: UniverseRecord = new UniverseRecord('49415', 'R001', 408, null);
testRecord3: UniverseRecord = new UniverseRecord('49415', 'R003', 301, null);
testRecord4: UniverseRecord = new UniverseRecord('49415', 'R004', 289, null);
testRecord5: UniverseRecord = new UniverseRecord('49401', 'R009', 250, this.feb14);
testRecord6: UniverseRecord = new UniverseRecord('49401', 'R004', 222, this.feb14);
testRecord7: UniverseRecord = new UniverseRecord('49404', 'R001', 325, this.feb20);
testRecord7: UniverseRecord = new UniverseRecord('49404', 'R001', 325, this.feb20);
testRecord8: UniverseRecord = new UniverseRecord('49404', 'R003', 342, this.feb20);
testRecord9: UniverseRecord = new UniverseRecord('49404', 'R002', 377, this.feb20);
testRecord10: UniverseRecord = new UniverseRecord('49401', 'R001', 352, this.mar21);
testRecord11: UniverseRecord = new UniverseRecord('49401', 'R003', 381, this.mar21);
testRecord12: UniverseRecord = new UniverseRecord('49404', 'C001', 351, this.mar21);
testRecord13: UniverseRecord = new UniverseRecord('49404', 'C002', 127, this.mar21);
testRecord14: UniverseRecord = new UniverseRecord('49401', 'R002', 271, this.mar21);
*/
testRecord1: UniverseRecord = new UniverseRecord('49415', 'R002', 431, null);
testRecord2: UniverseRecord = new UniverseRecord('49415', 'R001', 408, null);
testRecord3: UniverseRecord = new UniverseRecord('49415', 'R003', 301, null);
testRecord4: UniverseRecord = new UniverseRecord('49415', 'R004', 289, null);
testRecord5: UniverseRecord = new UniverseRecord('49401', 'R009', 250, new Date('Wed Feb 14 2018'));
testRecord6: UniverseRecord = new UniverseRecord('49401', 'R004', 222, new Date('Wed Feb 14 2018'));
testRecord7: UniverseRecord = new UniverseRecord('49404', 'R001', 325, new Date('Tue Feb 20 2018'));
testRecord7: UniverseRecord = new UniverseRecord('49404', 'R001', 325, new Date('Tue Feb 20 2018'));
testRecord8: UniverseRecord = new UniverseRecord('49404', 'R003', 342, new Date('Tue Feb 20 2018'));
testRecord9: UniverseRecord = new UniverseRecord('49404', 'R002', 377, new Date('Tue Feb 20 2018'));
testRecord10: UniverseRecord = new UniverseRecord('49401', 'R001', 352, new Date('Wed Mar 21 2018'));
testRecord11: UniverseRecord = new UniverseRecord('49401', 'R003', 381, new Date('Wed Mar 21 2018'));
testRecord12: UniverseRecord = new UniverseRecord('49404', 'C001', 351, new Date('Wed Mar 21 2018'));
testRecord13: UniverseRecord = new UniverseRecord('49404', 'C002', 127, new Date('Wed Mar 21 2018'));
testRecord14: UniverseRecord = new UniverseRecord('49401', 'R002', 271, new Date('Wed Mar 21 2018'));
universeFiltered: UniverseRecord [] = [
this.testRecord1,
this.testRecord9,
this.testRecord10,
this.testRecord3,
this.testRecord4,
this.testRecord5,
this.testRecord11,
this.testRecord12,
this.testRecord2,
this.testRecord6,
this.testRecord7,
this.testRecord8,
this.testRecord13,
this.testRecord14
];
storedUniverseRecords: UniverseRecord [] = [];
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
// Import PrimeNG modules
import {AccordionModule} from 'primeng/primeng';
import {AutoCompleteModule} from 'primeng/primeng';
import {BreadcrumbModule} from 'primeng/primeng';
import {ButtonModule} from 'primeng/primeng';
import {CalendarModule} from 'primeng/primeng';
import {CarouselModule} from 'primeng/primeng';
import {ChartModule} from 'primeng/primeng';
import {CheckboxModule} from 'primeng/primeng';
import {ChipsModule} from 'primeng/primeng';
import {CodeHighlighterModule} from 'primeng/primeng';
import {ConfirmDialogModule} from 'primeng/primeng';
import {SharedModule} from 'primeng/primeng';
import {ContextMenuModule} from 'primeng/primeng';
import {DataGridModule} from 'primeng/primeng';
import {DataListModule} from 'primeng/primeng';
import {DataScrollerModule} from 'primeng/primeng';
import {DataTableModule} from 'primeng/primeng';
import {DialogModule} from 'primeng/primeng';
import {DragDropModule} from 'primeng/primeng';
import {DropdownModule} from 'primeng/primeng';
import {EditorModule} from 'primeng/primeng';
import {FieldsetModule} from 'primeng/primeng';
import {FileUploadModule} from 'primeng/primeng';
import {GalleriaModule} from 'primeng/primeng';
import {GMapModule} from 'primeng/primeng';
import {GrowlModule} from 'primeng/primeng';
import {InputMaskModule} from 'primeng/primeng';
import {InputSwitchModule} from 'primeng/primeng';
import {InputTextModule} from 'primeng/primeng';
import {InputTextareaModule} from 'primeng/primeng';
import {LightboxModule} from 'primeng/primeng';
import {ListboxModule} from 'primeng/primeng';
import {MegaMenuModule} from 'primeng/primeng';
import {MenuModule} from 'primeng/primeng';
import {MenubarModule} from 'primeng/primeng';
import {MessagesModule} from 'primeng/primeng';
import {MultiSelectModule} from 'primeng/primeng';
import {OrderListModule} from 'primeng/primeng';
import {OverlayPanelModule} from 'primeng/primeng';
import {PaginatorModule} from 'primeng/primeng';
import {PanelModule} from 'primeng/primeng';
import {PanelMenuModule} from 'primeng/primeng';
import {PasswordModule} from 'primeng/primeng';
import {PickListModule} from 'primeng/primeng';
import {ProgressBarModule} from 'primeng/primeng';
import {RadioButtonModule} from 'primeng/primeng';
import {RatingModule} from 'primeng/primeng';
import {ScheduleModule} from 'primeng/primeng';
import {SelectButtonModule} from 'primeng/primeng';
import {SlideMenuModule} from 'primeng/primeng';
import {SliderModule} from 'primeng/primeng';
import {SpinnerModule} from 'primeng/primeng';
import {SplitButtonModule} from 'primeng/primeng';
import {StepsModule} from 'primeng/primeng';
import {TabMenuModule} from 'primeng/primeng';
import {TabViewModule} from 'primeng/primeng';
import {TerminalModule} from 'primeng/primeng';
import {TieredMenuModule} from 'primeng/primeng';
import {ToggleButtonModule} from 'primeng/primeng';
import {ToolbarModule} from 'primeng/primeng';
import {TooltipModule} from 'primeng/primeng';
import {TreeModule} from 'primeng/primeng';
import {TreeTableModule} from 'primeng/primeng';
import {TableModule} from 'primeng/table'
@NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
AccordionModule,
AutoCompleteModule,
BreadcrumbModule,
ButtonModule,
CalendarModule,
CarouselModule,
ChartModule,
CheckboxModule,
ChipsModule,
CodeHighlighterModule,
ConfirmDialogModule,
SharedModule,
ContextMenuModule,
DataGridModule,
DataListModule,
DataScrollerModule,
DataTableModule,
DialogModule,
DragDropModule,
DropdownModule,
EditorModule,
FieldsetModule,
FileUploadModule,
GalleriaModule,
GMapModule,
GrowlModule,
InputMaskModule,
InputSwitchModule,
InputTextModule,
InputTextareaModule,
LightboxModule,
ListboxModule,
MegaMenuModule,
MenuModule,
MenubarModule,
MessagesModule,
MultiSelectModule,
OrderListModule,
OverlayPanelModule,
PaginatorModule,
PanelModule,
PanelMenuModule,
PasswordModule,
PickListModule,
ProgressBarModule,
RadioButtonModule,
RatingModule,
ScheduleModule,
SelectButtonModule,
SlideMenuModule,
SliderModule,
SpinnerModule,
SplitButtonModule,
StepsModule,
TabMenuModule,
TabViewModule,
TerminalModule,
TieredMenuModule,
ToggleButtonModule,
ToolbarModule,
TooltipModule,
TreeModule,
TableModule,
TreeTableModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
body {
padding: 2em;
font-family: Arial, Helvetica, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- PrimeNG style dependencies -->
<link rel="stylesheet" href="https://unpkg.com/primeng@4.3.0/resources/themes/omega/theme.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://unpkg.com/primeng@4.3.0/resources/primeng.min.css" />
<!-- 1. Load libraries -->
<!-- Polyfill for older browsers -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
/**
* WEB ANGULAR VERSION
* (based on systemjs.config.js in angular.io)
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
// Copy of compiler options in standard tsconfig.json
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
// paths serve as alias
'npm:': 'https://unpkg.com/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/animations': 'npm:@angular/animations@4.2.6/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations@4.2.6/bundles/animations-browser.umd.js',
'@angular/core': 'npm:@angular/core@4.2.6/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common@4.2.6/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler@4.2.6/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser@4.2.6/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@4.2.6/bundles/platform-browser-dynamic.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser@4.2.6/bundles/platform-browser-animations.umd.js',
'@angular/http': 'npm:@angular/http@4.2.6/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router@4.2.6/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms@4.2.6/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade@4.2.6/bundles/upgrade.umd.js',
'@angular/upgrade/static': 'npm:@angular/upgrade@4.2.6/bundles/upgrade-static.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'npm:typescript@2.0.3/lib/typescript.js',
'primeng': 'npm:primeng@5.2.0'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
primeng: {
defaultExtension: 'js'
}
}
});
if (!global.noBootstrap) { bootstrap(); }
// Bootstrap the `AppModule`(skip the `app/main.ts` that normally does this)
function bootstrap() {
console.log('Auto-bootstrapping');
// Stub out `app/main.ts` so System.import('app') doesn't fail if called in the index.html
System.set(System.normalizeSync('app/main.ts'), System.newModule({ }));
// bootstrap and launch the app (equivalent to standard main.ts)
Promise.all([
System.import('@angular/platform-browser-dynamic'),
getAppModule()
])
.then(function (imports) {
var platform = imports[0];
var app = imports[1];
platform.platformBrowserDynamic().bootstrapModule(app.AppModule);
})
.catch(function(err){ console.error(err); });
}
// Import AppModule or make the default AppModule if there isn't one
// returns a promise for the AppModule
function getAppModule() {
if (global.noAppModule) {
return makeAppModule();
}
return System.import('app/app.module').catch(makeAppModule)
}
function makeAppModule() {
console.log('No AppModule; making a bare-bones, default AppModule');
return Promise.all([
System.import('@angular/core'),
System.import('@angular/platform-browser'),
System.import('app/app.component')
])
.then(function (imports) {
var core = imports[0];
var browser = imports[1];
var appComp = imports[2].AppComponent;
var AppModule = function() {}
AppModule.annotations = [
new core.NgModule({
imports: [ browser.BrowserModule ],
declarations: [ appComp ],
bootstrap: [ appComp ]
})
]
return {AppModule: AppModule};
})
}
})(this);
<h2>PrimeNG Multi-sort with Date Issue</h2>
<p>p-table multi-sort seems to have an issue when Date objects are one of the fields in the sort.</p>
<p>To demonstrate this issue, click the 'Date Last Mailed' column below to sort by date. Single sort by date works.
Now hold the CTRL key and click the 'Quantity' column. The first "group" that has the same date is likely correctly
sorted by quantity. The other groups are not completely sorted correctly.</p>
<p>It seems to behave correctly when the Date object is null, as in some of our data, but as soon
as there is an actual Date object the sort does not function. It appears this is because the multi-sort is comparing
the actual Date object references. When you create a single Date object for a specific date and use this for all
of the records with that date, the multi-sort works correctly. This is because the 'value1 < value2' comparison is
looking at the object references which are the same so it properly moves to the next field in the multi-sort.
When you use different Date objects for the same Date value it doesn't work because it is not trying to compare
the Date values for the sorting.</p>
<p>The Angular component source code has two different blocks of code to demonstrate the difference between
using the same Date object for all matching dates (which the multi-sort handles correctly) versus using different
Date objects which it doesn't handle. Using different Date objects is the block of code that is active first to
show the incorrect behavior.</p>
<p>If you use two number fields, like zip and quantity to do multi-sort it functions completely correctly. It also works if
you use the 'CRRT' field which is a string with a number.</p>
<hr />
<p-table [columns]='cols' [value]="universeFiltered" [(selection)] = "storedUniverseRecords"
sortMode="multiple">
<ng-template pTemplate="header" let-columns>
<tr>
<th></th>
<th *ngFor="let col of columns" [pSortableColumn]="col.field">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-dropUni let-columns="columns">
<tr class="form-group" [pSelectableRow]="dropUni">
<td><p-tableCheckbox type="checkbox" name="options" [value]="dropUni" ></p-tableCheckbox></td>
<ng-container *ngFor="let col of columns">
<td >
{{dropUni[col.field]}}
</td>
</ng-container>
</tr>
</ng-template>
</p-table>
<hr />
Objects in table: <br/>
<p *ngFor="let eachRecord of universeFiltered">{{eachRecord | json}}</p>
<hr />
Selections: <br/>
<p *ngFor="let eachRecord of storedUniverseRecords">{{eachRecord | json}}</p>
# PrimeNG Issue Template
Please create a test case and attach the link of the plunkr to your github issue report.
export class UniverseRecord {
constructor( zip: string, crrt: string, quantity: number, dateLastMailed: Date ) {
this.zip = zip;
this.crrt = crrt;
this.quantity = quantity;
this.dateLastMailed = dateLastMailed;
}
zip: string;
crrt: string;
quantity: number;
dateLastMailed: Date;
}