Merge pull request #8 from briebugconsulting/develop

feat(sort): add custom sorting functionality

Author: jessesanders

README.md

@@ -18,6 +18,15 @@ The templates use Font Awesome CSS class names, so the component requires Font A
 ## Installing:
 `npm install angular-datatable --save`
 
+## Usage:
+
+### Custom Sorting
+
+To make use of custom sort functionality, one must add a `[customSort]` binding to the data-table (if necessary for the default sort) or to the data-column (if necessary to sort that column). One must still specify the `[sortBy]` binding and specify the primary property of the bound data set that is being sorted, as this is fundamental to maintaining sort order (ASC or DESC).
+
+The `[customSort]` binding must bind to a function that implements the function signature defined by `DataTableSortCallback`. This function is the same as any standard JS Array.sort() callback, and in fact is actually passed to array.sort() when sorting occurs.
+ 
+If custom sort is not required, then only the `[sortBy]` binding is necessary.
 
 #### Licensing
 MIT License

src/components/column.component.ts

@@ -1,10 +1,10 @@
 import { Directive, Input, ContentChild, OnInit } from '@angular/core';
 import { DataTableRow } from './row.component';
-import { CellCallback } from './types';
+import { CellCallback, DataTableSortCallback } from './types';
 
 
 @Directive({
-  selector: 'data-table-column'
+    selector: 'data-table-column'
 })
 export class DataTableColumn implements OnInit {
 
@@ -15,6 +15,7 @@ export class DataTableColumn implements OnInit {
     @Input() property: string;
     @Input() styleClass: string;
     @Input() cellColors: CellCallback;
+    @Input() customSort?: DataTableSortCallback;
 
     // init and state:
     @Input() width: number | string;
@@ -50,4 +51,4 @@ export class DataTableColumn implements OnInit {
             };
         }
     }
-}
+}

src/components/table.component.ts

@@ -4,7 +4,7 @@ import {
 } from '@angular/core';
 import { DataTableColumn } from './column.component';
 import { DataTableRow } from './row.component';
-import { DataTableParams } from './types';
+import {DataTableParams, DataTableSortCallback} from './types';
 import { RowCallback } from './types';
 import { DataTableTranslations, defaultTranslations } from './types';
 import { drag } from '../utils/drag';
@@ -14,9 +14,9 @@ import { TABLE_STYLE } from "./table.style";
 
 
 @Component({
-  selector: 'data-table',
-  template: TABLE_TEMPLATE,
-  styles: [TABLE_STYLE]
+    selector: 'data-table',
+    template: TABLE_TEMPLATE,
+    styles: [TABLE_STYLE]
 })
 export class DataTable implements DataTableParams, OnInit {
 
@@ -68,6 +68,7 @@ export class DataTable implements DataTableParams, OnInit {
 
     private _sortBy: string;
     private _sortAsc = true;
+    private _customSort: DataTableSortCallback = null;
 
     private _offset = 0;
     private _limit = 10;
@@ -92,6 +93,16 @@ export class DataTable implements DataTableParams, OnInit {
         this._triggerReload();
     }
 
+    @Input()
+    get customSort() {
+        return this._customSort;
+    }
+
+    set customSort(value) {
+        this._customSort = value;
+        this._triggerReload();
+    }
+
     @Input()
     get offset() {
         return this._offset;
@@ -129,9 +140,10 @@ export class DataTable implements DataTableParams, OnInit {
 
     // setting multiple observable properties simultaneously
 
-    sort(sortBy: string, asc: boolean) {
+    sort(sortBy: string, asc: boolean, customSort: DataTableSortCallback = null) {
         this.sortBy = sortBy;
         this.sortAsc = asc;
+        this.customSort = customSort;
     }
 
     // init
@@ -190,6 +202,7 @@ export class DataTable implements DataTableParams, OnInit {
     _updateDisplayParams() {
         this._displayParams = {
             sortBy: this.sortBy,
+            customSort: this.customSort,
             sortAsc: this.sortAsc,
             offset: this.offset,
             limit: this.limit
@@ -250,6 +263,7 @@ export class DataTable implements DataTableParams, OnInit {
 
         if (this.sortBy) {
             params.sortBy = this.sortBy;
+            params.customSort = this.customSort;
             params.sortAsc = this.sortAsc;
         }
         if (this.pagination) {
@@ -262,7 +276,7 @@ export class DataTable implements DataTableParams, OnInit {
     private sortColumn(column: DataTableColumn) {
         if (column.sortable) {
             let ascending = this.sortBy === column.property ? !this.sortAsc : true;
-            this.sort(column.property, ascending);
+            this.sort(column.property, ascending, column.customSort);
         }
     }
 
@@ -371,4 +385,4 @@ export class DataTable implements DataTableParams, OnInit {
         }
         return true;
     }
-}
+}

src/components/types.ts

@@ -8,6 +8,7 @@ export type CellCallback = (item: any, row: DataTableRow, column: DataTableColum
 
 // export type HeaderCallback = (column: DataTableColumn) => string;
 
+export type DataTableSortCallback = (a: any, b: any) => number;
 
 export interface DataTableTranslations {
     indexColumn: string;
@@ -30,5 +31,6 @@ export interface DataTableParams {
     offset?: number;
     limit?: number;
     sortBy?: string;
+    customSort?: DataTableSortCallback;
     sortAsc?: boolean;
-}
+}

src/tools/data-table-resource.ts

@@ -15,13 +15,17 @@ export class DataTableResource<T> {
         }
 
         if (params.sortBy) {
-            result.sort((a, b) => {
-                if (typeof a[params.sortBy] === 'string') {
-                    return a[params.sortBy].localeCompare(b[params.sortBy]);
-                } else {
-                    return a[params.sortBy] - b[params.sortBy];
-                }
-            });
+            if (!params.customSort) {
+                result.sort((a, b) => {
+                    if (typeof a[params.sortBy] === 'string') {
+                        return a[params.sortBy].localeCompare(b[params.sortBy]);
+                    } else {
+                        return a[params.sortBy] - b[params.sortBy];
+                    }
+                });
+            } else {
+                result.sort(params.customSort);
+            }
             if (params.sortAsc === false) {
                 result.reverse();
             }
@@ -45,4 +49,4 @@ export class DataTableResource<T> {
         });
 
     }
-}
+}