Add a sort button to column header (#18561)

* add new sort button

* remove extraneous call

* wip

* store prev sort button

* remove reset to unfiltered state after sorting a column

* Revert "remove reset to unfiltered state after sorting a column"

This reverts commit 1d3b70d.

* add third state for sort button, resetting data to original order

* fix sort/filter scenarios

* fix build

* pr comments & cleanup

* cleanup

* update comment

Author: Christopher Suh

src/reactviews/media/sort-asc.gif

@@ -61,6 +61,33 @@
     flex: 0 0 auto;
 }
 
+.slick-header-sort-button,
+.slick-header-sortdesc-button,
+.slick-header-sortasc-button {
+    background-position: center center;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    display: inline-block;
+    width: 16px;
+    flex: 0 0 auto;
+    margin-right: 2px;
+    background-color: transparent;
+    border: 0;
+    padding: 0;
+}
+
+.slick-header-sort-button {
+    background-image: url("sort_inverse.svg");
+}
+
+.slick-header-sortdesc-button {
+    background-image: url("sort_desc_inverse.svg");
+}
+
+.slick-header-sortasc-button {
+    background-image: url("sort_asc_inverse.svg");
+}
+
 .slick-header-menubutton {
     background-position: center center;
     background-repeat: no-repeat;

src/reactviews/media/sort-asc.png

@@ -286,6 +286,10 @@ export class AsyncDataProvider<T extends Slick.SlickData>
         throw new Error("Method not implemented.");
     }
 
+    resetSort(): void {
+        throw new Error("Method not implemented.");
+    }
+
     public getLength(): number {
         return this.dataRows.getLength();
     }

src/reactviews/media/sort-desc.gif

@@ -33,6 +33,11 @@ export interface IDisposableDataProvider<T extends Slick.SlickData>
      */
     sort(args: Slick.OnSortEventArgs<T>): Promise<void>;
 
+    /**
+     * Resets the sort
+     */
+    resetSort(): void;
+
     /**
      * Event fired when the filters changed
      */

src/reactviews/media/sort-desc.png

@@ -116,6 +116,10 @@ export class HybridDataProvider<T extends Slick.SlickData>
         void this.provider.sort(options);
     }
 
+    public async resetSort() {
+        void this.provider.resetSort();
+    }
+
     private get thresholdReached(): boolean {
         return (
             this._options.inMemoryDataCountThreshold !== undefined &&

src/reactviews/media/sort.svg

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { IDisposableDataProvider } from "./dataProvider";
+import { SortDirection } from "./plugins/headerFilter.plugin";
 
 export interface ITableMouseEvent {
     anchor: HTMLElement | { x: number; y: number };
@@ -80,6 +81,11 @@ export interface FilterableColumn<T extends Slick.SlickData>
     sorted?: SortProperties;
 }
 
+export interface ColumnSortState<T extends Slick.SlickData> {
+    column: Slick.Column<T>;
+    sortDirection: SortDirection;
+}
+
 export interface ITableKeyboardEvent {
     cell?: { row: number; cell: number };
     event: KeyboardEvent;