(superset) branch master updated: fix(sqllab): filter results table when typing in the search box (#41625)

[ms...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

msyavuz pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new a919dda2ac3 fix(sqllab): filter results table when typing in the search box (#41625)
a919dda2ac3 is described below

commit a919dda2ac3091ad853a4746a1e3a7df0c700183
Author: Mehmet Salih Yavuz <sa...@proton.me>
AuthorDate: Thu Jul 2 12:09:10 2026 +0300

    fix(sqllab): filter results table when typing in the search box (#41625)
---
 .../SqlLab/components/ResultSet/ResultSet.test.tsx | 45 ++++++++++++++++++++++
 .../src/components/FilterableTable/index.tsx       | 20 +++++-----
 2 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.tsx b/superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.tsx
index 9e31eb5ab58..99388fa7ca3 100644
--- a/superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.tsx
+++ b/superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.tsx
@@ -1132,4 +1132,49 @@ describe('ResultSet', () => {
     });
     expect(mockOpenInNewTab).not.toHaveBeenCalled();
   });
+
+  test('filters the results table when typing in the search box', async () => {
+    const filterableQuery = {
+      ...queries[0],
+      id: 'filterableQueryId',
+      cached: false,
+      results: {
+        columns: [{ is_dttm: false, column_name: 'fruit', type: 'STRING' }],
+        selected_columns: [
+          { is_dttm: false, column_name: 'fruit', type: 'STRING' },
+        ],
+        data: [{ fruit: 'apple' }, { fruit: 'banana' }],
+      },
+    };
+    const { getByTestId, getByPlaceholderText, queryByText } = setup(
+      { ...mockedProps, cache: false, queryId: filterableQuery.id },
+      mockStore({
+        ...initialState,
+        user,
+        sqlLab: {
+          ...initialState.sqlLab,
+          queries: {
+            [filterableQuery.id]: filterableQuery,
+          },
+        },
+      }),
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('table-container')).toBeInTheDocument();
+    });
+    // Both rows are visible before filtering
+    expect(queryByText('apple')).toBeInTheDocument();
+    expect(queryByText('banana')).toBeInTheDocument();
+
+    // Typing in the search box filters the rows (case-insensitive substring)
+    fireEvent.change(getByPlaceholderText('Filter results'), {
+      target: { value: 'APP' },
+    });
+
+    await waitFor(() => {
+      expect(queryByText('banana')).not.toBeInTheDocument();
+    });
+    expect(queryByText('apple')).toBeInTheDocument();
+  });
 });
diff --git a/superset-frontend/src/components/FilterableTable/index.tsx b/superset-frontend/src/components/FilterableTable/index.tsx
index dc2f2624da8..d6db0915d9b 100644
--- a/superset-frontend/src/components/FilterableTable/index.tsx
+++ b/superset-frontend/src/components/FilterableTable/index.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useMemo, useCallback, useRef, memo } from 'react';
+import { useMemo, useCallback, memo } from 'react';
 import { GridSize } from 'src/components/GridTable/constants';
 import { GridTable } from 'src/components/GridTable';
 import { type ColDef } from 'src/components/GridTable/types';
@@ -109,15 +109,15 @@ export const FilterableTable = ({
     [orderedColumnKeys, allowHTML, getCellContent],
   );
 
-  const keyword = useRef<string | undefined>(filterText);
-  keyword.current = filterText;
-
-  const keywordFilter = useCallback((node: { data: Datum }) => {
-    if (keyword.current && node.data) {
-      return hasMatch(keyword.current, node.data);
-    }
-    return true;
-  }, []);
+  const keywordFilter = useCallback(
+    (node: { data: Datum }) => {
+      if (filterText && node.data) {
+        return hasMatch(filterText, node.data);
+      }
+      return true;
+    },
+    [filterText],
+  );
 
   return (
     <div className="filterable-table-container" data-test="table-container">