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
microsoft · Mar 10, 2025 · e77bb30 · e77bb30
1 parent d48830d
commit e77bb30
Show file tree

Hide file tree

Showing 18 changed files with 272 additions and 61 deletions.
diff --git a/src/reactviews/media/sort-asc.gif b/src/reactviews/media/sort-asc.gif
diff --git a/src/reactviews/media/sort-asc.png b/src/reactviews/media/sort-asc.png
diff --git a/src/reactviews/media/sort-desc.gif b/src/reactviews/media/sort-desc.gif
diff --git a/src/reactviews/media/sort-desc.png b/src/reactviews/media/sort-desc.png
diff --git a/src/reactviews/media/sort.svg b/src/reactviews/media/sort.svg
diff --git a/src/reactviews/media/sort_asc.svg b/src/reactviews/media/sort_asc.svg
diff --git a/src/reactviews/media/sort_asc_inverse.svg b/src/reactviews/media/sort_asc_inverse.svg
diff --git a/src/reactviews/media/sort_desc.svg b/src/reactviews/media/sort_desc.svg
diff --git a/src/reactviews/media/sort_desc_inverse.svg b/src/reactviews/media/sort_desc_inverse.svg
diff --git a/src/reactviews/media/sort_inverse.svg b/src/reactviews/media/sort_inverse.svg
diff --git a/src/reactviews/media/table.css b/src/reactviews/media/table.css
@@ -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;

diff --git a/src/reactviews/pages/QueryResult/table/asyncDataView.ts b/src/reactviews/pages/QueryResult/table/asyncDataView.ts
@@ -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();
     }

diff --git a/src/reactviews/pages/QueryResult/table/dataProvider.ts b/src/reactviews/pages/QueryResult/table/dataProvider.ts
@@ -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
      */

diff --git a/src/reactviews/pages/QueryResult/table/hybridDataProvider.ts b/src/reactviews/pages/QueryResult/table/hybridDataProvider.ts
@@ -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 &&

diff --git a/src/reactviews/pages/QueryResult/table/interfaces.ts b/src/reactviews/pages/QueryResult/table/interfaces.ts
@@ -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;