diff --git a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx index e61a59b47aa..3b751881031 100644 --- a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx +++ b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx @@ -23,6 +23,7 @@ import { memo, ChangeEvent, MouseEvent, + useMemo, } from 'react'; import AutoSizer from 'react-virtualized-auto-sizer'; @@ -154,6 +155,7 @@ const ResultSetButtons = styled.div` const GAP = 8; const extensionsRegistry = getExtensionsRegistry(); +const EMPTY: string[] = []; const ResultSet = ({ cache = false, @@ -215,6 +217,14 @@ const ResultSet = ({ const [cachedData, setCachedData] = useState[]>([]); const [showSaveDatasetModal, setShowSaveDatasetModal] = useState(false); const [showStreamingModal, setShowStreamingModal] = useState(false); + const orderedColumnKeys = useMemo( + () => query.results?.columns?.map(col => col.column_name) ?? EMPTY, + [query.results?.columns], + ); + const expandedColumns = useMemo( + () => query.results?.expanded_columns?.map(col => col.column_name) ?? EMPTY, + [query.results?.expanded_columns], + ); const history = useHistory(); const dispatch = useDispatch(); @@ -659,9 +669,6 @@ const ResultSet = ({ ({ data } = results); } if (data && data.length > 0) { - const expandedColumns = results.expanded_columns - ? results.expanded_columns.map(col => col.column_name) - : []; const allowHTML = getItem( LocalStorageKeys.SqllabIsRenderHtmlEnabled, true, @@ -670,7 +677,7 @@ const ResultSet = ({ const tableProps = { data, queryId: query.id, - orderedColumnKeys: results.columns.map(col => col.column_name), + orderedColumnKeys, filterText: searchText, expandedColumns, allowHTML, diff --git a/superset-frontend/src/components/FilterableTable/index.tsx b/superset-frontend/src/components/FilterableTable/index.tsx index 70c939af7ec..1f37fff336a 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, useRef, useCallback } from 'react'; +import { useMemo, useRef, 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'; @@ -137,3 +137,4 @@ export const FilterableTable = ({ }; export type { FilterableTableProps }; +export default memo(FilterableTable);