From 5dfb839175c5548ff00f76faa2050df08578a908 Mon Sep 17 00:00:00 2001
From: Christopher Suh <chris.s.suh@gmail.com>
Date: Thu, 16 Jan 2025 18:11:56 -0800
Subject: [PATCH 01/12] add new sort button

---
 src/reactviews/media/sort-asc.gif             | Bin 830 -> 0 bytes
 src/reactviews/media/sort-asc.png             | Bin 105 -> 0 bytes
 src/reactviews/media/sort-desc.gif            | Bin 833 -> 0 bytes
 src/reactviews/media/sort-desc.png            | Bin 107 -> 0 bytes
 src/reactviews/media/sort.svg                 |   3 +
 src/reactviews/media/sort_asc.svg             |   9 +-
 src/reactviews/media/sort_asc_inverse.svg     |   9 +-
 src/reactviews/media/sort_desc.svg            |   9 +-
 src/reactviews/media/sort_desc_inverse.svg    |   9 +-
 src/reactviews/media/sort_inverse.svg         |   3 +
 src/reactviews/media/table.css                |  42 +++++++
 .../table/plugins/headerFilter.plugin.ts      | 109 +++++++++++++++---
 12 files changed, 149 insertions(+), 44 deletions(-)
 delete mode 100644 src/reactviews/media/sort-asc.gif
 delete mode 100644 src/reactviews/media/sort-asc.png
 delete mode 100644 src/reactviews/media/sort-desc.gif
 delete mode 100644 src/reactviews/media/sort-desc.png
 create mode 100644 src/reactviews/media/sort.svg
 create mode 100644 src/reactviews/media/sort_inverse.svg

