feat(datagrid): add ability to unsort datagrid colums

.storybook/stories/datagrid/datagrid-column.stories.ts

@@ -63,6 +63,7 @@ export default {
     expandable: false,
     compact: false,
     hidableColumns: false,
+    clrDgSortDisableUnsort: false,
     height: 0,
     ClrDatagridSortOrder: ClrDatagridSortOrder,
   },
@@ -95,6 +96,7 @@ const ColumnFilterTemplate: StoryFn = args => ({
         [clrFilterNumberMinPlaceholder]="clrFilterNumberMinPlaceholder"
         [clrFilterStringPlaceholder]="clrFilterStringPlaceholder"
         [clrFilterValue]="clrFilterValue"
+        [clrDgSortDisableUnsort]="clrDgSortDisableUnsort"
         (clrDgColumnResize)="clrDgColumnResize($event)"
         (clrDgSortOrderChange)="clrDgSortOrderChange($event)"
         (clrFilterValueChange)="clrFilterValueChange($event)"

projects/angular/clarity.api.md

@@ -1311,6 +1311,8 @@ export class ClrDatagridColumn<T = any> extends DatagridFilterRegistrar<T, ClrDa
     // (undocumented)
     get ariaSort(): "none" | "ascending" | "descending";
     // (undocumented)
+    clrDgSortDisableUnsort: boolean;
+    // (undocumented)
     get colType(): 'string' | 'number';
     set colType(value: 'string' | 'number');
     customFilter: boolean;
@@ -1357,7 +1359,7 @@ export class ClrDatagridColumn<T = any> extends DatagridFilterRegistrar<T, ClrDa
     // (undocumented)
     get _view(): any;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<ClrDatagridColumn<any>, "clr-dg-column", never, { "filterStringPlaceholder": "clrFilterStringPlaceholder"; "filterNumberMaxPlaceholder": "clrFilterNumberMaxPlaceholder"; "filterNumberMinPlaceholder": "clrFilterNumberMinPlaceholder"; "colType": "clrDgColType"; "field": "clrDgField"; "sortBy": "clrDgSortBy"; "sortOrder": "clrDgSortOrder"; "updateFilterValue": "clrFilterValue"; }, { "sortOrderChange": "clrDgSortOrderChange"; "filterValueChange": "clrFilterValueChange"; }, ["projectedFilter"], ["clr-dg-filter, clr-dg-string-filter, clr-dg-numeric-filter", "*"], false, [{ directive: typeof i1_6.ClrPopoverHostDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClrDatagridColumn<any>, "clr-dg-column", never, { "filterStringPlaceholder": "clrFilterStringPlaceholder"; "filterNumberMaxPlaceholder": "clrFilterNumberMaxPlaceholder"; "filterNumberMinPlaceholder": "clrFilterNumberMinPlaceholder"; "clrDgSortDisableUnsort": "clrDgSortDisableUnsort"; "colType": "clrDgColType"; "field": "clrDgField"; "sortBy": "clrDgSortBy"; "sortOrder": "clrDgSortOrder"; "updateFilterValue": "clrFilterValue"; }, { "sortOrderChange": "clrDgSortOrderChange"; "filterValueChange": "clrFilterValueChange"; }, ["projectedFilter"], ["clr-dg-filter, clr-dg-string-filter, clr-dg-numeric-filter", "*"], false, [{ directive: typeof i1_6.ClrPopoverHostDirective; inputs: {}; outputs: {}; }]>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrDatagridColumn<any>, never>;
 }

projects/angular/src/data/datagrid/datagrid-column.spec.ts

@@ -95,6 +95,8 @@ export default function (): void {
         expect(component.sortOrder).toBe(ClrDatagridSortOrder.ASC);
         component.sort();
         expect(component.sortOrder).toBe(ClrDatagridSortOrder.DESC);
+        component.sort();
+        expect(component.sortOrder).toBe(ClrDatagridSortOrder.UNSORTED);
       });
 
       it('knows when the column has an ascending sortDirection', function () {
@@ -114,12 +116,21 @@ export default function (): void {
 
       it('sets the column sortDirection to null when sort is cleared', function () {
         component.sortBy = comparator;
-        expect(component.sortDirection).toBe(undefined);
+        expect(component.sortDirection).toBeUndefined();
         component.sort();
         sortService.clear();
         expect(component.sortDirection).toBeNull();
       });
 
+      it('sets the column sortDirection to null when sort is rotated to initial state', function () {
+        component.sortBy = comparator;
+        expect(component.sortDirection).toBeUndefined();
+        component.sort();
+        component.sort();
+        component.sort();
+        expect(component.sortDirection).toBeNull();
+      });
+
       it('offers a shortcut to sort based on a property name', function () {
         component.field = 'test';
         expect(sortService.comparator).toBeUndefined();
@@ -312,6 +323,9 @@ export default function (): void {
         title.click();
         context.detectChanges();
         expect(context.clarityDirective.sortOrder).toBe(ClrDatagridSortOrder.DESC);
+        title.click();
+        context.detectChanges();
+        expect(context.clarityDirective.sortOrder).toBe(ClrDatagridSortOrder.UNSORTED);
       });
 
       it('adds and removes the correct direction when sorting', function () {

projects/angular/src/data/datagrid/datagrid-column.ts

@@ -99,6 +99,7 @@ export class ClrDatagridColumn<T = any>
   @Input('clrFilterStringPlaceholder') filterStringPlaceholder: string;
   @Input('clrFilterNumberMaxPlaceholder') filterNumberMaxPlaceholder: string;
   @Input('clrFilterNumberMinPlaceholder') filterNumberMinPlaceholder: string;
+  @Input('clrDgSortDisableUnsort') clrDgSortDisableUnsort = false;
 
   @Output('clrDgSortOrderChange') sortOrderChange = new EventEmitter<ClrDatagridSortOrder>();
   @Output('clrFilterValueChange') filterValueChange = new EventEmitter();
@@ -202,16 +203,12 @@ export class ClrDatagridColumn<T = any>
   set sortBy(comparator: ClrDatagridComparatorInterface<T> | string) {
     if (typeof comparator === 'string') {
       this._sortBy = new DatagridPropertyComparator(comparator);
+    } else if (comparator) {
+      this._sortBy = comparator;
+    } else if (this.field) {
+      this._sortBy = new DatagridPropertyComparator(this.field);
     } else {
-      if (comparator) {
-        this._sortBy = comparator;
-      } else {
-        if (this.field) {
-          this._sortBy = new DatagridPropertyComparator(this.field);
-        } else {
-          delete this._sortBy;
-        }
-      }
+      delete this._sortBy;
     }
   }
 
@@ -230,17 +227,18 @@ export class ClrDatagridColumn<T = any>
     }
 
     switch (value) {
-      // the Unsorted case happens when the current state is either Asc or Desc
-      default:
-      case ClrDatagridSortOrder.UNSORTED:
-        this._sort.clear();
-        break;
       case ClrDatagridSortOrder.ASC:
         this.sort(false);
         break;
       case ClrDatagridSortOrder.DESC:
         this.sort(true);
         break;
+      // the Unsorted case happens when the current state is neither Asc nor Desc
+      case ClrDatagridSortOrder.UNSORTED:
+      default:
+        this._sort.clear();
+        this._sortDirection = null;
+        break;
     }
   }
 
@@ -357,6 +355,14 @@ export class ClrDatagridColumn<T = any>
       return;
     }
 
+    if (!this.clrDgSortDisableUnsort && reverse === undefined && this.sortOrder === ClrDatagridSortOrder.DESC) {
+      this._sortOrder = ClrDatagridSortOrder.UNSORTED;
+      this._sort.clear();
+      this._sortDirection = null;
+      this.sortOrderChange.emit(this._sortOrder);
+      return;
+    }
+
     this._sort.toggle(this._sortBy, reverse);
 
     // setting the private variable to not retrigger the setter logic

projects/demo/src/app/datagrid/sorting/sorting.html

@@ -81,8 +81,13 @@ <h2>Custom sort</h2>
 <clr-datagrid>
   <clr-dg-column>User ID</clr-dg-column>
   <clr-dg-column>Name</clr-dg-column>
-  <clr-dg-column>Creation date</clr-dg-column>
-  <clr-dg-column [clrDgField]="'pokemon.name'" [clrDgSortBy]="pokemonComparator" [(clrDgSortOrder)]="sortOrder">
+  <clr-dg-column [clrDgField]="'creation'" [clrDgSortBy]="userCreationComparator">Creation date</clr-dg-column>
+  <clr-dg-column
+    [clrDgField]="'pokemon.name'"
+    [clrDgSortBy]="pokemonComparator"
+    [(clrDgSortOrder)]="sortOrder"
+    [clrDgSortDisableUnsort]="true"
+  >
     Pokemon
   </clr-dg-column>
   <clr-dg-column>Favorite color</clr-dg-column>

projects/demo/src/app/datagrid/sorting/sorting.ts

@@ -6,12 +6,18 @@
  */
 
 import { Component } from '@angular/core';
-import { ClrDatagridSortOrder } from '@clr/angular';
+import { ClrDatagridComparatorInterface, ClrDatagridSortOrder } from '@clr/angular';
 
 import { Inventory } from '../inventory/inventory';
 import { User } from '../inventory/user';
 import { PokemonComparator } from '../utils/pokemon-comparator';
 
+export class UserCreationComparator implements ClrDatagridComparatorInterface<User> {
+  compare(a: User, b: User) {
+    return a.creation.getTime() - b.creation.getTime();
+  }
+}
+
 @Component({
   selector: 'clr-datagrid-sorting-demo',
   providers: [Inventory],
@@ -23,6 +29,7 @@ export class DatagridSortingDemo {
   sortOrder: ClrDatagridSortOrder = ClrDatagridSortOrder.UNSORTED;
 
   pokemonComparator = new PokemonComparator();
+  userCreationComparator = new UserCreationComparator();
 
   constructor(inventory: Inventory) {
     inventory.size = 10;