diff --git a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx index 36fd409e939..90a77790630 100644 --- a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx +++ b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx @@ -166,7 +166,7 @@ SelectAllHeaderRenderer.propTypes = { isCellSelected: PropTypes.bool, }; -function SelectableHeaderRenderer({column, selectedColumns, onSelectedColumnsChange, isCellSelected}) { +function SelectableHeaderRenderer({column, isSelected, onColumnSelected, isCellSelected}) { const cellRef = useRef(); const eventBus = useContext(QueryToolEventsContext); const dataGridExtras = useContext(DataGridExtrasContext); @@ -175,18 +175,10 @@ function SelectableHeaderRenderer({column, selectedColumns, onSelectedColumnsCha dataGridExtras.onSelectedCellChange?.(null); } - const onClick = ()=>{ - const newSelectedCols = new Set(selectedColumns); - if (newSelectedCols.has(column.idx)) { - newSelectedCols.delete(column.idx); - } else { - newSelectedCols.add(column.idx); - } - onSelectedColumnsChange(newSelectedCols); + const onClick = (e)=>{ + onColumnSelected(column.idx, isSelected, (e.nativeEvent).shiftKey); }; - const isSelected = selectedColumns.has(column.idx); - useLayoutEffect(() => { if (!isCellSelected) return; cellRef.current?.focus({ preventScroll: true }); @@ -215,8 +207,8 @@ function SelectableHeaderRenderer({column, selectedColumns, onSelectedColumnsCha } SelectableHeaderRenderer.propTypes = { column: PropTypes.object, - selectedColumns: PropTypes.objectOf(Set), - onSelectedColumnsChange: PropTypes.func, + isSelected: PropTypes.bool, + onColumnSelected: PropTypes.func, isCellSelected: PropTypes.bool, }; @@ -305,9 +297,9 @@ function RowNumColFormatter({row, rowKeyGetter, rowIdx, dataChangeStore, onSelec } else if(rowKey in (dataChangeStore?.deleted || {})) { rownum = rownum+'-'; } - return (
{ + return (
{ onSelectedColumnsChange(new Set()); - onRowSelectionChange({ type: 'ROW', row: row, checked: !isRowSelected, isShiftClick: false}); + onRowSelectionChange({ type: 'ROW', row: row, checked: !isRowSelected, isShiftClick: (e.nativeEvent).shiftKey}); }} onKeyDown={()=>{/* already taken care by parent */}}> {rownum}
); @@ -320,13 +312,16 @@ RowNumColFormatter.propTypes = { onSelectedColumnsChange: PropTypes.func, }; -function formatColumns(columns, dataChangeStore, selectedColumns, onSelectedColumnsChange, rowKeyGetter) { +function formatColumns(columns, dataChangeStore, selectedColumns, onColumnSelected, onSelectedColumnsChange, rowKeyGetter) { let retColumns = [ ...columns, ]; - const HeaderRenderer = (props)=>{ - return ; + const HeaderRenderer = ({column, ...props})=>{ + return ; + }; + HeaderRenderer.propTypes = { + column: PropTypes.object, }; for(const [idx, col] of retColumns.entries()) { @@ -377,7 +372,26 @@ function getColumnWidth(column, rows, canvas, columnWidthBy) { export default function QueryToolDataGrid({columns, rows, totalRowCount, dataChangeStore, onSelectedCellChange, selectedColumns, onSelectedColumnsChange, columnWidthBy, startRowNum, ...props}) { const [readyColumns, setReadyColumns] = useState([]); + const [lastSelectedColumn, setLastSelectedColumn] = useState(null); const eventBus = useContext(QueryToolEventsContext); + const onColumnSelected = (columnIdx, isSelected, isShiftClick)=>{ + const newSelectedCols = new Set(selectedColumns); + const start = isShiftClick && lastSelectedColumn ? Math.min(columnIdx, lastSelectedColumn) : columnIdx; + const end = isShiftClick && lastSelectedColumn ? Math.max(columnIdx, lastSelectedColumn) : columnIdx; + for (let i = start; i <= end; i++) { + if (isSelected) { + newSelectedCols.delete(i); + } + else { + newSelectedCols.add(i); + } + } + + props.onSelectedRowsChange(new Set()); + setLastSelectedColumn(columnIdx); + onSelectedColumnsChange(newSelectedCols); + }; + const onSelectedColumnsChangeWrapped = (arg)=>{ props.onSelectedRowsChange(new Set()); onSelectedColumnsChange(arg); @@ -411,12 +425,12 @@ export default function QueryToolDataGrid({columns, rows, totalRowCount, dataCha useEffect(()=>{ let initCols = initialiseColumns(columns, rows, totalRowCount, columnWidthBy); - setReadyColumns(formatColumns(initCols, dataChangeStore, selectedColumns, onSelectedColumnsChangeWrapped, props.rowKeyGetter)); + setReadyColumns(formatColumns(initCols, dataChangeStore, selectedColumns, onColumnSelected, onSelectedColumnsChangeWrapped, props.rowKeyGetter)); }, [columns]); useEffect(()=>{ setReadyColumns((prevCols)=>{ - return formatColumns(prevCols, dataChangeStore, selectedColumns, onSelectedColumnsChangeWrapped, props.rowKeyGetter); + return formatColumns(prevCols, dataChangeStore, selectedColumns, onColumnSelected, onSelectedColumnsChangeWrapped, props.rowKeyGetter); }); }, [dataChangeStore, selectedColumns]);