Adding keyboard shortcuts for column resizing in slickgrid (#21100)

* Adding column resize keyboard shortcuts in slickgrid

* Switching to standard keyboard evt

* Adding comment for the functionality

* Cleaning up code and adding more comments

* Using quick input to get column resize width

* Adding check for negative sizes

* Fixing some stuff

src/sql/base/browser/ui/qucikInput/quickInputProvider.ts

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { CancellationToken } from 'vs/base/common/cancellation';
+import { IInputOptions } from 'vs/platform/quickinput/common/quickInput';
+
+
+
+export interface IQuickInputProvider {
+	input(options?: IInputOptions, token?: CancellationToken): Promise<string | undefined>;
+}

src/sql/base/browser/ui/table/table.ts

@@ -20,7 +20,11 @@ import { Event, Emitter } from 'vs/base/common/event';
 import { range } from 'vs/base/common/arrays';
 import { AsyncDataProvider } from 'sql/base/browser/ui/table/asyncDataView';
 import { IDisposableDataProvider } from 'sql/base/common/dataProvider';
+import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
+import { KeyCode } from 'vs/base/common/keyCodes';
 import { IAccessibilityProvider } from 'sql/base/browser/ui/accessibility/accessibilityProvider';
+import { IQuickInputProvider } from 'sql/base/browser/ui/qucikInput/quickInputProvider';
+import { localize } from 'vs/nls';
 
 function getDefaultOptions<T>(): Slick.GridOptions<T> {
 	return <Slick.GridOptions<T>>{
@@ -66,7 +70,12 @@ export class Table<T extends Slick.SlickData> extends Widget implements IDisposa
 	private _onBlur = new Emitter<void>();
 	public readonly onBlur = this._onBlur.event;
 
-	constructor(parent: HTMLElement, accessibilityProvider: IAccessibilityProvider, configuration?: ITableConfiguration<T>, options?: Slick.GridOptions<T>) {
+	constructor(
+		parent: HTMLElement,
+		accessibilityProvider: IAccessibilityProvider,
+		private _quickInputProvider: IQuickInputProvider,
+		configuration?: ITableConfiguration<T>,
+		options?: Slick.GridOptions<T>) {
 		super();
 		if (!configuration || !configuration.dataProvider || isArray(configuration.dataProvider)) {
 			this._data = new TableDataView<T>(configuration && configuration.dataProvider as Array<T>);
@@ -135,8 +144,16 @@ export class Table<T extends Slick.SlickData> extends Widget implements IDisposa
 		this.mapMouseEvent(this._grid.onDblClick, this._onDoubleClick);
 		this._grid.onColumnsResized.subscribe(() => this._onColumnResize.fire());
 
-		this._grid.onKeyDown.subscribe((e, args: Slick.OnKeyDownEventArgs<T>) => {
+		this._grid.onKeyDown.subscribe(async (e, args: Slick.OnKeyDownEventArgs<T>) => {
 			const evt = (e as JQuery.TriggeredEvent).originalEvent as KeyboardEvent;
+			const stdEvt = new StandardKeyboardEvent(evt);
+			if (stdEvt.altKey && stdEvt.shiftKey && stdEvt.keyCode === KeyCode.KeyS) {
+				const newWidth = this.resizeActiveCellColumnByQuickInput();
+				if (newWidth) {
+					stdEvt.stopPropagation();
+					stdEvt.preventDefault();
+				}
+			}
 			this._onKeyDown.fire({
 				event: evt,
 				cell: {
@@ -147,6 +164,35 @@ export class Table<T extends Slick.SlickData> extends Widget implements IDisposa
 		});
 	}
 
+	private async resizeActiveCellColumnByQuickInput(): Promise<number | undefined> {
+		const activeCell = this._grid.getActiveCell();
+		if (activeCell) {
+			const columns = this._grid.getColumns();
+			if (columns[activeCell.cell].resizable) {
+				const newColumnWidth = await this._quickInputProvider.input({
+					placeHolder: localize('table.resizeColumn', "Provide new column width"),
+					prompt: localize('table.resizeColumn', "Provide new column width"),
+					value: columns[activeCell.cell].width.toString(),
+					validateInput: async (value: string) => {
+						if (!Number(value)) {
+							return localize('table.resizeColumn.invalid', "Invalid column width");
+						} else if (parseInt(value) <= 0) {
+							return localize('table.resizeColumn.negativeSize', "Size cannot be 0 or negative");
+						}
+						return undefined;
+					}
+				});
+				if (newColumnWidth) {
+					columns[activeCell.cell].width = parseInt(newColumnWidth);
+					this._grid.setColumns(columns);
+					this.grid.setActiveCell(activeCell.row, activeCell.cell);
+				}
+				return parseInt(newColumnWidth);
+			}
+		}
+		return undefined;
+	}
+
 	public rerenderGrid() {
 		this._grid.updateRowCount();
 		this._grid.setColumns(this._grid.getColumns());

src/sql/base/browser/ui/table/treeGrid.ts

@@ -16,6 +16,7 @@ import { KeyCode } from 'vs/base/common/keyCodes';
 import { createTreeGridExpandableColumnFormatter, textFormatter } from 'sql/base/browser/ui/table/formatters';
 import { escape } from 'sql/base/common/strings';
 import { IAccessibilityProvider } from 'sql/base/browser/ui/accessibility/accessibilityProvider';
+import { IQuickInputProvider } from 'sql/base/browser/ui/qucikInput/quickInputProvider';
 
 function defaultTreeGridFilter<T extends Slick.SlickData>(data: T[], columns: FilterableColumn<T>[], cellValueGetter: CellValueGetter = defaultCellValueGetter): T[] {
 	let filteredData = defaultFilter(data, columns, cellValueGetter);
@@ -39,8 +40,8 @@ function defaultTreeGridFilter<T extends Slick.SlickData>(data: T[], columns: Fi
  * TreeGrid component displays a hierarchical table data grouped into expandable and collapsible nodes.
  */
 export class TreeGrid<T extends Slick.SlickData> extends Table<T> {
-	constructor(parent: HTMLElement, accessibilityProvider: IAccessibilityProvider, configuration?: ITableConfiguration<T>, options?: Slick.GridOptions<T>) {
+	constructor(parent: HTMLElement, accessibilityProvider: IAccessibilityProvider, quickInputProvider: IQuickInputProvider, configuration?: ITableConfiguration<T>, options?: Slick.GridOptions<T>) {
-		super(parent, accessibilityProvider, configuration, options);
+		super(parent, accessibilityProvider, quickInputProvider, configuration, options);
 		this._tableContainer.setAttribute('role', 'treegrid');
 		if (configuration?.dataProvider && configuration.dataProvider instanceof TableDataView) {
 			this._data = configuration.dataProvider;

src/sql/workbench/browser/designer/designer.ts

@@ -54,6 +54,7 @@ import { listFocusAndSelectionBackground } from 'sql/platform/theme/common/color
 import { timeout } from 'vs/base/common/async';
 import { onUnexpectedError } from 'vs/base/common/errors';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 export interface IDesignerStyle {
 	tabbedPanelStyles?: ITabbedPanelStyles;
@@ -115,7 +116,8 @@ export class Designer extends Disposable implements IThemable {
 		@IDialogService private readonly _dialogService: IDialogService,
 		@IThemeService private readonly _themeService: IThemeService,
 		@IContextMenuService private readonly _contextMenuService: IContextMenuService,
-		@IAccessibilityService private readonly _accessibilityService: IAccessibilityService) {
+		@IAccessibilityService private readonly _accessibilityService: IAccessibilityService,
+		@IQuickInputService private readonly _quickInputService: IQuickInputService) {
 		super();
 		this._tableCellEditorFactory = new TableCellEditorFactory(
 			{
@@ -845,7 +847,7 @@ export class Designer extends Disposable implements IThemable {
 				const tableProperties = componentDefinition.componentProperties as DesignerTableProperties;
 				const taskbar = this.addTableTaskbar(container, tableProperties);
 				const tableContainer = container.appendChild(DOM.$('.full-row'));
-				const table = new Table(tableContainer, this._accessibilityService, {
+				const table = new Table(tableContainer, this._accessibilityService, this._quickInputService, {
 					dataProvider: new TableDataView()
 				}, {
 					editable: true,

src/sql/workbench/browser/modelComponents/table.component.ts

@@ -40,6 +40,7 @@ import { IAction, Separator } from 'vs/base/common/actions';
 import { MenuItemAction, MenuRegistry } from 'vs/platform/actions/common/actions';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 export enum ColumnSizingMode {
 	ForceFit = 0,	// all columns will be sized to fit in viewable space, no horiz scroll bar
@@ -92,7 +93,8 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
 		@Inject(IContextViewService) private contextViewService: IContextViewService,
 		@Inject(IContextMenuService) private contextMenuService: IContextMenuService,
 		@Inject(IInstantiationService) private instantiationService: IInstantiationService,
-		@Inject(IAccessibilityService) private accessibilityService: IAccessibilityService
+		@Inject(IAccessibilityService) private accessibilityService: IAccessibilityService,
+		@Inject(IQuickInputService) private quickInputService: IQuickInputService
 	) {
 		super(changeRef, el, logService);
 	}
@@ -277,7 +279,7 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
 				dataItemColumnValueExtractor: slickGridDataItemColumnValueWithNoData // must change formatter if you are changing explicit column value extractor
 			};
 
-			this._table = new Table<Slick.SlickData>(this._inputContainer.nativeElement, this.accessibilityService, { dataProvider: this._tableData, columns: this._tableColumns }, options);
+			this._table = new Table<Slick.SlickData>(this._inputContainer.nativeElement, this.accessibilityService, this.quickInputService, { dataProvider: this._tableData, columns: this._tableColumns }, options);
 			this._table.setData(this._tableData);
 			this._table.setSelectionModel(new RowSelectionModel({ selectActiveRow: true }));
 

src/sql/workbench/contrib/assessment/browser/asmtResultsView.component.ts

@@ -49,6 +49,7 @@ import { IContextViewService } from 'vs/platform/contextview/browser/contextView
 import { attachTableFilterStyler } from 'sql/platform/theme/common/styler';
 import { DASHBOARD_BORDER } from 'sql/workbench/common/theme';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 export const ASMTRESULTSVIEW_SELECTOR: string = 'asmt-results-view-component';
 export const ROW_HEIGHT: number = 25;
@@ -146,7 +147,8 @@ export class AsmtResultsViewComponent extends TabChild implements IAssessmentCom
 		@Inject(IAdsTelemetryService) private _telemetryService: IAdsTelemetryService,
 		@Inject(ILogService) protected _logService: ILogService,
 		@Inject(IContextViewService) private _contextViewService: IContextViewService,
-		@Inject(IAccessibilityService) private _accessibilityService: IAccessibilityService
+		@Inject(IAccessibilityService) private _accessibilityService: IAccessibilityService,
+		@Inject(IQuickInputService) private _quickInputService: IQuickInputService
 	) {
 		super();
 		let self = this;
@@ -354,7 +356,7 @@ export class AsmtResultsViewComponent extends TabChild implements IAssessmentCom
 			this.initActionBar(databaseInvokeAsmt, databaseSelectAsmt);
 		}
 
-		this._table = this._register(new Table(this._gridEl.nativeElement, this._accessibilityService, { columns }, options));
+		this._table = this._register(new Table(this._gridEl.nativeElement, this._accessibilityService, this._quickInputService, { columns }, options));
 		this._table.grid.setData(this.dataView, true);
 		this._table.registerPlugin(<any>this.rowDetail);
 		this._table.registerPlugin(filterPlugin);

src/sql/workbench/contrib/charts/browser/tableInsight.ts

@@ -15,6 +15,7 @@ import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { IInsightOptions, InsightType } from 'sql/workbench/contrib/charts/common/interfaces';
 import { IInsightData } from 'sql/platform/dashboard/browser/insightRegistry';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 export class TableInsight extends Disposable implements IInsight {
 	public static readonly types = [InsightType.Table];
@@ -27,7 +28,8 @@ export class TableInsight extends Disposable implements IInsight {
 
 	constructor(container: HTMLElement, options: any,
 		@IThemeService themeService: IThemeService,
-		@IAccessibilityService accessibilityService: IAccessibilityService
+		@IAccessibilityService accessibilityService: IAccessibilityService,
+		@IQuickInputService quickInputService: IQuickInputService
 	) {
 		super();
 		let tableContainer = $('div');
@@ -35,7 +37,7 @@ export class TableInsight extends Disposable implements IInsight {
 		tableContainer.style.height = '100%';
 		container.appendChild(tableContainer);
 		this.dataView = new TableDataView();
-		this.table = new Table(tableContainer, accessibilityService, { dataProvider: this.dataView }, { showRowNumber: true });
+		this.table = new Table(tableContainer, accessibilityService, quickInputService, { dataProvider: this.dataView }, { showRowNumber: true });
 		this.table.setSelectionModel(new CellSelectionModel());
 		this._register(attachTableStyler(this.table, themeService));
 	}

src/sql/workbench/contrib/dashboard/browser/widgets/explorer/explorerTable.ts

@@ -33,6 +33,7 @@ import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { ILogService } from 'vs/platform/log/common/log';
 import { IEditorProgressService } from 'vs/platform/progress/common/progress';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 const ShowActionsText: string = nls.localize('dashboard.explorer.actions', "Show Actions");
@@ -65,7 +66,8 @@ export class ExplorerTable extends Disposable {
 		private readonly progressService: IEditorProgressService,
 		private readonly logService: ILogService,
 		private readonly dashboardService: IDashboardService,
-		readonly accessibilityService: IAccessibilityService) {
+		readonly accessibilityService: IAccessibilityService,
+		readonly quickInputService: IQuickInputService) {
 		super();
 		this._explorerView = new ExplorerView(this.context);
 		const connectionInfo = this.bootStrapService.connectionManagementService.connectionInfo;
@@ -74,7 +76,7 @@ export class ExplorerTable extends Disposable {
 		this._view = new TableDataView<Slick.SlickData>(undefined, undefined, undefined, (data: Slick.SlickData[]): Slick.SlickData[] => {
 			return explorerFilter.filter(this._filterStr, data);
 		});
-		this._table = new Table<Slick.SlickData>(parentElement, accessibilityService, { dataProvider: this._view }, { forceFitColumns: true });
+		this._table = new Table<Slick.SlickData>(parentElement, accessibilityService, quickInputService, { dataProvider: this._view }, { forceFitColumns: true });
 		this._table.setSelectionModel(new RowSelectionModel());
 		this._actionsColumn = new ButtonColumn<Slick.SlickData>({
 			id: 'actions',

src/sql/workbench/contrib/dashboard/browser/widgets/explorer/explorerWidget.component.ts

@@ -32,6 +32,7 @@ import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/work
 import { getFlavor } from 'sql/workbench/contrib/dashboard/browser/dashboardRegistry';
 import { IDashboardService } from 'sql/platform/dashboard/browser/dashboardService';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 @Component({
 	selector: 'explorer-widget',
@@ -62,6 +63,7 @@ export class ExplorerWidget extends DashboardWidget implements IDashboardWidget,
 		@Inject(ICapabilitiesService) private readonly capabilitiesService: ICapabilitiesService,
 		@Inject(IDashboardService) private readonly dashboardService: IDashboardService,
 		@Inject(IAccessibilityService) private readonly accessibilityService: IAccessibilityService,
+		@Inject(IQuickInputService) private readonly quickInputService: IQuickInputService,
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef
 	) {
 		super(changeRef);
@@ -95,7 +97,8 @@ export class ExplorerWidget extends DashboardWidget implements IDashboardWidget,
 			this.progressService,
 			this.logService,
 			this.dashboardService,
-			this.accessibilityService);
+			this.accessibilityService,
+			this.quickInputService);
 		this._register(this._input);
 		this._register(attachInputBoxStyler(this._input, this.themeService));
 		this._register(this._table);

src/sql/workbench/contrib/dashboard/browser/widgets/insights/views/tableInsight.component.ts

@@ -15,6 +15,7 @@ import { attachTableStyler } from 'sql/platform/theme/common/styler';
 import { CellSelectionModel } from 'sql/base/browser/ui/table/plugins/cellSelectionModel.plugin';
 import { IInsightsView, IInsightData } from 'sql/platform/dashboard/browser/insightRegistry';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 @Component({
 	template: ''
@@ -27,7 +28,8 @@ export default class TableInsight extends Disposable implements IInsightsView, O
 	constructor(
 		@Inject(forwardRef(() => ElementRef)) private _elementRef: ElementRef,
 		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
-		@Inject(IAccessibilityService) private accessibilityService: IAccessibilityService
+		@Inject(IAccessibilityService) private accessibilityService: IAccessibilityService,
+		@Inject(IQuickInputService) private quickInputService: IQuickInputService
 	) {
 		super();
 	}
@@ -63,7 +65,7 @@ export default class TableInsight extends Disposable implements IInsightsView, O
 
 	private createTable() {
 		if (!this.table) {
-			this.table = new Table(this._elementRef.nativeElement, this.accessibilityService, { dataProvider: this.dataView, columns: this.columns }, { showRowNumber: true });
+			this.table = new Table(this._elementRef.nativeElement, this.accessibilityService, this.quickInputService, { dataProvider: this.dataView, columns: this.columns }, { showRowNumber: true });
 			this.table.setSelectionModel(new CellSelectionModel());
 			this._register(attachTableStyler(this.table, this.themeService));
 		}

src/sql/workbench/contrib/editData/browser/editDataGridPanel.ts

@@ -36,6 +36,7 @@ import { equals } from 'vs/base/common/arrays';
 import * as DOM from 'vs/base/browser/dom';
 import { onUnexpectedError } from 'vs/base/common/errors';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 export class EditDataGridPanel extends GridParentComponent {
 	// The time(in milliseconds) we wait before refreshing the grid.
@@ -107,7 +108,8 @@ export class EditDataGridPanel extends GridParentComponent {
 		@IClipboardService clipboardService: IClipboardService,
 		@IQueryEditorService queryEditorService: IQueryEditorService,
 		@ILogService logService: ILogService,
-		@IAccessibilityService private accessibilityService: IAccessibilityService
+		@IAccessibilityService private accessibilityService: IAccessibilityService,
+		@IQuickInputService private quickInputService: IQuickInputService
 	) {
 		super(contextMenuService, keybindingService, contextKeyService, configurationService, clipboardService, queryEditorService, logService);
 		this.nativeElement = document.createElement('div');
@@ -895,7 +897,7 @@ export class EditDataGridPanel extends GridParentComponent {
 			};
 
 			if (dataSet.columnDefinitions) {
-				this.table = new Table(this.nativeElement.appendChild(newGridContainer), this.accessibilityService, { dataProvider: this.gridDataProvider, columns: dataSet.columnDefinitions }, options);
+				this.table = new Table(this.nativeElement.appendChild(newGridContainer), this.accessibilityService, this.quickInputService, { dataProvider: this.gridDataProvider, columns: dataSet.columnDefinitions }, options);
 				for (let plugin of this.plugins) {
 					this.table.registerPlugin(plugin);
 				}
@@ -905,7 +907,7 @@ export class EditDataGridPanel extends GridParentComponent {
 			}
 		}
 		else {
-			this.table = new Table(this.nativeElement.appendChild(newGridContainer), this.accessibilityService);
+			this.table = new Table(this.nativeElement.appendChild(newGridContainer), this.accessibilityService, this.quickInputService);
 		}
 	}
 

src/sql/workbench/contrib/executionPlan/browser/executionPlanComparisonPropertiesView.ts

@@ -19,6 +19,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
 import { Codicon } from 'vs/base/common/codicons';
 import { deepClone } from 'vs/base/common/objects';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 export enum ExecutionPlanCompareOrientation {
 	Horizontal = 'horizontal',
@@ -64,9 +65,10 @@ export class ExecutionPlanComparisonPropertiesView extends ExecutionPlanProperti
 		@IInstantiationService instantiationService: IInstantiationService,
 		@IContextMenuService contextMenuService: IContextMenuService,
 		@IContextViewService contextViewService: IContextViewService,
-		@IAccessibilityService accessibilityService: IAccessibilityService
+		@IAccessibilityService accessibilityService: IAccessibilityService,
+		@IQuickInputService quickInputService: IQuickInputService
 	) {
-		super(parentContainer, themeService, instantiationService, contextMenuService, contextViewService, accessibilityService);
+		super(parentContainer, themeService, instantiationService, contextMenuService, contextViewService, accessibilityService, quickInputService);
 		this._model = <ExecutionPlanComparisonPropertiesViewModel>{};
 		this._parentContainer.style.display = 'none';
 		const header = DOM.$('.compare-operation-name');

src/sql/workbench/contrib/executionPlan/browser/executionPlanPropertiesView.ts

@@ -14,6 +14,7 @@ import { ExecutionPlanPropertiesViewBase, PropertiesSortType } from 'sql/workben
 import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 export class ExecutionPlanPropertiesView extends ExecutionPlanPropertiesViewBase {
 	// Div that holds the name of the element selected
@@ -26,9 +27,10 @@ export class ExecutionPlanPropertiesView extends ExecutionPlanPropertiesViewBase
 		@IInstantiationService instantiationService: IInstantiationService,
 		@IContextMenuService contextMenuService: IContextMenuService,
 		@IContextViewService contextViewService: IContextViewService,
-		@IAccessibilityService accessibilityService: IAccessibilityService
+		@IAccessibilityService accessibilityService: IAccessibilityService,
+		@IQuickInputService quickInputService: IQuickInputService
 	) {
-		super(parentContainer, themeService, instantiationService, contextMenuService, contextViewService, accessibilityService);
+		super(parentContainer, themeService, instantiationService, contextMenuService, contextViewService, accessibilityService, quickInputService);
 		this._model = <ExecutionPlanPropertiesView>{};
 		this._operationName = DOM.$('h3');
 		this._operationName.classList.add('operation-name');

src/sql/workbench/contrib/executionPlan/browser/executionPlanPropertiesViewBase.ts

@@ -26,6 +26,7 @@ import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
 import { deepClone } from 'vs/base/common/objects';
 import { Disposable } from 'vs/base/common/lifecycle';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 export abstract class ExecutionPlanPropertiesViewBase extends Disposable implements IVerticalSashLayoutProvider {
 	// Title bar with close button action
@@ -69,7 +70,8 @@ export abstract class ExecutionPlanPropertiesViewBase extends Disposable impleme
 		@IInstantiationService private _instantiationService: IInstantiationService,
 		@IContextMenuService private _contextMenuService: IContextMenuService,
 		@IContextViewService private _contextViewService: IContextViewService,
-		@IAccessibilityService accessibilityService: IAccessibilityService
+		@IAccessibilityService accessibilityService: IAccessibilityService,
+		@IQuickInputService quickInputService: IQuickInputService
 	) {
 		super();
 		const sashContainer = DOM.$('.properties-sash');
@@ -157,7 +159,7 @@ export abstract class ExecutionPlanPropertiesViewBase extends Disposable impleme
 
 		this._selectionModel = new CellSelectionModel<Slick.SlickData>();
 
-		this._tableComponent = this._register(new TreeGrid(table, accessibilityService, {
+		this._tableComponent = this._register(new TreeGrid(table, accessibilityService, quickInputService, {
 			columns: []
 		}, {
 			rowHeight: RESULTS_GRID_DEFAULTS.rowHeight,

src/sql/workbench/contrib/executionPlan/browser/executionPlanTreeTab.ts

@@ -25,6 +25,7 @@ import { CopyKeybind } from 'sql/base/browser/ui/table/plugins/copyKeybind.plugi
 import { Disposable } from 'vs/base/common/lifecycle';
 import { deepClone } from 'vs/base/common/objects';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 export class ExecutionPlanTreeTab extends Disposable implements IPanelTab {
 	public readonly title: string = localize('planTreeTab.title', 'Plan Tree');
@@ -53,7 +54,8 @@ export class ExecutionPlanTreeTabView extends Disposable implements IPanelView {
 		@IThemeService private _themeService: IThemeService,
 		@IInstantiationService private _instantiationService: IInstantiationService,
 		@IContextMenuService private _contextMenuService: IContextMenuService,
-		@IAccessibilityService private accessibilityService: IAccessibilityService
+		@IAccessibilityService private _accessibilityService: IAccessibilityService,
+		@IQuickInputService private _quickInputService: IQuickInputService
 	) {
 		super();
 	}
@@ -194,7 +196,7 @@ export class ExecutionPlanTreeTabView extends Disposable implements IPanelView {
 
 		const selectionModel = new CellSelectionModel<Slick.SlickData>();
 
-		const treeGrid = this._register(new TreeGrid<Slick.SlickData>(tableContainer, this.accessibilityService, {
+		const treeGrid = this._register(new TreeGrid<Slick.SlickData>(tableContainer, this._accessibilityService, this._quickInputService, {
 			columns: columns,
 			sorter: (args) => {
 				const sortColumn = args.sortCol.field;

src/sql/workbench/contrib/executionPlan/browser/topOperationsTab.ts

@@ -31,6 +31,7 @@ import { Disposable } from 'vs/base/common/lifecycle';
 import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
 import { filterIconClassNames, searchPlaceholder, topOperationsSearchDescription } from 'sql/workbench/contrib/executionPlan/browser/constants';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 const TABLE_SORT_COLUMN_KEY = 'tableCostColumnForSorting';
 
@@ -63,7 +64,8 @@ export class TopOperationsTabView extends Disposable implements IPanelView {
 		@IInstantiationService private _instantiationService: IInstantiationService,
 		@IContextMenuService private _contextMenuService: IContextMenuService,
 		@IContextViewService private _contextViewService: IContextViewService,
-		@IAccessibilityService private _accessibilityService: IAccessibilityService
+		@IAccessibilityService private _accessibilityService: IAccessibilityService,
+		@IQuickInputService private _quickInputService: IQuickInputService,
 	) {
 		super();
 	}
@@ -238,7 +240,7 @@ export class TopOperationsTabView extends Disposable implements IPanelView {
 
 		const selectionModel = new CellSelectionModel<Slick.SlickData>({ hasRowSelector: true });
 
-		const table = this._register(new Table<Slick.SlickData>(tableContainer, this._accessibilityService, {
+		const table = this._register(new Table<Slick.SlickData>(tableContainer, this._accessibilityService, this._quickInputService, {
 			columns: columns,
 			sorter: (args) => {
 				const column = args.sortCol.field;

src/sql/workbench/contrib/jobManagement/browser/alertsView.component.ts

@@ -25,6 +25,7 @@ import { IDashboardService } from 'sql/platform/dashboard/browser/dashboardServi
 import { AlertsCacheObject } from 'sql/workbench/services/jobManagement/common/jobManagementService';
 import { RowDetailView } from 'sql/base/browser/ui/table/plugins/rowDetailView';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 export const VIEW_SELECTOR: string = 'jobalertsview-component';
 export const ROW_HEIGHT: number = 45;
@@ -78,7 +79,8 @@ export class AlertsViewComponent extends JobManagementView implements OnInit, On
 		@Inject(IContextMenuService) contextMenuService: IContextMenuService,
 		@Inject(IKeybindingService) keybindingService: IKeybindingService,
 		@Inject(IDashboardService) _dashboardService: IDashboardService,
-		@Inject(IAccessibilityService) private _accessibilityService: IAccessibilityService) {
+		@Inject(IAccessibilityService) private _accessibilityService: IAccessibilityService,
+		@Inject(IQuickInputService) private _quickInputService: IQuickInputService) {
 		super(commonService, _dashboardService, contextMenuService, keybindingService, instantiationService, _agentViewComponent);
 		this._didTabChange = false;
 		this._isCloud = commonService.connectionManagementService.connectionInfo.serverInfo.isCloud;
@@ -145,7 +147,7 @@ export class AlertsViewComponent extends JobManagementView implements OnInit, On
 		jQuery(this.actionBarContainer.nativeElement).empty();
 		this.initActionBar();
 
-		this._table = new Table(this._gridEl.nativeElement, this._accessibilityService, { columns }, this.options);
+		this._table = new Table(this._gridEl.nativeElement, this._accessibilityService, this._quickInputService, { columns }, this.options);
 		this._table.grid.setData(this.dataView, true);
 		this._register(this._table.onContextMenu(e => {
 			self.openContextMenu(e);

src/sql/workbench/contrib/jobManagement/browser/jobsView.component.ts

@@ -35,6 +35,7 @@ import { onUnexpectedError } from 'vs/base/common/errors';
 import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
 import { attachTableFilterStyler } from 'sql/platform/theme/common/styler';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 export const JOBSVIEW_SELECTOR: string = 'jobsview-component';
 export const ROW_HEIGHT: number = 45;
@@ -110,7 +111,8 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe
 		@Inject(IDashboardService) _dashboardService: IDashboardService,
 		@Inject(IAdsTelemetryService) private _telemetryService: IAdsTelemetryService,
 		@Inject(IContextViewService) private _contextViewService: IContextViewService,
-		@Inject(IAccessibilityService) private _accessibilityService: IAccessibilityService
+		@Inject(IAccessibilityService) private _accessibilityService: IAccessibilityService,
+		@Inject(IQuickInputService) private _quickInputService: IQuickInputService
 	) {
 		super(commonService, _dashboardService, contextMenuService, keybindingService, instantiationService, _agentViewComponent);
 		let jobCacheObjectMap = this._jobManagementService.jobCacheObjectMap;
@@ -190,7 +192,7 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe
 		jQuery(this._gridEl.nativeElement).empty();
 		jQuery(this.actionBarContainer.nativeElement).empty();
 		this.initActionBar();
-		this._table = new Table(this._gridEl.nativeElement, this._accessibilityService, { columns }, options);
+		this._table = new Table(this._gridEl.nativeElement, this._accessibilityService, this._quickInputService, { columns }, options);
 		this._table.grid.setData(this.dataView, true);
 		this._table.grid.onClick.subscribe((e, args) => {
 			let job = self.getJob(args);

src/sql/workbench/contrib/jobManagement/browser/notebooksView.component.ts

@@ -36,6 +36,7 @@ import { IColorTheme } from 'vs/platform/theme/common/themeService';
 import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
 import { attachTableFilterStyler } from 'sql/platform/theme/common/styler';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 
 export const NOTEBOOKSVIEW_SELECTOR: string = 'notebooksview-component';
@@ -109,7 +110,8 @@ export class NotebooksViewComponent extends JobManagementView implements OnInit,
 		@Inject(IDashboardService) _dashboardService: IDashboardService,
 		@Inject(IAdsTelemetryService) private _telemetryService: IAdsTelemetryService,
 		@Inject(IContextViewService) private _contextViewService: IContextViewService,
-		@Inject(IAccessibilityService) private _accessibilityService: IAccessibilityService
+		@Inject(IAccessibilityService) private _accessibilityService: IAccessibilityService,
+		@Inject(IQuickInputService) private _quickInputService: IQuickInputService
 	) {
 		super(commonService, _dashboardService, contextMenuService, keybindingService, instantiationService, _agentViewComponent);
 		let notebookCacheObjectMap = this._jobManagementService.notebookCacheObjectMap;
@@ -189,7 +191,7 @@ export class NotebooksViewComponent extends JobManagementView implements OnInit,
 		jQuery(this._gridEl.nativeElement).empty();
 		jQuery(this.actionBarContainer.nativeElement).empty();
 		this.initActionBar();
-		this._table = this._register(new Table(this._gridEl.nativeElement, this._accessibilityService, { columns }, options));
+		this._table = this._register(new Table(this._gridEl.nativeElement, this._accessibilityService, this._quickInputService, { columns }, options));
 		this._table.grid.setData(this.dataView, true);
 		this._table.grid.onClick.subscribe((e, args) => {
 			let notebook = self.getNotebook(args);

src/sql/workbench/contrib/jobManagement/browser/operatorsView.component.ts

@@ -25,6 +25,7 @@ import { IDashboardService } from 'sql/platform/dashboard/browser/dashboardServi
 import { OperatorsCacheObject } from 'sql/workbench/services/jobManagement/common/jobManagementService';
 import { RowDetailView } from 'sql/base/browser/ui/table/plugins/rowDetailView';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 export const VIEW_SELECTOR: string = 'joboperatorsview-component';
 export const ROW_HEIGHT: number = 45;
@@ -77,7 +78,8 @@ export class OperatorsViewComponent extends JobManagementView implements OnInit,
 		@Inject(IContextMenuService) contextMenuService: IContextMenuService,
 		@Inject(IKeybindingService) keybindingService: IKeybindingService,
 		@Inject(IDashboardService) _dashboardService: IDashboardService,
-		@Inject(IAccessibilityService) private _accessibilityService: IAccessibilityService
+		@Inject(IAccessibilityService) private _accessibilityService: IAccessibilityService,
+		@Inject(IQuickInputService) private _quickInputService: IQuickInputService
 	) {
 		super(commonService, _dashboardService, contextMenuService, keybindingService, instantiationService, _agentViewComponent);
 		this._isCloud = commonService.connectionManagementService.connectionInfo.serverInfo.isCloud;
@@ -145,7 +147,7 @@ export class OperatorsViewComponent extends JobManagementView implements OnInit,
 		jQuery(this._gridEl.nativeElement).empty();
 		jQuery(this.actionBarContainer.nativeElement).empty();
 		this.initActionBar();
-		this._table = new Table(this._gridEl.nativeElement, this._accessibilityService, { columns }, this.options);
+		this._table = new Table(this._gridEl.nativeElement, this._accessibilityService, this._quickInputService, { columns }, this.options);
 		this._table.grid.setData(this.dataView, true);
 
 		this._register(this._table.onContextMenu(e => {

src/sql/workbench/contrib/jobManagement/browser/proxiesView.component.ts

@@ -25,6 +25,7 @@ import { IDashboardService } from 'sql/platform/dashboard/browser/dashboardServi
 import { ProxiesCacheObject } from 'sql/workbench/services/jobManagement/common/jobManagementService';
 import { RowDetailView } from 'sql/base/browser/ui/table/plugins/rowDetailView';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 export const VIEW_SELECTOR: string = 'jobproxiesview-component';
 export const ROW_HEIGHT: number = 45;
@@ -78,7 +79,8 @@ export class ProxiesViewComponent extends JobManagementView implements OnInit, O
 		@Inject(IContextMenuService) contextMenuService: IContextMenuService,
 		@Inject(IKeybindingService) keybindingService: IKeybindingService,
 		@Inject(IDashboardService) _dashboardService: IDashboardService,
-		@Inject(IAccessibilityService) private _accessibilityService: IAccessibilityService
+		@Inject(IAccessibilityService) private _accessibilityService: IAccessibilityService,
+		@Inject(IQuickInputService) private _quickInputService: IQuickInputService
 	) {
 		super(commonService, _dashboardService, contextMenuService, keybindingService, instantiationService, _agentViewComponent);
 		this._isCloud = commonService.connectionManagementService.connectionInfo.serverInfo.isCloud;
@@ -145,7 +147,7 @@ export class ProxiesViewComponent extends JobManagementView implements OnInit, O
 		jQuery(this._gridEl.nativeElement).empty();
 		jQuery(this.actionBarContainer.nativeElement).empty();
 		this.initActionBar();
-		this._table = new Table(this._gridEl.nativeElement, this._accessibilityService, { columns }, this.options);
+		this._table = new Table(this._gridEl.nativeElement, this._accessibilityService, this._quickInputService, { columns }, this.options);
 		this._table.grid.setData(this.dataView, true);
 
 		this._register(this._table.onContextMenu(e => {

src/sql/workbench/contrib/notebook/browser/outputs/gridOutput.component.ts

@@ -50,6 +50,7 @@ import { IExecutionPlanService } from 'sql/workbench/services/executionPlan/comm
 import { ITextResourcePropertiesService } from 'vs/editor/common/services/textResourceConfiguration';
 import { mssqlProviderName } from 'sql/platform/connection/common/constants';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 @Component({
 	selector: GridOutputComponent.SELECTOR,
@@ -243,11 +244,12 @@ class DataResourceTable extends GridTableBase<any> {
 		@INotificationService notificationService: INotificationService,
 		@IExecutionPlanService executionPlanService: IExecutionPlanService,
 		@IAccessibilityService accessibilityService: IAccessibilityService,
+		@IQuickInputService quickInputService: IQuickInputService
 	) {
 		super(state, createResultSet(source), {
 			actionOrientation: ActionsOrientation.HORIZONTAL,
 			inMemoryDataProcessing: true
-		}, contextMenuService, instantiationService, editorService, untitledEditorService, configurationService, queryModelService, themeService, contextViewService, notificationService, executionPlanService, accessibilityService);
+		}, contextMenuService, instantiationService, editorService, untitledEditorService, configurationService, queryModelService, themeService, contextViewService, notificationService, executionPlanService, accessibilityService, quickInputService);
 		this._gridDataProvider = this.instantiationService.createInstance(DataResourceDataProvider, source, this.resultSet, this.cellModel);
 		this._chart = this.instantiationService.createInstance(ChartView, false);
 

src/sql/workbench/contrib/profiler/browser/profilerEditor.ts

@@ -55,6 +55,7 @@ import { IEditorGroup, IEditorGroupsService } from 'vs/workbench/services/editor
 import { IModelService } from 'vs/editor/common/services/model';
 import { CommonFindController, FindStartFocusAction } from 'vs/editor/contrib/find/browser/findController';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 class BasicView implements IView {
 	public get element(): HTMLElement {
@@ -173,7 +174,8 @@ export class ProfilerEditor extends EditorPane {
 		@IClipboardService private _clipboardService: IClipboardService,
 		@ITextResourcePropertiesService private readonly textResourcePropertiesService: ITextResourcePropertiesService,
 		@IEditorGroupsService editorGroupsService: IEditorGroupsService,
-		@IAccessibilityService private readonly _accessibilityService: IAccessibilityService
+		@IAccessibilityService private readonly _accessibilityService: IAccessibilityService,
+		@IQuickInputService private readonly _quickInputService: IQuickInputService
 	) {
 		super(ProfilerEditor.ID, telemetryService, themeService, storageService);
 		this._profilerEditorContextKey = CONTEXT_PROFILER_EDITOR.bindTo(this._contextKeyService);
@@ -389,7 +391,7 @@ export class ProfilerEditor extends EditorPane {
 		detailTableContainer.style.width = '100%';
 		detailTableContainer.style.height = '100%';
 		this._detailTableData = new TableDataView<IDetailData>();
-		this._detailTable = new Table(detailTableContainer, this._accessibilityService, {
+		this._detailTable = new Table(detailTableContainer, this._accessibilityService, this._quickInputService, {
 			dataProvider: this._detailTableData, columns: [
 				{
 					id: 'label',

src/sql/workbench/contrib/profiler/browser/profilerTableEditor.ts

@@ -34,6 +34,7 @@ import { handleCopyRequest } from 'sql/workbench/contrib/profiler/browser/profil
 import { ITextResourcePropertiesService } from 'vs/editor/common/services/textResourceConfiguration';
 import { FindReplaceState, FindReplaceStateChangedEvent } from 'vs/editor/contrib/find/browser/findState';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 export interface ProfilerTableViewState {
 	scrollTop: number;
@@ -70,7 +71,8 @@ export class ProfilerTableEditor extends EditorPane implements IProfilerControll
 		@IStatusbarService private _statusbarService: IStatusbarService,
 		@IClipboardService private _clipboardService: IClipboardService,
 		@ITextResourcePropertiesService private readonly textResourcePropertiesService: ITextResourcePropertiesService,
-		@IAccessibilityService private readonly _accessibilityService: IAccessibilityService
+		@IAccessibilityService private readonly _accessibilityService: IAccessibilityService,
+		@IQuickInputService private readonly _quickInputService: IQuickInputService
 	) {
 		super(ProfilerTableEditor.ID, telemetryService, _themeService, storageService);
 		this._actionMap[ACTION_IDS.FIND_NEXT] = this._instantiationService.createInstance(ProfilerFindNext, this);
@@ -86,7 +88,7 @@ export class ProfilerTableEditor extends EditorPane implements IProfilerControll
 		this._overlay.style.zIndex = '4';
 		parent.appendChild(this._overlay);
 
-		this._profilerTable = new Table(parent, this._accessibilityService, {
+		this._profilerTable = new Table(parent, this._accessibilityService, this._quickInputService, {
 			sorter: (args) => {
 				let input = this.input as ProfilerInput;
 				if (input && input.data) {

src/sql/workbench/contrib/query/browser/gridPanel.ts

@@ -55,6 +55,7 @@ import { ExecutionPlanInput } from 'sql/workbench/contrib/executionPlan/common/e
 import { CopyAction } from 'vs/editor/contrib/clipboard/browser/clipboard';
 import { formatDocumentWithSelectedProvider, FormattingMode } from 'vs/editor/contrib/format/browser/format';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 const ROW_HEIGHT = 29;
 const HEADER_HEIGHT = 26;
@@ -409,7 +410,8 @@ export abstract class GridTableBase<T> extends Disposable implements IView {
 		@IContextViewService private readonly contextViewService: IContextViewService,
 		@INotificationService private readonly notificationService: INotificationService,
 		@IExecutionPlanService private readonly executionPlanService: IExecutionPlanService,
-		@IAccessibilityService private readonly accessibilityService: IAccessibilityService
+		@IAccessibilityService private readonly accessibilityService: IAccessibilityService,
+		@IQuickInputService private readonly quickInputService: IQuickInputService
 	) {
 		super();
 
@@ -524,7 +526,7 @@ export abstract class GridTableBase<T> extends Disposable implements IView {
 				inMemoryDataProcessing: this.options.inMemoryDataProcessing,
 				inMemoryDataCountThreshold: this.options.inMemoryDataCountThreshold
 			});
-		this.table = this._register(new Table(this.tableContainer, this.accessibilityService, { dataProvider: this.dataProvider, columns: this.columns }, tableOptions));
+		this.table = this._register(new Table(this.tableContainer, this.accessibilityService, this.quickInputService, { dataProvider: this.dataProvider, columns: this.columns }, tableOptions));
 		this.table.setTableTitle(localize('resultsGrid', "Results grid"));
 		this.table.setSelectionModel(this.selectionModel);
 		this.table.registerPlugin(new MouseWheelSupport());
@@ -924,14 +926,15 @@ class GridTable<T> extends GridTableBase<T> {
 		@IContextViewService contextViewService: IContextViewService,
 		@INotificationService notificationService: INotificationService,
 		@IExecutionPlanService executionPlanService: IExecutionPlanService,
-		@IAccessibilityService accessibilityService: IAccessibilityService
+		@IAccessibilityService accessibilityService: IAccessibilityService,
+		@IQuickInputService quickInputService: IQuickInputService
 	) {
 		super(state, resultSet, {
 			actionOrientation: ActionsOrientation.VERTICAL,
 			inMemoryDataProcessing: true,
 			showActionBar: true,
 			inMemoryDataCountThreshold: configurationService.getValue<IQueryEditorConfiguration>('queryEditor').results.inMemoryDataProcessingThreshold,
-		}, contextMenuService, instantiationService, editorService, untitledEditorService, configurationService, queryModelService, themeService, contextViewService, notificationService, executionPlanService, accessibilityService);
+		}, contextMenuService, instantiationService, editorService, untitledEditorService, configurationService, queryModelService, themeService, contextViewService, notificationService, executionPlanService, accessibilityService, quickInputService);
 		this._gridDataProvider = this.instantiationService.createInstance(QueryGridDataProvider, this._runner, resultSet.batchId, resultSet.id);
 		this.providerId = this._runner.getProviderId();
 	}

src/sql/workbench/contrib/resourceViewer/browser/resourceViewerTable.ts

@@ -26,6 +26,7 @@ import { ContextMenuAnchor } from 'sql/workbench/contrib/resourceViewer/browser/
 import { LoadingSpinnerPlugin } from 'sql/base/browser/ui/table/plugins/loadingSpinner.plugin';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 export class ResourceViewerTable extends Disposable {
 
@@ -41,14 +42,15 @@ export class ResourceViewerTable extends Disposable {
 		@ICommandService private _commandService: ICommandService,
 		@INotificationService private _notificationService: INotificationService,
 		@IContextViewService private _contextViewService: IContextViewService,
-		@IAccessibilityService private _accessibilityService: IAccessibilityService) {
+		@IAccessibilityService private _accessibilityService: IAccessibilityService,
+		@IQuickInputService private _quickInputService: IQuickInputService) {
 		super();
 		let filterFn = (data: Array<azdata.DataGridItem>): Array<azdata.DataGridItem> => {
 			return data.filter(item => this.filter(item));
 		};
 
 		this._dataView = new TableDataView<azdata.DataGridItem>(undefined, undefined, undefined, filterFn);
-		this._resourceViewerTable = this._register(new Table(parent, this._accessibilityService, {
+		this._resourceViewerTable = this._register(new Table(parent, this._accessibilityService, this._quickInputService, {
 			sorter: (args) => {
 				this._dataView.sort(args);
 			}

src/sql/workbench/services/insights/browser/insightsDialogView.ts

@@ -52,6 +52,7 @@ import { attachButtonStyler } from 'vs/platform/theme/common/styler';
 import { IDisposableDataProvider } from 'sql/base/common/dataProvider';
 import { ITextResourcePropertiesService } from 'vs/editor/common/services/textResourceConfiguration';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 const labelDisplay = nls.localize("insights.item", "Item");
 const valueDisplay = nls.localize("insights.value", "Value");
@@ -88,13 +89,14 @@ class InsightTableView extends ViewPane {
 		@IOpenerService openerService: IOpenerService,
 		@IThemeService themeService: IThemeService,
 		@ITelemetryService telemetryService: ITelemetryService,
-		@IAccessibilityService private _accessibilityService: IAccessibilityService
+		@IAccessibilityService private _accessibilityService: IAccessibilityService,
+		@IQuickInputService private _quickInputService: IQuickInputService
 	) {
 		super(options, keybindingService, contextMenuService, configurationService, contextKeyService, viewDescriptorService, instantiationService, openerService, themeService, telemetryService);
 	}
 
 	protected override renderBody(container: HTMLElement): void {
-		this._table = new Table(container, this._accessibilityService, {
+		this._table = new Table(container, this._accessibilityService, this._quickInputService, {
 			columns: this.columns,
 			dataProvider: this.data
 		}, this.tableOptions);

src/sql/workbench/services/notebook/browser/outputs/mimemodel.ts

@@ -6,6 +6,7 @@
 import { IRenderMime } from 'sql/workbench/services/notebook/browser/outputs/renderMimeInterfaces';
 import { ReadonlyJSONObject } from 'sql/workbench/services/notebook/common/jsonext';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 /**
@@ -22,6 +23,7 @@ export class MimeModel implements IRenderMime.IMimeModel {
 		this._callback = options.callback;
 		this._themeService = options.themeService;
 		this._accessibilityService = options.accessibilityService;
+		this._quickInputService = options.quickInputService;
 	}
 
 	/**
@@ -51,6 +53,10 @@ export class MimeModel implements IRenderMime.IMimeModel {
 		return this._accessibilityService;
 	}
 
+	get quickInputService(): IQuickInputService {
+		return this._quickInputService;
+	}
+
 	/**
 	 * Set the data associated with the model.
 	 *
@@ -69,6 +75,7 @@ export class MimeModel implements IRenderMime.IMimeModel {
 	private _metadata: ReadonlyJSONObject;
 	private _themeService: IThemeService;
 	private _accessibilityService: IAccessibilityService;
+	private _quickInputService: IQuickInputService;
 }
 
 /**
@@ -105,5 +112,7 @@ export namespace MimeModel {
 		themeService?: IThemeService;
 
 		accessibilityService?: IAccessibilityService;
+
+		quickInputService?: IQuickInputService;
 	}
 }

src/sql/workbench/services/notebook/browser/outputs/renderMimeInterfaces.ts

@@ -5,6 +5,7 @@
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { ReadonlyJSONObject } from 'sql/workbench/services/notebook/common/jsonext';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 /**
  * A namespace for rendermime associated interfaces.
@@ -45,6 +46,7 @@ export namespace IRenderMime {
 		readonly themeService: IThemeService;
 
 		readonly accessibilityService: IAccessibilityService;
+		readonly quickInputService: IQuickInputService;
 	}
 
 	/**

src/sql/workbench/services/notebook/browser/outputs/tableRenderers.ts

@@ -17,6 +17,7 @@ import { AdditionalKeyBindings } from 'sql/base/browser/ui/table/plugins/additio
 import { RESULTS_GRID_DEFAULTS } from 'sql/workbench/common/constants';
 import { values } from 'vs/base/common/collections';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 /**
  * Render DataResource as a grid into a host node.
@@ -56,7 +57,7 @@ export function renderDataResource(
 	let transformedData = transformData(sourceObject.data, columnsTransformed);
 	tableResultsData.push(transformedData);
 
-	let detailTable = new Table(tableContainer, options.accessibilityService, {
+	let detailTable = new Table(tableContainer, options.accessibilityService, options.quickInputService, {
 		dataProvider: tableResultsData, columns: columnsTransformed
 	}, {
 		rowHeight: RESULTS_GRID_DEFAULTS.rowHeight,
@@ -141,5 +142,10 @@ export namespace renderDataResource {
 		 * Accessibility service used to get screen reader optimization flag state
 		 */
 		accessibilityService: IAccessibilityService;
+
+		/**
+		 * quickInput service is used to get user's input in column resizing.
+		 */
+		quickInputService?: IQuickInputService;
 	}
 }

src/sql/workbench/services/notebook/browser/outputs/widgets.ts

@@ -402,7 +402,8 @@ export class RenderedDataResource extends RenderedCommon {
 			host: this.node,
 			source: JSON.stringify(model.data[this.mimeType]),
 			themeService: model.themeService,
-			accessibilityService: model.accessibilityService
+			accessibilityService: model.accessibilityService,
+			quickInputService: model.quickInputService
 		});
 	}
 }

src/sql/workbench/services/restore/browser/restoreDialog.ts

@@ -49,6 +49,7 @@ import { IBackupRestoreUrlBrowserDialogService } from 'sql/workbench/services/ba
 import { MediaDeviceType } from 'sql/workbench/contrib/backup/common/constants';
 import { ITextResourcePropertiesService } from 'vs/editor/common/services/textResourceConfiguration';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 interface FileListElement {
 	logicalFileName: string;
@@ -159,7 +160,8 @@ export class RestoreDialog extends Modal {
 		@IClipboardService clipboardService: IClipboardService,
 		@ILogService logService: ILogService,
 		@ITextResourcePropertiesService textResourcePropertiesService: ITextResourcePropertiesService,
-		@IAccessibilityService private _accessibilityService: IAccessibilityService
+		@IAccessibilityService private _accessibilityService: IAccessibilityService,
+		@IQuickInputService private _quickInputService: IQuickInputService
 	) {
 		super(localize('RestoreDialogTitle', "Restore database"), TelemetryKeys.ModalDialogName.Restore, telemetryService, layoutService, clipboardService, themeService, logService, textResourcePropertiesService, contextKeyService, { hasErrors: true, width: 'wide', hasSpinner: true });
 		// view model
@@ -310,7 +312,7 @@ export class RestoreDialog extends Modal {
 		this._restorePlanTableContainer = DOM.append(restorePlanElement, DOM.$('.dialog-input-section.restore-list'));
 		DOM.hide(this._restorePlanTableContainer);
 		this._restorePlanData = new TableDataView<Slick.SlickData>();
-		this._restorePlanTable = this._register(new Table<Slick.SlickData>(this._restorePlanTableContainer, this._accessibilityService,
+		this._restorePlanTable = this._register(new Table<Slick.SlickData>(this._restorePlanTableContainer, this._accessibilityService, this._quickInputService,
 			{ dataProvider: this._restorePlanData, columns: this._restorePlanColumn }, { enableColumnReorder: false }));
 		this._restorePlanTable.setTableTitle(localize('restorePlan', "Restore plan"));
 		this._restorePlanTable.setSelectionModel(new RowSelectionModel({ selectActiveRow: false }));
@@ -361,7 +363,7 @@ export class RestoreDialog extends Modal {
 			field: 'restoreAs'
 		}];
 		this._fileListData = new TableDataView<FileListElement>();
-		this._fileListTable = this._register(new Table<FileListElement>(this._fileListTableContainer, this._accessibilityService,
+		this._fileListTable = this._register(new Table<FileListElement>(this._fileListTableContainer, this._accessibilityService, this._quickInputService,
 			{ dataProvider: this._fileListData, columns }, { enableColumnReorder: false }));
 		this._fileListTable.setSelectionModel(new RowSelectionModel());
 

src/sql/workbench/test/electron-browser/modalComponents/table.component.test.ts

@@ -19,7 +19,7 @@ suite('TableComponent Tests', () => {
 			['4', '5', '6']
 		];
 		let columns = ['c1', 'c2', 'c3'];
-		const tableComponent = new TableComponent(undefined, undefined, undefined, new NullLogService(), undefined, undefined, undefined, undefined);
+		const tableComponent = new TableComponent(undefined, undefined, undefined, new NullLogService(), undefined, undefined, undefined, undefined, undefined);
 
 		let actual = tableComponent.transformData(data, columns);
 		let expected: { [key: string]: string }[] = [
@@ -39,7 +39,7 @@ suite('TableComponent Tests', () => {
 
 	test('Table transformData should return empty array given undefined rows', () => {
 		let data = undefined;
-		const tableComponent = new TableComponent(undefined, undefined, undefined, new NullLogService(), undefined, undefined, undefined, undefined);
+		const tableComponent = new TableComponent(undefined, undefined, undefined, new NullLogService(), undefined, undefined, undefined, undefined, undefined);
 		let columns = ['c1', 'c2', 'c3'];
 		let actual = tableComponent.transformData(data, columns);
 		let expected: { [key: string]: string }[] = [];
@@ -52,7 +52,7 @@ suite('TableComponent Tests', () => {
 			['4', '5', '6']
 		];
 		let columns;
-		const tableComponent = new TableComponent(undefined, undefined, undefined, new NullLogService(), undefined, undefined, undefined, undefined);
+		const tableComponent = new TableComponent(undefined, undefined, undefined, new NullLogService(), undefined, undefined, undefined, undefined, undefined);
 		let actual = tableComponent.transformData(data, columns);
 		let expected: { [key: string]: string }[] = [];
 		assert.deepStrictEqual(actual, expected);
@@ -63,7 +63,7 @@ suite('TableComponent Tests', () => {
 			['1', '2'],
 			['4', '5']
 		];
-		const tableComponent = new TableComponent(undefined, undefined, undefined, new NullLogService(), undefined, undefined, undefined, undefined);
+		const tableComponent = new TableComponent(undefined, undefined, undefined, new NullLogService(), undefined, undefined, undefined, undefined, undefined);
 		let columns = ['c1', 'c2', 'c3'];
 		let actual = tableComponent.transformData(data, columns);
 		let expected: { [key: string]: string }[] = [