diff --git a/src/reactviews/pages/QueryResult/resultGrid.tsx b/src/reactviews/pages/QueryResult/resultGrid.tsx index bfcb779b55..fddd41c2e1 100644 --- a/src/reactviews/pages/QueryResult/resultGrid.tsx +++ b/src/reactviews/pages/QueryResult/resultGrid.tsx @@ -53,11 +53,63 @@ export interface ResultGridHandle { const ResultGrid = forwardRef((props: ResultGridProps, ref) => { const tableRef = useRef | null>(null); + const gridContainerRef = useRef(null); const context = useContext(QueryResultCommandsContext); if (!context) { return undefined; } + // Helper to get selected columns from the grid selection + const getSelectedColumns = () => { + if (!tableRef.current) return []; + const ranges = tableRef.current.getSelectedRanges(); + const columns: Set = new Set(); + ranges.forEach((range) => { + for (let c = range.fromCell; c <= range.toCell; c++) { + columns.add(c); + } + }); + // Skip row selector column (usually index 0) + return Array.from(columns).filter((idx) => idx > 0); + }; + + // Resize selected columns by delta px + const resizeSelectedColumns = (delta: number) => { + if (!tableRef.current) return; + const grid = tableRef.current.grid; + const columns = grid.getColumns(); + const selectedCols = getSelectedColumns(); + let changed = false; + selectedCols.forEach((colIdx) => { + const col = columns[colIdx]; + if (col && col.width) { + col.width = Math.max(40, col.width + delta); + changed = true; + } + }); + if (changed) { + grid.setColumns(columns); + grid.render(); + } + }; + + // Wheel event handler for CTRL + scroll + useEffect(() => { + const gridDiv = gridContainerRef.current; + if (!gridDiv) return; + const wheelHandler = (event: WheelEvent) => { + if (event.ctrlKey && getSelectedColumns().length > 0) { + event.preventDefault(); + if (event.deltaY < 0) { + resizeSelectedColumns(20); // Expand + } else if (event.deltaY > 0) { + resizeSelectedColumns(-20); // Contract + } + } + }; + gridDiv.addEventListener("wheel", wheelHandler, { passive: false }); + return () => gridDiv.removeEventListener("wheel", wheelHandler); + }, [tableRef.current]); const inMemoryDataProcessingThreshold = useQueryResultSelector( (state) => state.inMemoryDataProcessingThreshold, @@ -66,7 +118,6 @@ const ResultGrid = forwardRef((props: ResultG const autoSizeColumns = useQueryResultSelector((state) => state.autoSizeColumns); const { themeKind } = useVscodeWebview2(); - const gridContainerRef = useRef(null); const isTableCreated = useRef(false); if (!props.gridParentRef) { return undefined;