feat(sort): support to remove applied sort (#64)

Introduced `enableClearingSortState` which allows to clear the sort on particular column after performing ascending and descending sort.

projects/ngx-datatable/src/lib/components/datatable.component.html

@@ -19,6 +19,7 @@
       [allRowsSelected]="allRowsSelected"
       [selectionType]="selectionType"
       [verticalScrollVisible]="verticalScrollVisible"
+      [enableClearingSortState]="enableClearingSortState"
       (sort)="onColumnSort($event)"
       (resize)="onColumnResize($event)"
       (resizing)="onColumnResizing($event)"

projects/ngx-datatable/src/lib/components/datatable.component.ts

@@ -456,6 +456,13 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit, After
    */
   @Input() rowDraggable = false;
 
+  /**
+   * A flag to controll behavior of sort states.
+   * By default sort on column toggles between ascending and descending without getting removed.
+   * Set true to clear sorting of column after performing ascending and descending sort on that column.
+   */
+  @Input() enableClearingSortState = false;
+
   /**
    * Body was scrolled typically in a `scrollbarV:true` scenario.
    */
@@ -1262,13 +1269,17 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit, After
   }
 
   private sortInternalRows(): void {
+    // if there are no sort criteria we reset the rows with original rows
+    if (!this.sorts || !this.sorts?.length) {
+      this._internalRows = this._rows;
+    }
     if (this.groupedRows && this.groupedRows.length) {
       const sortOnGroupHeader = this.sorts?.find(sortColumns => sortColumns.prop === this._groupRowsBy);
       this.groupedRows = this.groupArrayBy(this._rows, this._groupRowsBy);
       this.groupedRows = sortGroupedRows(this.groupedRows, this._internalColumns, this.sorts, sortOnGroupHeader);
       this._internalRows = [...this._internalRows];
     } else {
-      this._internalRows = sortRows(this._internalRows, this._internalColumns, this.sorts);
+      this._internalRows = sortRows(this._rows, this._internalColumns, this.sorts);
     }
   }
 }

projects/ngx-datatable/src/lib/components/header/header-cell.component.ts

@@ -54,6 +54,7 @@ export class DataTableHeaderCellComponent implements OnInit {
   @Input() isTarget: boolean;
   @Input() targetMarkerTemplate: any;
   @Input() targetMarkerContext: any;
+  @Input() enableClearingSortState = false;
 
   _allRowsSelected: boolean;
 
@@ -191,6 +192,10 @@ export class DataTableHeaderCellComponent implements OnInit {
 
   ngOnInit() {
     this.sortClass = this.calcSortClass(this.sortDir);
+    // If there is already a default sort then start the counter with 1.
+    if (this.sortDir) {
+      this.totalSortStatesApplied = 1;
+    }
   }
 
   calcSortDir(sorts: any[]): any {
@@ -200,11 +205,18 @@ export class DataTableHeaderCellComponent implements OnInit {
       if (sort) {return sort.dir;}
     }
   }
-
+  // Counter to reset sort once user sort asc and desc.
+  private totalSortStatesApplied = 0;
   onSort(): void {
     if (!this.column.sortable) {return;}
 
-    const newValue = nextSortDir(this.sortType, this.sortDir);
+    this.totalSortStatesApplied++;
+    let newValue = nextSortDir(this.sortType, this.sortDir);
+    // User has done both direction sort so we reset the next sort.
+    if (this.enableClearingSortState && this.totalSortStatesApplied === 3) {
+      newValue = undefined;
+      this.totalSortStatesApplied = 0;
+    }
     this.sort.emit({
       column: this.column,
       prevValue: this.sortDir,

projects/ngx-datatable/src/lib/components/header/header.component.ts

@@ -62,6 +62,7 @@ import { ScrollbarHelper } from '../../services/scrollbar-helper.service';
           [sortDescendingIcon]="sortDescendingIcon"
           [sortUnsetIcon]="sortUnsetIcon"
           [allRowsSelected]="allRowsSelected"
+          [enableClearingSortState]="enableClearingSortState"
           (sort)="onSort($event)"
           (select)="select.emit($event)"
           (columnContextmenu)="columnContextmenu.emit($event)"
@@ -82,6 +83,7 @@ export class DataTableHeaderComponent implements OnDestroy {
   @Input() scrollbarH: boolean;
   @Input() dealsWithGroup: boolean;
   @Input() targetMarkerTemplate: any;
+  @Input() enableClearingSortState = false;
 
   targetMarkerContext: any;
 

src/app/sorting/sorting-default.component.ts

@@ -24,6 +24,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
         [footerHeight]="50"
         [rowHeight]="50"
         [scrollbarV]="true"
+        [enableClearingSortState]="true"
         [sorts]="[{ prop: 'name', dir: 'desc' }]"
       >
         <ngx-datatable-column name="Company">