diff --git a/src/reactviews/media/sort-asc.gif b/src/reactviews/media/sort-asc.gif
deleted file mode 100644
index 67a2a4c669fc5821a07fc486228d626e16d6ad9e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 830
zcmZ?wbhEHb<Yi!GXlGzZoN(6Rzr*8qzZpisXb6nF5K#Qd!py+H$e;uAIw(&ta7Z&S
hbMP=EEO2aQ5R!A55%BO(n*cx843CM64mL1Y0{|rI66OE^

diff --git a/src/reactviews/media/sort-asc.png b/src/reactviews/media/sort-asc.png
deleted file mode 100644
index 8604ff4e07c3bf339eb6e3fa1a8c3c34ee7f89f6..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 105
zcmeAS@N?(olHy`uVBq!ia0vp^96-#<!3HENCaw(yQU;zbjv*Y^lM@_R-#DB()4=?J
z;iI`i9s7}-9V-8sKiZeL#yI@p)avYc&uqxetjNINaGLvk*4rs1K)no}u6{1-oD!M<
DW*{D*

diff --git a/src/reactviews/media/sort-desc.gif b/src/reactviews/media/sort-desc.gif
deleted file mode 100644
index 34db47c3b1eecab2d3873ee2fc556cd3a6e322f9..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 833
zcmZ?wbhEHb<Yi!GXlGzZoN(6Rzr*8qzZpisXb6nF5K#Qd!py+H$e;uAIw(&taL55k
i2@ipW1_lm6E}aU4#6zuYvR)!L0u~+a5@Kdzum%7{ff3ID

diff --git a/src/reactviews/media/sort-desc.png b/src/reactviews/media/sort-desc.png
deleted file mode 100644
index a2a6adf9366d1d5f8b08ee30f691b1ee96be0924..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 107
zcmeAS@N?(olHy`uVBq!ia0vp^96-#<!3HENCaw(yQbwLGjv*Y^lM@t}3K&1CEBxzk
zd(Ujh?IXx9P~YtJhxt*t!<n``As@joPl*Kfq_h-92Ae(H=T{_uE(Gdk@O1TaS?83{
F1OP1z9TNZm

diff --git a/src/reactviews/media/sort.svg b/src/reactviews/media/sort.svg
new file mode 100644
index 0000000000..a445acc7f9
--- /dev/null
+++ b/src/reactviews/media/sort.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.85355 2.14645C4.65829 1.95118 4.34171 1.95118 4.14645 2.14645L1.14645 5.14645C0.951184 5.34171 0.951184 5.65829 1.14645 5.85355C1.34171 6.04882 1.65829 6.04882 1.85355 5.85355L4 3.70711V13.5C4 13.7761 4.22386 14 4.5 14C4.77614 14 5 13.7761 5 13.5V3.70711L7.14645 5.85355C7.34171 6.04882 7.65829 6.04882 7.85355 5.85355C8.04882 5.65829 8.04882 5.34171 7.85355 5.14645L4.85355 2.14645ZM11.1525 13.8595C11.3463 14.0468 11.6537 14.0468 11.8475 13.8595L14.8475 10.9594C15.0461 10.7675 15.0514 10.4509 14.8595 10.2524C14.6676 10.0538 14.351 10.0485 14.1525 10.2404L12 12.3212L12 2.5001C12 2.22395 11.7761 2.0001 11.5 2.0001C11.2239 2.0001 11 2.22395 11 2.5001L11 12.3212L8.84752 10.2404C8.64898 10.0485 8.33244 10.0538 8.14051 10.2524C7.94858 10.4509 7.95394 10.7675 8.15248 10.9594L11.1525 13.8595Z" fill="#212121"/>
+</svg>
diff --git a/src/reactviews/media/sort_asc.svg b/src/reactviews/media/sort_asc.svg
index c9c1838171..94f9cd580f 100644
--- a/src/reactviews/media/sort_asc.svg
+++ b/src/reactviews/media/sort_asc.svg
@@ -1,8 +1,3 @@
-<svg viewBox="0 0 100 50"  xmlns="http://www.w3.org/2000/svg">
-	<style>
-		polygon {
-		fill:black;
-		}
-	</style>
-	<polygon points="0,50 50,0 100,50" />
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L10.8536 5.14645C11.0488 5.34171 11.0488 5.65829 10.8536 5.85355C10.6583 6.04882 10.3417 6.04882 10.1464 5.85355L8 3.70711V13.5C8 13.7761 7.77614 14 7.5 14C7.22386 14 7 13.7761 7 13.5V3.70711L4.85355 5.85355C4.65829 6.04882 4.34171 6.04882 4.14645 5.85355C3.95118 5.65829 3.95118 5.34171 4.14645 5.14645L7.14645 2.14645Z" fill="#212121"/>
 </svg>
diff --git a/src/reactviews/media/sort_asc_inverse.svg b/src/reactviews/media/sort_asc_inverse.svg
index 2d40e6ca52..95cd58a56c 100644
--- a/src/reactviews/media/sort_asc_inverse.svg
+++ b/src/reactviews/media/sort_asc_inverse.svg
@@ -1,8 +1,3 @@
-<svg viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
-	<style>
-		polygon {
-		fill:white;
-		}
-	</style>
-	<polygon points="0,50 50,0 100,50" />
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L10.8536 5.14645C11.0488 5.34171 11.0488 5.65829 10.8536 5.85355C10.6583 6.04882 10.3417 6.04882 10.1464 5.85355L8 3.70711V13.5C8 13.7761 7.77614 14 7.5 14C7.22386 14 7 13.7761 7 13.5V3.70711L4.85355 5.85355C4.65829 6.04882 4.34171 6.04882 4.14645 5.85355C3.95118 5.65829 3.95118 5.34171 4.14645 5.14645L7.14645 2.14645Z" fill="white"/>
 </svg>
diff --git a/src/reactviews/media/sort_desc.svg b/src/reactviews/media/sort_desc.svg
index d045a30b02..5045e00674 100644
--- a/src/reactviews/media/sort_desc.svg
+++ b/src/reactviews/media/sort_desc.svg
@@ -1,8 +1,3 @@
-<svg viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
-	<style>
-		polygon {
-		fill:black;
-		}
-	</style>
-	<polygon points="0,0 100,0 50,50" />
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.14645 13.8536C7.34171 14.0488 7.65829 14.0488 7.85355 13.8536L10.8536 10.8536C11.0488 10.6583 11.0488 10.3417 10.8536 10.1464C10.6583 9.95118 10.3417 9.95118 10.1464 10.1464L8 12.2929V2.5C8 2.22386 7.77614 2 7.5 2C7.22386 2 7 2.22386 7 2.5V12.2929L4.85355 10.1464C4.65829 9.95118 4.34171 9.95118 4.14645 10.1464C3.95118 10.3417 3.95118 10.6583 4.14645 10.8536L7.14645 13.8536Z" fill="#212121"/>
 </svg>
diff --git a/src/reactviews/media/sort_desc_inverse.svg b/src/reactviews/media/sort_desc_inverse.svg
index 9184cf7626..4d0fed8a8d 100644
--- a/src/reactviews/media/sort_desc_inverse.svg
+++ b/src/reactviews/media/sort_desc_inverse.svg
@@ -1,8 +1,3 @@
-<svg viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
-	<style>
-		polygon {
-		fill:white;
-		}
-	</style>
-	<polygon points="0,0 100,0 50,50" />
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.14645 13.8536C7.34171 14.0488 7.65829 14.0488 7.85355 13.8536L10.8536 10.8536C11.0488 10.6583 11.0488 10.3417 10.8536 10.1464C10.6583 9.95118 10.3417 9.95118 10.1464 10.1464L8 12.2929V2.5C8 2.22386 7.77614 2 7.5 2C7.22386 2 7 2.22386 7 2.5V12.2929L4.85355 10.1464C4.65829 9.95118 4.34171 9.95118 4.14645 10.1464C3.95118 10.3417 3.95118 10.6583 4.14645 10.8536L7.14645 13.8536Z" fill="white"/>
 </svg>
diff --git a/src/reactviews/media/sort_inverse.svg b/src/reactviews/media/sort_inverse.svg
new file mode 100644
index 0000000000..87cfe0eeda
--- /dev/null
+++ b/src/reactviews/media/sort_inverse.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.85355 2.14645C4.65829 1.95118 4.34171 1.95118 4.14645 2.14645L1.14645 5.14645C0.951184 5.34171 0.951184 5.65829 1.14645 5.85355C1.34171 6.04882 1.65829 6.04882 1.85355 5.85355L4 3.70711V13.5C4 13.7761 4.22386 14 4.5 14C4.77614 14 5 13.7761 5 13.5V3.70711L7.14645 5.85355C7.34171 6.04882 7.65829 6.04882 7.85355 5.85355C8.04882 5.65829 8.04882 5.34171 7.85355 5.14645L4.85355 2.14645ZM11.1525 13.8595C11.3463 14.0468 11.6537 14.0468 11.8475 13.8595L14.8475 10.9594C15.0461 10.7675 15.0514 10.4509 14.8595 10.2524C14.6676 10.0538 14.351 10.0485 14.1525 10.2404L12 12.3212L12 2.5001C12 2.22395 11.7761 2.0001 11.5 2.0001C11.2239 2.0001 11 2.22395 11 2.5001L11 12.3212L8.84752 10.2404C8.64898 10.0485 8.33244 10.0538 8.14051 10.2524C7.94858 10.4509 7.95394 10.7675 8.15248 10.9594L11.1525 13.8595Z" fill="white"/>
+</svg>
diff --git a/src/reactviews/media/table.css b/src/reactviews/media/table.css
index 7a03f0eaae..f80a90263c 100644
--- a/src/reactviews/media/table.css
+++ b/src/reactviews/media/table.css
@@ -61,6 +61,48 @@
     flex: 0 0 auto;
 }
 
+.slick-header-sort-button {
+    background-position: center center;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    display: inline-block;
+    width: 16px;
+    background-image: url("sort_inverse.svg");
+    flex: 0 0 auto;
+    margin-right: 2px;
+    background-color: transparent;
+    border: 0px;
+    padding: 0px;
+}
+
+.slick-header-sortdesc-button {
+    background-position: center center;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    display: inline-block;
+    width: 16px;
+    background-image: url("sort_desc_inverse.svg");
+    flex: 0 0 auto;
+    margin-right: 2px;
+    background-color: transparent;
+    border: 0px;
+    padding: 0px;
+}
+
+.slick-header-sortasc-button {
+    background-position: center center;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    display: inline-block;
+    width: 16px;
+    background-image: url("sort_asc_inverse.svg");
+    flex: 0 0 auto;
+    margin-right: 2px;
+    background-color: transparent;
+    border: 0px;
+    padding: 0px;
+}
+
 .slick-header-menubutton {
     background-position: center center;
     background-repeat: no-repeat;
diff --git a/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts b/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
index ce8f2eb583..743b0e0788 100644
--- a/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
+++ b/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
@@ -34,6 +34,7 @@ export interface CommandEventArgs<T extends Slick.SlickData> {
 }
 
 const ShowFilterText = locConstants.queryResult.showFilter;
+const SortAscendingText = locConstants.queryResult.sortAscending;
 
 export const FilterButtonWidth: number = 34;
 
@@ -51,10 +52,14 @@ export class HeaderFilter<T extends Slick.SlickData> {
     private grid!: Slick.Grid<T>;
     private handler = new Slick.EventHandler();
     private columnDef!: FilterableColumn<T>;
-    private columnButtonMapping: Map<string, HTMLElement> = new Map<
+    private columnFilterButtonMapping: Map<string, HTMLElement> = new Map<
         string,
         HTMLElement
     >();
+    private columnSortButtonMapping: Map<string, SortProperties> = new Map<
+        string,
+        SortProperties
+    >();
     private _listData: TableFilterListElement[] = [];
     private _list!: VirtualizedList<TableFilterListElement>;
 
@@ -116,33 +121,105 @@ export class HeaderFilter<T extends Slick.SlickData> {
         const theme: string = resolveVscodeThemeType(this.theme);
         args.node.classList.add("slick-header-with-filter");
         args.node.classList.add(theme);
-        const $el = jQuery(
+        const $filterButton = jQuery(
             `<button tabindex="-1" id="anchor-btn" aria-label="${ShowFilterText}" title="${ShowFilterText}"></button>`,
         )
             .addClass("slick-header-menubutton")
             .data("column", column);
+        const $sortButton = jQuery(
+            `<button tabindex="-1" id="anchor-btn" aria-label="${SortAscendingText}" title="${SortAscendingText}"></button>`,
+        )
+            .addClass("slick-header-sort-button")
+            .data("column", column);
         if (column.filterValues?.length) {
-            this.setButtonImage($el, column.filterValues?.length > 0);
+            this.setButtonImage($filterButton, column.filterValues?.length > 0);
+        }
+
+        const filterButton = $filterButton.get(0);
+        if (filterButton) {
+            this._eventManager.addEventListener(
+                filterButton,
+                "click",
+                async (e: Event) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    await this.showFilter(filterButton);
+                    this.grid.onHeaderClick.notify();
+                },
+            );
         }
 
-        const elDivElement = $el.get(0);
-        if (elDivElement) {
+        const sortButton = $sortButton.get(0);
+        if (sortButton) {
             this._eventManager.addEventListener(
-                elDivElement,
+                sortButton,
                 "click",
                 async (e: Event) => {
                     e.stopPropagation();
                     e.preventDefault();
-                    await this.showFilter(elDivElement);
+                    this.columnDef = jQuery(sortButton).data("column"); //TODO: fix, shouldn't assign in the event handler
+                    let columnFilterState: ColumnFilterState = {
+                        columnDef: this.columnDef.id!,
+                        filterValues: this.columnDef.filterValues!,
+                        sorted: this.columnDef.sorted ?? SortProperties.NONE,
+                    };
+                    let sortState = this.columnSortButtonMapping.get(
+                        column.id!,
+                    );
+
+                    switch (sortState) {
+                        case SortProperties.NONE:
+                            $sortButton.removeClass("slick-header-sort-button");
+                            $sortButton.addClass("slick-header-sortasc-button");
+                            await this.handleMenuItemClick("sort-asc", column);
+                            this.grid.setSortColumn(column.id!, true);
+                            this.columnSortButtonMapping.set(
+                                column.id!,
+                                SortProperties.ASC,
+                            );
+                            columnFilterState.sorted = SortProperties.ASC;
+                            break;
+                        case SortProperties.ASC:
+                            $sortButton.removeClass(
+                                "slick-header-sortasc-button",
+                            );
+                            $sortButton.addClass(
+                                "slick-header-sortdesc-button",
+                            );
+                            await this.handleMenuItemClick("sort-desc", column);
+                            this.grid.setSortColumn(column.id!, false);
+                            this.columnSortButtonMapping.set(
+                                column.id!,
+                                SortProperties.DESC,
+                            );
+                            columnFilterState.sorted = SortProperties.DESC;
+                            break;
+                        case SortProperties.DESC:
+                            $sortButton.removeClass(
+                                "slick-header-sortdesc-button",
+                            );
+                            $sortButton.addClass("slick-header-sort-button");
+                            this.columnSortButtonMapping.set(
+                                column.id!,
+                                SortProperties.NONE,
+                            );
+                            await this.resetData(this.columnDef);
+                            columnFilterState.sorted = SortProperties.NONE;
+                            this.updateState(columnFilterState);
+                            break;
+                    }
                     this.grid.onHeaderClick.notify();
+
+                    this.updateState(columnFilterState);
                 },
             );
         }
 
-        $el.appendTo(args.node);
+        $sortButton.appendTo(args.node);
+        $filterButton.appendTo(args.node);
 
-        //@ts-ignore
-        this.columnButtonMapping[column.id] = $el[0];
+        this.columnFilterButtonMapping.set(column.id!, filterButton);
+        this.columnSortButtonMapping.set(column.id!, SortProperties.NONE);
     }
 
     private async showFilter(filterButton: HTMLElement) {
@@ -169,8 +246,6 @@ export class HeaderFilter<T extends Slick.SlickData> {
         const offset = jQuery(filterButton).offset();
         const $popup = jQuery(
             '<div id="popup-menu" class="slick-header-menu">' +
-                `<button id="sort-ascending" type="button" icon="slick-header-menuicon.ascending" class="sort-btn">${locConstants.queryResult.sortAscending}</button>` +
-                `<button id="sort-descending" type="button" icon="slick-header-menuicon.descending" class="sort-btn">${locConstants.queryResult.sortDescending}</button>` +
                 `<div style="display: flex; align-items: center; margin-bottom: 8px;">` +
                 `<input type="checkbox" id="select-all-checkbox" style="margin-right: 8px;" />` +
                 `<input type="text" id="search-input" class="searchbox" placeholder=${locConstants.queryResult.search}  />` +
@@ -329,8 +404,6 @@ export class HeaderFilter<T extends Slick.SlickData> {
             async () => {
                 this.columnDef.filterValues!.length = 0;
 
-                closePopup($popup);
-                this.activePopup = null;
                 if (!$menuButton) {
                     return;
                 }
@@ -436,8 +509,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
         this.grid.render();
     }
 
-    private async handleApply(columnDef: Slick.Column<T>, clear?: boolean) {
-        let columnFilterState: ColumnFilterState;
+    private async resetData(columnDef: Slick.Column<T>) {
         const dataView = this.grid.getData() as IDisposableDataProvider<T>;
         if (instanceOfIDisposableDataProvider(dataView)) {
             await dataView.filter(this.grid.getColumns());
@@ -447,6 +519,11 @@ export class HeaderFilter<T extends Slick.SlickData> {
         }
         this.onFilterApplied.notify({ grid: this.grid, column: columnDef });
         this.setFocusToColumn(columnDef);
+    }
+
+    private async handleApply(columnDef: Slick.Column<T>, clear?: boolean) {
+        let columnFilterState: ColumnFilterState;
+        await this.resetData(columnDef);
         // clear filterValues if clear is true
         if (clear) {
             columnFilterState = {

From ed12b84b1494e9acabd9de17125696fa313e3c6c Mon Sep 17 00:00:00 2001
From: Christopher Suh <chris.s.suh@gmail.com>
Date: Fri, 17 Jan 2025 09:54:39 -0800
Subject: [PATCH 02/12] remove extraneous call

---
 .../pages/QueryResult/table/plugins/headerFilter.plugin.ts      | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts b/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
index 743b0e0788..9ef5136bbb 100644
--- a/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
+++ b/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
@@ -172,7 +172,6 @@ export class HeaderFilter<T extends Slick.SlickData> {
                             $sortButton.removeClass("slick-header-sort-button");
                             $sortButton.addClass("slick-header-sortasc-button");
                             await this.handleMenuItemClick("sort-asc", column);
-                            this.grid.setSortColumn(column.id!, true);
                             this.columnSortButtonMapping.set(
                                 column.id!,
                                 SortProperties.ASC,
@@ -187,7 +186,6 @@ export class HeaderFilter<T extends Slick.SlickData> {
                                 "slick-header-sortdesc-button",
                             );
                             await this.handleMenuItemClick("sort-desc", column);
-                            this.grid.setSortColumn(column.id!, false);
                             this.columnSortButtonMapping.set(
                                 column.id!,
                                 SortProperties.DESC,

From 4ae1ec69e34b7d12f8caa9b6cf304b931cc13ef9 Mon Sep 17 00:00:00 2001
From: "Christopher Suh (from Dev Box)" <chsuh@microsoft.com>
Date: Sat, 25 Jan 2025 17:07:02 -0800
Subject: [PATCH 03/12] wip

---
 .../table/plugins/headerFilter.plugin.ts      | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts b/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
index 9ef5136bbb..eb8e796ee9 100644
--- a/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
+++ b/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
@@ -65,6 +65,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
 
     private _eventManager = new EventManager();
     private queryResultState: QueryResultState;
+    private currentSortColumn: string = "";
 
     constructor(theme: ColorThemeKind, queryResultState: QueryResultState) {
         this.queryResultState = queryResultState;
@@ -169,6 +170,34 @@ export class HeaderFilter<T extends Slick.SlickData> {
 
                     switch (sortState) {
                         case SortProperties.NONE:
+                            if (this.currentSortColumn) {
+                                const $prevSortButton = jQuery(args.node).find(
+                                    `button[data-column=${this.currentSortColumn}]`,
+                                );
+                                let prevColumnDef = jQuery(
+                                    $prevSortButton.get(0),
+                                ).data("column");
+                                $prevSortButton.removeClass(
+                                    "slick-header-sortasc-button",
+                                );
+                                $prevSortButton.removeClass(
+                                    "slick-header-sortdesc-button",
+                                );
+                                $prevSortButton.addClass(
+                                    "slick-header-sort-button",
+                                );
+                                this.columnSortButtonMapping.set(
+                                    this.currentSortColumn,
+                                    SortProperties.NONE,
+                                );
+                                columnFilterState.sorted = SortProperties.NONE;
+                                let prevFilterState: ColumnFilterState = {
+                                    columnDef: prevColumnDef.id!,
+                                    filterValues: prevColumnDef.filterValues!,
+                                    sorted: SortProperties.NONE,
+                                };
+                                this.updateState(prevFilterState);
+                            }
                             $sortButton.removeClass("slick-header-sort-button");
                             $sortButton.addClass("slick-header-sortasc-button");
                             await this.handleMenuItemClick("sort-asc", column);
@@ -177,6 +206,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
                                 SortProperties.ASC,
                             );
                             columnFilterState.sorted = SortProperties.ASC;
+                            this.currentSortColumn = column.id!;
                             break;
                         case SortProperties.ASC:
                             $sortButton.removeClass(
@@ -204,6 +234,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
                             await this.resetData(this.columnDef);
                             columnFilterState.sorted = SortProperties.NONE;
                             this.updateState(columnFilterState);
+                            this.currentSortColumn = "";
                             break;
                     }
                     this.grid.onHeaderClick.notify();

From 1f79cb0361e9108713eef896c2a8e7c7117383cd Mon Sep 17 00:00:00 2001
From: Christopher Suh <chris.s.suh@gmail.com>
Date: Sat, 25 Jan 2025 17:45:34 -0800
Subject: [PATCH 04/12] store prev sort button

---
 .../table/plugins/headerFilter.plugin.ts       | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts b/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
index eb8e796ee9..168d18ba42 100644
--- a/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
+++ b/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
@@ -66,6 +66,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
     private _eventManager = new EventManager();
     private queryResultState: QueryResultState;
     private currentSortColumn: string = "";
+    private currentSortButton: JQuery<HTMLElement> | null = null;
 
     constructor(theme: ColorThemeKind, queryResultState: QueryResultState) {
         this.queryResultState = queryResultState;
@@ -128,7 +129,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
             .addClass("slick-header-menubutton")
             .data("column", column);
         const $sortButton = jQuery(
-            `<button tabindex="-1" id="anchor-btn" aria-label="${SortAscendingText}" title="${SortAscendingText}"></button>`,
+            `<button tabindex="-1" id="anchor-btn" aria-label="${SortAscendingText}" title="${SortAscendingText} data-column-id=${column.id}"></button>`,
         )
             .addClass("slick-header-sort-button")
             .data("column", column);
@@ -170,13 +171,13 @@ export class HeaderFilter<T extends Slick.SlickData> {
 
                     switch (sortState) {
                         case SortProperties.NONE:
-                            if (this.currentSortColumn) {
-                                const $prevSortButton = jQuery(args.node).find(
-                                    `button[data-column=${this.currentSortColumn}]`,
-                                );
-                                let prevColumnDef = jQuery(
-                                    $prevSortButton.get(0),
-                                ).data("column");
+                            if (
+                                this.currentSortColumn &&
+                                this.currentSortButton
+                            ) {
+                                const $prevSortButton = this.currentSortButton;
+                                let prevColumnDef =
+                                    jQuery($prevSortButton).data("column");
                                 $prevSortButton.removeClass(
                                     "slick-header-sortasc-button",
                                 );
@@ -207,6 +208,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
                             );
                             columnFilterState.sorted = SortProperties.ASC;
                             this.currentSortColumn = column.id!;
+                            this.currentSortButton = $sortButton;
                             break;
                         case SortProperties.ASC:
                             $sortButton.removeClass(

From 1d3b70da7c97fd2d6423542ea4fd0abfa96da750 Mon Sep 17 00:00:00 2001
From: "Christopher Suh (from Dev Box)" <chsuh@microsoft.com>
Date: Tue, 4 Mar 2025 16:40:56 -0800
Subject: [PATCH 05/12] remove reset to unfiltered state after sorting a column

---
 .../table/plugins/headerFilter.plugin.ts      | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts b/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
index aad4f3f917..b4b786117a 100644
--- a/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
+++ b/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
@@ -214,13 +214,11 @@ export class HeaderFilter<T extends Slick.SlickData> {
                                 );
                             }
                             $sortButton.removeClass("slick-header-sort-button");
-                            $sortButton.addClass("slick-header-sortasc-button");
-                            await this.handleMenuItemClick("sort-asc", column);
-                            this.columnSortButtonMapping.set(
-                                column.id!,
-                                SortProperties.ASC,
+                            columnFilterState = await this.setSortAscending(
+                                $sortButton,
+                                column,
+                                columnFilterState,
                             );
-                            columnFilterState.sorted = SortProperties.ASC;
                             this.currentSortColumn = column.id!;
                             this.currentSortButton = $sortButton;
                             break;
@@ -242,18 +240,11 @@ export class HeaderFilter<T extends Slick.SlickData> {
                             $sortButton.removeClass(
                                 "slick-header-sortdesc-button",
                             );
-                            $sortButton.addClass("slick-header-sort-button");
-                            this.columnSortButtonMapping.set(
-                                column.id!,
-                                SortProperties.NONE,
-                            );
-                            await this.resetData(this.columnDef);
-                            columnFilterState.sorted = SortProperties.NONE;
-                            await this.updateState(
+                            columnFilterState = await this.setSortAscending(
+                                $sortButton,
+                                column,
                                 columnFilterState,
-                                this.columnDef.id!,
                             );
-                            this.currentSortColumn = "";
                             break;
                     }
                     this.grid.onHeaderClick.notify();
@@ -273,6 +264,18 @@ export class HeaderFilter<T extends Slick.SlickData> {
         this.columnSortButtonMapping.set(column.id!, SortProperties.NONE);
     }
 
+    private async setSortAscending(
+        $sortButton: JQuery<HTMLElement>,
+        column: FilterableColumn<T>,
+        columnFilterState: ColumnFilterState,
+    ): Promise<ColumnFilterState> {
+        $sortButton.addClass("slick-header-sortasc-button");
+        await this.handleMenuItemClick("sort-asc", column);
+        this.columnSortButtonMapping.set(column.id!, SortProperties.ASC);
+        columnFilterState.sorted = SortProperties.ASC;
+        return columnFilterState;
+    }
+
     private async showFilter(filterButton: HTMLElement) {
         let $menuButton: JQuery<HTMLElement> | undefined;
         const target = withNullAsUndefined(filterButton);

From 37f50f134ae80a8f5c75b8e62c2ebb6f1fc8052e Mon Sep 17 00:00:00 2001
From: "Christopher Suh (from Dev Box)" <chsuh@microsoft.com>
Date: Wed, 5 Mar 2025 21:26:02 -0800
Subject: [PATCH 06/12] Revert "remove reset to unfiltered state after sorting
 a column"

This reverts commit 1d3b70da7c97fd2d6423542ea4fd0abfa96da750.
---
 .../table/plugins/headerFilter.plugin.ts      | 35 +++++++++----------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts b/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
index b4b786117a..aad4f3f917 100644
--- a/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
+++ b/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
@@ -214,11 +214,13 @@ export class HeaderFilter<T extends Slick.SlickData> {
                                 );
                             }
                             $sortButton.removeClass("slick-header-sort-button");
-                            columnFilterState = await this.setSortAscending(
-                                $sortButton,
-                                column,
-                                columnFilterState,
+                            $sortButton.addClass("slick-header-sortasc-button");
+                            await this.handleMenuItemClick("sort-asc", column);
+                            this.columnSortButtonMapping.set(
+                                column.id!,
+                                SortProperties.ASC,
                             );
+                            columnFilterState.sorted = SortProperties.ASC;
                             this.currentSortColumn = column.id!;
                             this.currentSortButton = $sortButton;
                             break;
@@ -240,11 +242,18 @@ export class HeaderFilter<T extends Slick.SlickData> {
                             $sortButton.removeClass(
                                 "slick-header-sortdesc-button",
                             );
-                            columnFilterState = await this.setSortAscending(
-                                $sortButton,
-                                column,
+                            $sortButton.addClass("slick-header-sort-button");
+                            this.columnSortButtonMapping.set(
+                                column.id!,
+                                SortProperties.NONE,
+                            );
+                            await this.resetData(this.columnDef);
+                            columnFilterState.sorted = SortProperties.NONE;
+                            await this.updateState(
                                 columnFilterState,
+                                this.columnDef.id!,
                             );
+                            this.currentSortColumn = "";
                             break;
                     }
                     this.grid.onHeaderClick.notify();
@@ -264,18 +273,6 @@ export class HeaderFilter<T extends Slick.SlickData> {
         this.columnSortButtonMapping.set(column.id!, SortProperties.NONE);
     }
 
-    private async setSortAscending(
-        $sortButton: JQuery<HTMLElement>,
-        column: FilterableColumn<T>,
-        columnFilterState: ColumnFilterState,
-    ): Promise<ColumnFilterState> {
-        $sortButton.addClass("slick-header-sortasc-button");
-        await this.handleMenuItemClick("sort-asc", column);
-        this.columnSortButtonMapping.set(column.id!, SortProperties.ASC);
-        columnFilterState.sorted = SortProperties.ASC;
-        return columnFilterState;
-    }
-
     private async showFilter(filterButton: HTMLElement) {
         let $menuButton: JQuery<HTMLElement> | undefined;
         const target = withNullAsUndefined(filterButton);

From 1e4a42bba30d4facdf3001fabbee29407951e1c6 Mon Sep 17 00:00:00 2001
From: "Christopher Suh (from Dev Box)" <chsuh@microsoft.com>
Date: Thu, 6 Mar 2025 11:08:46 -0800
Subject: [PATCH 07/12] add third state for sort button, resetting data to
 original order

---
 .../pages/QueryResult/resultGrid.tsx          |  1 +
 .../pages/QueryResult/table/asyncDataView.ts  |  4 +++
 .../pages/QueryResult/table/dataProvider.ts   |  5 ++++
 .../QueryResult/table/hybridDataProvider.ts   |  5 ++++
 .../table/plugins/headerFilter.plugin.ts      | 26 ++++++++++---------
 .../pages/QueryResult/table/tableDataView.ts  | 11 ++++++++
 typings/slickgrid.d.ts                        |  1 +
 7 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/reactviews/pages/QueryResult/resultGrid.tsx b/src/reactviews/pages/QueryResult/resultGrid.tsx
index a33ae6cb79..7a83bbff30 100644
--- a/src/reactviews/pages/QueryResult/resultGrid.tsx
+++ b/src/reactviews/pages/QueryResult/resultGrid.tsx
@@ -234,6 +234,7 @@ const ResultGrid = forwardRef<ResultGridHandle, ResultGridProps>(
                 showRowNumber: true,
                 forceFitColumns: false,
                 defaultColumnWidth: COLUMN_WIDTH,
+                // multiColumnSort: true,
             };
             let rowNumberColumn = new RowNumberColumn<Slick.SlickData>({
                 autoCellSelection: false,
diff --git a/src/reactviews/pages/QueryResult/table/asyncDataView.ts b/src/reactviews/pages/QueryResult/table/asyncDataView.ts
index 12fa1ce130..5006aca4a9 100644
--- 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
index aeb80cc09f..f77f2eb97a 100644
--- 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
index 4b595a91b3..ce15fa69ad 100644
--- a/src/reactviews/pages/QueryResult/table/hybridDataProvider.ts
+++ b/src/reactviews/pages/QueryResult/table/hybridDataProvider.ts
@@ -116,6 +116,11 @@ export class HybridDataProvider<T extends Slick.SlickData>
         void this.provider.sort(options);
     }
 
+    public async resetSort() {
+        // const data = await this._loadDataFn(0, this.length);
+        void this.provider.resetSort();
+    }
+
     private get thresholdReached(): boolean {
         return (
             this._options.inMemoryDataCountThreshold !== undefined &&
diff --git a/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts b/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
index aad4f3f917..ebea4cc947 100644
--- a/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
+++ b/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
@@ -33,7 +33,7 @@ import {
     QueryResultWebviewState,
 } from "../../../../../sharedInterfaces/queryResult";
 
-export type HeaderFilterCommands = "sort-asc" | "sort-desc";
+export type HeaderFilterCommands = "sort-asc" | "sort-desc" | "reset";
 
 export interface CommandEventArgs<T extends Slick.SlickData> {
     grid: Slick.Grid<T>;
@@ -247,7 +247,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
                                 column.id!,
                                 SortProperties.NONE,
                             );
-                            await this.resetData(this.columnDef);
+                            await this.handleMenuItemClick("reset", column);
                             columnFilterState.sorted = SortProperties.NONE;
                             await this.updateState(
                                 columnFilterState,
@@ -744,16 +744,18 @@ export class HeaderFilter<T extends Slick.SlickData> {
                 command === "sort-asc",
             );
         }
-        if (
-            instanceOfIDisposableDataProvider<T>(dataView) &&
-            (command === "sort-asc" || command === "sort-desc")
-        ) {
-            await dataView.sort({
-                grid: this.grid,
-                multiColumnSort: false,
-                sortCol: this.columnDef,
-                sortAsc: command === "sort-asc",
-            });
+        if (instanceOfIDisposableDataProvider<T>(dataView)) {
+            if (command === "sort-asc" || command === "sort-desc") {
+                await dataView.sort({
+                    grid: this.grid,
+                    multiColumnSort: false,
+                    sortCol: this.columnDef,
+                    sortAsc: command === "sort-asc",
+                });
+            } else {
+                dataView.resetSort();
+                this.grid.setSortColumn("", false);
+            }
             this.grid.invalidateAllRows();
             this.grid.updateRowCount();
             this.grid.render();
diff --git a/src/reactviews/pages/QueryResult/table/tableDataView.ts b/src/reactviews/pages/QueryResult/table/tableDataView.ts
index c819ce6e3c..0c08e71675 100644
--- a/src/reactviews/pages/QueryResult/table/tableDataView.ts
+++ b/src/reactviews/pages/QueryResult/table/tableDataView.ts
@@ -88,6 +88,8 @@ export class TableDataView<T extends Slick.SlickData>
     private _data: Array<T>;
     //Used when filtering is enabled, _allData holds the complete set of data.
     private _allData!: Array<T>;
+    //Used to reset the data when a sort is cleared.
+    private _resetData: Array<T>;
     private _findArray?: Array<IFindPosition>;
     private _findIndex?: number;
     private _filterEnabled: boolean;
@@ -106,6 +108,7 @@ export class TableDataView<T extends Slick.SlickData>
         private _filterFn?: TableFilterFunc<T>,
         private _cellValueGetter: CellValueGetter = defaultCellValueGetter,
     ) {
+        this._resetData = [];
         if (data) {
             this._data = data;
         } else {
@@ -179,11 +182,19 @@ export class TableDataView<T extends Slick.SlickData>
     }
 
     async sort(args: Slick.OnSortEventArgs<T>): Promise<void> {
+        if (this._resetData.length === 0) {
+            this._resetData.push(...this._data);
+        }
         this._data = this._sortFn!(args, this._data);
         console.log(args);
         // this._onSortComplete.fire(args);
     }
 
+    async resetSort(): Promise<void> {
+        this._data = this._resetData;
+        this._resetData = [];
+    }
+
     getLength(): number {
         return this._data.length;
     }
diff --git a/typings/slickgrid.d.ts b/typings/slickgrid.d.ts
index 6fe1297fc6..c8254de22f 100644
--- a/typings/slickgrid.d.ts
+++ b/typings/slickgrid.d.ts
@@ -1439,6 +1439,7 @@ declare namespace Slick {
 
 		// Single column returned
 		sortCol?: Column<T>;
+		//TODO: change this to 3 states?
 		sortAsc: boolean;
 
 		// Multiple columns returned

From 23ff2487cc0c465531c5437f77469470768127f0 Mon Sep 17 00:00:00 2001
From: "Christopher Suh (from Dev Box)" <chsuh@microsoft.com>
Date: Fri, 7 Mar 2025 15:35:19 -0800
Subject: [PATCH 08/12] fix sort/filter scenarios

---
 .../pages/QueryResult/table/interfaces.ts     |  6 ++
 .../table/plugins/headerFilter.plugin.ts      |  6 +-
 .../pages/QueryResult/table/tableDataView.ts  | 69 ++++++++++++++++---
 3 files changed, 69 insertions(+), 12 deletions(-)

diff --git a/src/reactviews/pages/QueryResult/table/interfaces.ts b/src/reactviews/pages/QueryResult/table/interfaces.ts
index 7f7da3a34e..11ab38c7ee 100644
--- 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;
diff --git a/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts b/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
index ebea4cc947..cf69301654 100644
--- a/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
+++ b/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
@@ -33,12 +33,12 @@ import {
     QueryResultWebviewState,
 } from "../../../../../sharedInterfaces/queryResult";
 
-export type HeaderFilterCommands = "sort-asc" | "sort-desc" | "reset";
+export type SortDirection = "sort-asc" | "sort-desc" | "reset";
 
 export interface CommandEventArgs<T extends Slick.SlickData> {
     grid: Slick.Grid<T>;
     column: Slick.Column<T>;
-    command: HeaderFilterCommands;
+    command: SortDirection;
 }
 
 const ShowFilterText = locConstants.queryResult.showFilter;
@@ -734,7 +734,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
     }
 
     private async handleMenuItemClick(
-        command: HeaderFilterCommands,
+        command: SortDirection,
         columnDef: Slick.Column<T>,
     ) {
         const dataView = this.grid.getData();
diff --git a/src/reactviews/pages/QueryResult/table/tableDataView.ts b/src/reactviews/pages/QueryResult/table/tableDataView.ts
index 0c08e71675..1c4b8fca4d 100644
--- a/src/reactviews/pages/QueryResult/table/tableDataView.ts
+++ b/src/reactviews/pages/QueryResult/table/tableDataView.ts
@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { FilterableColumn } from "./interfaces";
+import { ColumnSortState, FilterableColumn } from "./interfaces";
 import { IDisposableDataProvider } from "./dataProvider";
 
 export interface IFindPosition {
@@ -89,11 +89,13 @@ export class TableDataView<T extends Slick.SlickData>
     //Used when filtering is enabled, _allData holds the complete set of data.
     private _allData!: Array<T>;
     //Used to reset the data when a sort is cleared.
-    private _resetData: Array<T>;
+    private _resetSortData: Array<T>;
+    // private _resetDataUnfiltered: Array<T>;
     private _findArray?: Array<IFindPosition>;
     private _findIndex?: number;
     private _filterEnabled: boolean;
     private _currentColumnFilters: FilterableColumn<T>[] = [];
+    private _currentColumnSort: ColumnSortState<T> | undefined;
 
     // private _onFilterStateChange = new vscode.EventEmitter<void>();
     // get onFilterStateChange(): vscode.Event<void> { return this._onFilterStateChange.event; }
@@ -108,7 +110,8 @@ export class TableDataView<T extends Slick.SlickData>
         private _filterFn?: TableFilterFunc<T>,
         private _cellValueGetter: CellValueGetter = defaultCellValueGetter,
     ) {
-        this._resetData = [];
+        this._resetSortData = [];
+        // this._resetDataUnfiltered = [];
         if (data) {
             this._data = data;
         } else {
@@ -164,35 +167,83 @@ export class TableDataView<T extends Slick.SlickData>
         }
         this._currentColumnFilters = columns!;
         this._data = this._filterFn!(this._allData, columns!);
+        if (this._resetSortData.length > 0) {
+            // this._resetDataUnfiltered = new Array(...this._resetSortData);
+            this._resetSortData = this._filterFn!(
+                this._resetSortData,
+                columns!,
+            );
+        }
         if (this._data.length === this._allData.length) {
-            this.clearFilter();
+            await this.clearFilter();
         } else {
             console.log("filterstatechange");
             // this._onFilterStateChange.fire();
         }
     }
 
-    public clearFilter() {
+    public async clearFilter() {
         if (this._filterEnabled) {
             this._data = this._allData;
+            if (this._resetSortData.length > 0) {
+                this._resetSortData = new Array(...this._allData);
+            }
             this._allData = [];
             this._filterEnabled = false;
+            if (this._currentColumnSort) {
+                // this._resetDataUnfiltered = new Array(...this._data);
+                this._data = this._sortFn(
+                    {
+                        sortCol: this._currentColumnSort.column,
+                        sortAsc:
+                            this._currentColumnSort.sortDirection ===
+                            "sort-asc",
+                        grid: null,
+                        multiColumnSort: false,
+                    },
+                    this._data,
+                );
+            }
             // this._onFilterStateChange.fire();
         }
     }
 
     async sort(args: Slick.OnSortEventArgs<T>): Promise<void> {
-        if (this._resetData.length === 0) {
-            this._resetData.push(...this._data);
+        if (this._resetSortData.length === 0) {
+            this._resetSortData.push(...this._data);
         }
+
         this._data = this._sortFn!(args, this._data);
+        this._currentColumnSort = {
+            column: args.sortCol!,
+            sortDirection: args.sortAsc ? "sort-asc" : "sort-desc",
+        };
         console.log(args);
         // this._onSortComplete.fire(args);
     }
 
+    // TODO: need to consider multiple scenarios:
+    // 1. filter is enabled then sort & unsort,
+    // 2. filter is not enabled, sort, then enable filter & unsort
+    // 3. filter is enabled then sort, and then disabled <--TODO:  doesn't work right nwo
     async resetSort(): Promise<void> {
-        this._data = this._resetData;
-        this._resetData = [];
+        // an old sort might have been cleared
+        if (this._data.length > this._resetSortData.length) {
+            // this._data = this._resetDataUnfiltered;
+            this._data = this._allData;
+        } else {
+            this._data = this._resetSortData;
+        }
+        // TODO: if there are filters applied, we need to reapply them to the reset data
+        if (this._currentColumnFilters.length > 0) {
+            this._data = this._filterFn!(
+                this._data,
+                this._currentColumnFilters,
+            );
+        }
+        this._currentColumnSort = undefined;
+        this._resetSortData = [];
+        // this._resetDataUnfiltered = [];
     }
 
     getLength(): number {

From a19a7a8b5d816e4fc6a3a1501fa89e2777c2136c Mon Sep 17 00:00:00 2001
From: "Christopher Suh (from Dev Box)" <chsuh@microsoft.com>
Date: Fri, 7 Mar 2025 16:03:29 -0800
Subject: [PATCH 09/12] fix build

---
 src/reactviews/pages/QueryResult/table/tableDataView.ts | 4 ++--
 typings/slickgrid.d.ts                                  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/reactviews/pages/QueryResult/table/tableDataView.ts b/src/reactviews/pages/QueryResult/table/tableDataView.ts
index 1c4b8fca4d..a9ea52d75d 100644
--- a/src/reactviews/pages/QueryResult/table/tableDataView.ts
+++ b/src/reactviews/pages/QueryResult/table/tableDataView.ts
@@ -192,13 +192,13 @@ export class TableDataView<T extends Slick.SlickData>
             this._filterEnabled = false;
             if (this._currentColumnSort) {
                 // this._resetDataUnfiltered = new Array(...this._data);
-                this._data = this._sortFn(
+                this._data = this._sortFn!(
                     {
                         sortCol: this._currentColumnSort.column,
                         sortAsc:
                             this._currentColumnSort.sortDirection ===
                             "sort-asc",
-                        grid: null,
+                        grid: undefined,
                         multiColumnSort: false,
                     },
                     this._data,
diff --git a/typings/slickgrid.d.ts b/typings/slickgrid.d.ts
index c8254de22f..df901c6908 100644
--- a/typings/slickgrid.d.ts
+++ b/typings/slickgrid.d.ts
@@ -1281,7 +1281,7 @@ declare namespace Slick {
 	}
 
 	export interface GridEventArgs<T extends SlickData> {
-		grid: Grid<T>;
+		grid?: Grid<T>;
 	}
 
 	export interface OnCellCssStylesChangedEventArgs<T extends SlickData> extends GridEventArgs<T> {

From 312de8928bc4f5c4f4f6ba9ea71c0f7899ce963a Mon Sep 17 00:00:00 2001
From: "Christopher Suh (from Dev Box)" <chsuh@microsoft.com>
Date: Mon, 10 Mar 2025 11:29:19 -0700
Subject: [PATCH 10/12] pr comments & cleanup

---
 src/reactviews/media/table.css                | 33 +++++--------------
 .../pages/QueryResult/resultGrid.tsx          |  1 -
 .../QueryResult/table/hybridDataProvider.ts   |  1 -
 .../pages/QueryResult/table/tableDataView.ts  |  2 --
 typings/slickgrid.d.ts                        |  1 -
 5 files changed, 9 insertions(+), 29 deletions(-)

diff --git a/src/reactviews/media/table.css b/src/reactviews/media/table.css
index f80a90263c..99eb0be944 100644
--- a/src/reactviews/media/table.css
+++ b/src/reactviews/media/table.css
@@ -61,46 +61,31 @@
     flex: 0 0 auto;
 }
 
-.slick-header-sort-button {
+.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;
-    background-image: url("sort_inverse.svg");
     flex: 0 0 auto;
     margin-right: 2px;
     background-color: transparent;
-    border: 0px;
-    padding: 0px;
+    border: 0;
+    padding: 0;
+}
+
+.slick-header-sort-button {
+    background-image: url("sort_inverse.svg");
 }
 
 .slick-header-sortdesc-button {
-    background-position: center center;
-    background-repeat: no-repeat;
-    cursor: pointer;
-    display: inline-block;
-    width: 16px;
     background-image: url("sort_desc_inverse.svg");
-    flex: 0 0 auto;
-    margin-right: 2px;
-    background-color: transparent;
-    border: 0px;
-    padding: 0px;
 }
 
 .slick-header-sortasc-button {
-    background-position: center center;
-    background-repeat: no-repeat;
-    cursor: pointer;
-    display: inline-block;
-    width: 16px;
     background-image: url("sort_asc_inverse.svg");
-    flex: 0 0 auto;
-    margin-right: 2px;
-    background-color: transparent;
-    border: 0px;
-    padding: 0px;
 }
 
 .slick-header-menubutton {
diff --git a/src/reactviews/pages/QueryResult/resultGrid.tsx b/src/reactviews/pages/QueryResult/resultGrid.tsx
index 7a83bbff30..a33ae6cb79 100644
--- a/src/reactviews/pages/QueryResult/resultGrid.tsx
+++ b/src/reactviews/pages/QueryResult/resultGrid.tsx
@@ -234,7 +234,6 @@ const ResultGrid = forwardRef<ResultGridHandle, ResultGridProps>(
                 showRowNumber: true,
                 forceFitColumns: false,
                 defaultColumnWidth: COLUMN_WIDTH,
-                // multiColumnSort: true,
             };
             let rowNumberColumn = new RowNumberColumn<Slick.SlickData>({
                 autoCellSelection: false,
diff --git a/src/reactviews/pages/QueryResult/table/hybridDataProvider.ts b/src/reactviews/pages/QueryResult/table/hybridDataProvider.ts
index ce15fa69ad..bbbfcdc626 100644
--- a/src/reactviews/pages/QueryResult/table/hybridDataProvider.ts
+++ b/src/reactviews/pages/QueryResult/table/hybridDataProvider.ts
@@ -117,7 +117,6 @@ export class HybridDataProvider<T extends Slick.SlickData>
     }
 
     public async resetSort() {
-        // const data = await this._loadDataFn(0, this.length);
         void this.provider.resetSort();
     }
 
diff --git a/src/reactviews/pages/QueryResult/table/tableDataView.ts b/src/reactviews/pages/QueryResult/table/tableDataView.ts
index a9ea52d75d..0dd9ff90f9 100644
--- a/src/reactviews/pages/QueryResult/table/tableDataView.ts
+++ b/src/reactviews/pages/QueryResult/table/tableDataView.ts
@@ -168,7 +168,6 @@ export class TableDataView<T extends Slick.SlickData>
         this._currentColumnFilters = columns!;
         this._data = this._filterFn!(this._allData, columns!);
         if (this._resetSortData.length > 0) {
-            // this._resetDataUnfiltered = new Array(...this._resetSortData);
             this._resetSortData = this._filterFn!(
                 this._resetSortData,
                 columns!,
@@ -191,7 +190,6 @@ export class TableDataView<T extends Slick.SlickData>
             this._allData = [];
             this._filterEnabled = false;
             if (this._currentColumnSort) {
-                // this._resetDataUnfiltered = new Array(...this._data);
                 this._data = this._sortFn!(
                     {
                         sortCol: this._currentColumnSort.column,
diff --git a/typings/slickgrid.d.ts b/typings/slickgrid.d.ts
index df901c6908..713176c7e1 100644
--- a/typings/slickgrid.d.ts
+++ b/typings/slickgrid.d.ts
@@ -1439,7 +1439,6 @@ declare namespace Slick {
 
 		// Single column returned
 		sortCol?: Column<T>;
-		//TODO: change this to 3 states?
 		sortAsc: boolean;
 
 		// Multiple columns returned

From c54b2540e6c573258e990f6980c6be26260414d8 Mon Sep 17 00:00:00 2001
From: "Christopher Suh (from Dev Box)" <chsuh@microsoft.com>
Date: Mon, 10 Mar 2025 11:53:11 -0700
Subject: [PATCH 11/12] cleanup

---
 src/reactviews/pages/QueryResult/table/tableDataView.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/reactviews/pages/QueryResult/table/tableDataView.ts b/src/reactviews/pages/QueryResult/table/tableDataView.ts
index 0dd9ff90f9..c2c7de1577 100644
--- a/src/reactviews/pages/QueryResult/table/tableDataView.ts
+++ b/src/reactviews/pages/QueryResult/table/tableDataView.ts
@@ -220,10 +220,10 @@ export class TableDataView<T extends Slick.SlickData>
         // this._onSortComplete.fire(args);
     }
 
-    // TODO: need to consider multiple scenarios:
+    // Need to consider multiple scenarios:
     // 1. filter is enabled then sort & unsort,
     // 2. filter is not enabled, sort, then enable filter & unsort
-    // 3. filter is enabled then sort, and then disabled <--TODO:  doesn't work right nwo
+    // 3. filter is enabled then sort, and then disabled
     async resetSort(): Promise<void> {
         // an old sort might have been cleared
         if (this._data.length > this._resetSortData.length) {

From c157fb81d362dad08cf34970a96b4f70e74b53d5 Mon Sep 17 00:00:00 2001
From: "Christopher Suh (from Dev Box)" <chsuh@microsoft.com>
Date: Mon, 10 Mar 2025 11:58:35 -0700
Subject: [PATCH 12/12] update comment

---
 src/reactviews/pages/QueryResult/table/tableDataView.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/reactviews/pages/QueryResult/table/tableDataView.ts b/src/reactviews/pages/QueryResult/table/tableDataView.ts
index c2c7de1577..4cd34a041b 100644
--- a/src/reactviews/pages/QueryResult/table/tableDataView.ts
+++ b/src/reactviews/pages/QueryResult/table/tableDataView.ts
@@ -225,14 +225,14 @@ export class TableDataView<T extends Slick.SlickData>
     // 2. filter is not enabled, sort, then enable filter & unsort
     // 3. filter is enabled then sort, and then disabled
     async resetSort(): Promise<void> {
-        // an old sort might have been cleared
+        // Check if the current data set is larger than the original data set.
+        // If it is, we need to use the full data set and re-apply the current filters.
         if (this._data.length > this._resetSortData.length) {
-            // this._data = this._resetDataUnfiltered;
             this._data = this._allData;
         } else {
             this._data = this._resetSortData;
         }
-        // TODO: if there are filters applied, we need to reapply them to the reset data
+        // if there are filters applied, we need to reapply them to the reset data
         if (this._currentColumnFilters.length > 0) {
             this._data = this._filterFn!(
                 this._data,