diff --git a/src/sql/azdata.proposed.d.ts b/src/sql/azdata.proposed.d.ts
index e3ae03aff9..7fd4c08748 100644
--- a/src/sql/azdata.proposed.d.ts
+++ b/src/sql/azdata.proposed.d.ts
@@ -260,7 +260,8 @@ declare module 'azdata' {
export enum DeclarativeDataType {
- component = 'component'
+ component = 'component',
+ menu = 'menu'
}
export type DeclarativeTableRowSelectedEvent = {
@@ -394,11 +395,23 @@ declare module 'azdata' {
selectedRow?: number;
}
+
+ export interface DeclarativeTableMenuCellValue {
+ /**
+ * commands for the menu. Use an array for a group and menu separators will be added.
+ */
+ commands: (string | string[])[];
+ /**
+ * context that will be passed to the commands.
+ */
+ context: { [key: string]: string | boolean | number } | string | boolean | number | undefined
+ }
+
export interface DeclarativeTableCellValue {
/**
* The cell value
*/
- value: string | number | boolean | Component;
+ value: string | number | boolean | Component | DeclarativeTableMenuCellValue;
/**
* The aria-label of the cell
*/
diff --git a/src/sql/workbench/api/common/sqlExtHostTypes.ts b/src/sql/workbench/api/common/sqlExtHostTypes.ts
index 1602a4ca5b..670ed4949f 100644
--- a/src/sql/workbench/api/common/sqlExtHostTypes.ts
+++ b/src/sql/workbench/api/common/sqlExtHostTypes.ts
@@ -387,7 +387,8 @@ export enum DeclarativeDataType {
category = 'category',
boolean = 'boolean',
editableCategory = 'editableCategory',
- component = 'component'
+ component = 'component',
+ menu = 'menu'
}
export enum CardType {
diff --git a/src/sql/workbench/browser/modelComponents/declarativeTable.component.html b/src/sql/workbench/browser/modelComponents/declarativeTable.component.html
index 909e8209e3..197fea4e2c 100644
--- a/src/sql/workbench/browser/modelComponents/declarativeTable.component.html
+++ b/src/sql/workbench/browser/modelComponents/declarativeTable.component.html
@@ -1,13 +1,13 @@
-
+
@@ -20,8 +20,7 @@
|
+ [ngStyle]="mergeCss(columns[c].rowCssStyles, cellData.style)" role="gridcell">
@@ -42,6 +41,8 @@
+
|
diff --git a/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts b/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts
index ed613102d0..73b656aea6 100644
--- a/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts
+++ b/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts
@@ -19,13 +19,18 @@ import { ILogService } from 'vs/platform/log/common/log';
import * as colorRegistry from 'vs/platform/theme/common/colorRegistry';
import { IColorTheme, IThemeService } from 'vs/platform/theme/common/themeService';
import { equals } from 'vs/base/common/objects';
+import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { MenuItemAction, MenuRegistry } from 'vs/platform/actions/common/actions';
+import { IAction, Separator } from 'vs/base/common/actions';
export enum DeclarativeDataType {
string = 'string',
category = 'category',
boolean = 'boolean',
editableCategory = 'editableCategory',
- component = 'component'
+ component = 'component',
+ menu = 'menu'
}
@Component({
@@ -53,7 +58,9 @@ export default class DeclarativeTableComponent extends ContainerBase ChangeDetectorRef)) changeRef: ChangeDetectorRef,
@Inject(forwardRef(() => ElementRef)) el: ElementRef,
@Inject(ILogService) logService: ILogService,
- @Inject(IThemeService) themeService: IThemeService
+ @Inject(IThemeService) themeService: IThemeService,
+ @Inject(IContextMenuService) private contextMenuService: IContextMenuService,
+ @Inject(IInstantiationService) private instantiationService: IInstantiationService
) {
super(changeRef, el, logService);
this._colorTheme = themeService.getColorTheme();
@@ -89,6 +96,10 @@ export default class DeclarativeTableComponent extends ContainerBase {
+ return this.createMenuItem(cmd);
+ }));
+ }
+ }
+ this.contextMenuService.showContextMenu({
+ getAnchor: () => event.currentTarget as HTMLElement,
+ getActions: () => actions,
+ getActionsContext: () => cellValue.context
+ });
+ }
+
+ private createMenuItem(commandId: string): MenuItemAction {
+ const command = MenuRegistry.getCommand(commandId);
+ return this.instantiationService.createInstance(MenuItemAction, command, undefined, { shouldForwardArgs: true });
+ }
+
public onKey(e: KeyboardEvent, row: number) {
// Ignore the bubble up events
if (e.target !== e.currentTarget) {
diff --git a/src/sql/workbench/browser/modelComponents/media/declarativeTable.css b/src/sql/workbench/browser/modelComponents/media/declarativeTable.css
index 9eba631d91..86e99bc8b4 100644
--- a/src/sql/workbench/browser/modelComponents/media/declarativeTable.css
+++ b/src/sql/workbench/browser/modelComponents/media/declarativeTable.css
@@ -26,3 +26,11 @@
width: 100%;
text-align: center;
}
+
+.declarative-table .declarative-table-cell .codicon.toggle-more {
+ border-width: 0px;
+ height: 16px;
+ width: 26px;
+ vertical-align: middle;
+ cursor: pointer;
+}