diff --git a/extensions/import/src/wizard/pages/prosePreviewPage.ts b/extensions/import/src/wizard/pages/prosePreviewPage.ts index f97d9f8b9f..28b617eea7 100644 --- a/extensions/import/src/wizard/pages/prosePreviewPage.ts +++ b/extensions/import/src/wizard/pages/prosePreviewPage.ts @@ -32,7 +32,11 @@ export class ProsePreviewPage extends ImportPage { } async start(): Promise { - this.table = this.view.modelBuilder.table().component(); + this.table = this.view.modelBuilder.table().withProperties({ + data: undefined, + columns: undefined, + forceFitColumns: azdata.ColumnSizingMode.AutoFit + }).component(); this.refresh = this.view.modelBuilder.button().withProperties({ label: localize('flatFileImport.refresh', 'Refresh'), isFile: false diff --git a/package.json b/package.json index ce99387b51..cf2121fe1b 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ "rxjs": "5.4.0", "sanitize-html": "^1.19.1", "semver-umd": "^5.5.3", - "slickgrid": "github:anthonydresser/SlickGrid#2.3.29", + "slickgrid": "github:anthonydresser/SlickGrid#2.3.30", "spdlog": "^0.9.0", "sudo-prompt": "9.0.0", "v8-inspect-profiler": "^0.0.20", diff --git a/src/sql/azdata.proposed.d.ts b/src/sql/azdata.proposed.d.ts index fd603abb43..b64a47db84 100644 --- a/src/sql/azdata.proposed.d.ts +++ b/src/sql/azdata.proposed.d.ts @@ -3206,11 +3206,18 @@ declare module 'azdata' { customAction = 1 } + export enum ColumnSizingMode { + ForceFit = 0, // all columns will be sized to fit in viewable space, no horiz scroll bar + AutoFit = 1, // columns will be ForceFit up to a certain number; currently 3. At 4 or more the behavior will switch to NO force fit + DataFit = 2 // columns use sizing based on cell data, horiz scroll bar present if more cells than visible in view area + } + export interface TableComponentProperties extends ComponentProperties { data: any[][]; columns: string[] | TableColumn[]; fontSize?: number | string; selectedRows?: number[]; + forceFitColumns?: ColumnSizingMode; } export interface FileBrowserTreeProperties extends ComponentProperties { diff --git a/src/sql/base/browser/ui/table/table.ts b/src/sql/base/browser/ui/table/table.ts index 458a4a88df..02a2818db1 100644 --- a/src/sql/base/browser/ui/table/table.ts +++ b/src/sql/base/browser/ui/table/table.ts @@ -334,4 +334,9 @@ export class Table extends Widget implements IDisposa this.styleElement.innerHTML = content.join('\n'); } + + public setOptions(newOptions: Slick.GridOptions) { + this._grid.setOptions(newOptions); + this._grid.invalidate(); + } } diff --git a/src/sql/workbench/api/common/extHostModelView.ts b/src/sql/workbench/api/common/extHostModelView.ts index 04fbb748b8..29a82a6296 100644 --- a/src/sql/workbench/api/common/extHostModelView.ts +++ b/src/sql/workbench/api/common/extHostModelView.ts @@ -13,7 +13,7 @@ import * as vscode from 'vscode'; import * as azdata from 'azdata'; import { SqlMainContext, ExtHostModelViewShape, MainThreadModelViewShape, ExtHostModelViewTreeViewsShape } from 'sql/workbench/api/common/sqlExtHost.protocol'; -import { IItemConfig, ModelComponentTypes, IComponentShape, IComponentEventArgs, ComponentEventType } from 'sql/workbench/api/common/sqlExtHostTypes'; +import { IItemConfig, ModelComponentTypes, IComponentShape, IComponentEventArgs, ComponentEventType, ColumnSizingMode } from 'sql/workbench/api/common/sqlExtHostTypes'; import { IExtensionDescription } from 'vs/platform/extensions/common/extensions'; class ModelBuilderImpl implements azdata.ModelBuilder { @@ -1126,6 +1126,13 @@ class TableComponentWrapper extends ComponentWrapper implements azdata.TableComp this.setProperty('selectedRows', v); } + public get forceFitColumns(): ColumnSizingMode { + return this.properties['forceFitColumns']; + } + public set forceFitColunms(v: ColumnSizingMode) { + this.setProperty('forceFitColumns', v); + } + public get onRowSelected(): vscode.Event { let emitter = this._emitterMap.get(ComponentEventType.onSelectedRowChanged); return emitter && emitter.event; diff --git a/src/sql/workbench/api/common/sqlExtHostTypes.ts b/src/sql/workbench/api/common/sqlExtHostTypes.ts index cd632d112a..84c55108dc 100644 --- a/src/sql/workbench/api/common/sqlExtHostTypes.ts +++ b/src/sql/workbench/api/common/sqlExtHostTypes.ts @@ -169,6 +169,12 @@ export enum ModelComponentTypes { Hyperlink } +export enum ColumnSizingMode { + ForceFit = 0, // all columns will be sized to fit in viewable space, no horiz scroll bar + AutoFit = 1, // columns will be ForceFit up to a certain number; currently 3. At 4 or more the behavior will switch to NO force fit + DataFit = 2 // columns use sizing based on cell data, horiz scroll bar present if more cells than visible in view area +} + export enum AgentSubSystem { TransactSql = 1, ActiveScripting = 2, diff --git a/src/sql/workbench/api/node/sqlExtHost.api.impl.ts b/src/sql/workbench/api/node/sqlExtHost.api.impl.ts index 6b4095f486..8d5f2bf13e 100644 --- a/src/sql/workbench/api/node/sqlExtHost.api.impl.ts +++ b/src/sql/workbench/api/node/sqlExtHost.api.impl.ts @@ -554,7 +554,8 @@ export function createApiFactory( ActionOnCellCheckboxCheck: sqlExtHostTypes.ActionOnCellCheckboxCheck, StepCompletionAction: sqlExtHostTypes.StepCompletionAction, AgentSubSystem: sqlExtHostTypes.AgentSubSystem, - ExtensionNodeType: sqlExtHostTypes.ExtensionNodeType + ExtensionNodeType: sqlExtHostTypes.ExtensionNodeType, + ColumnSizingMode: sqlExtHostTypes.ColumnSizingMode }; }, diff --git a/src/sql/workbench/browser/modelComponents/table.component.ts b/src/sql/workbench/browser/modelComponents/table.component.ts index 981e82cc6e..a5b36ecec0 100644 --- a/src/sql/workbench/browser/modelComponents/table.component.ts +++ b/src/sql/workbench/browser/modelComponents/table.component.ts @@ -10,6 +10,7 @@ import { } from '@angular/core'; import * as azdata from 'azdata'; +import { ColumnSizingMode } from 'sql/workbench/api/common/sqlExtHostTypes'; import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase'; import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/workbench/browser/modelComponents/interfaces'; @@ -119,7 +120,7 @@ export default class TableComponent extends ComponentBase implements IComponent, syncColumnCellResize: true, enableColumnReorder: false, enableCellNavigation: true, - forceFitColumns: true + forceFitColumns: true // default to true during init, actual value will be updated when setProperties() is called }; this._table = new Table(this._inputContainer.nativeElement, { dataProvider: this._tableData, columns: this._tableColumns }, options); @@ -159,9 +160,40 @@ export default class TableComponent extends ComponentBase implements IComponent, private layoutTable(): void { let width: number = this.convertSizeToNumber(this.width); let height: number = this.convertSizeToNumber(this.height); + let forceFit: boolean = true; + + // convert the tri-state viewmodel columnSizingMode to be either true or false for SlickGrid + switch (this.forceFitColumns) { + case ColumnSizingMode.DataFit: { + forceFit = false; + break; + } + case ColumnSizingMode.AutoFit: { + // determine if force fit should be on or off based on the number of columns + // this can be made more sophisticated if need be in the future. a simple + // check for 3 or less force fits causes the small number of columns to fill the + // screen better. 4 or more, slickgrid seems to do a good job filling the view and having forceFit + // false enables the scroll bar and avoids the over-packing should there be a very large + // number of columns + forceFit = (this._table.columns.length <= 3); + break; + } + case ColumnSizingMode.ForceFit: + default: { + // default behavior for the table component (used primarily in wizards) is to forcefit the columns + forceFit = true; + break; + } + } + let updateOptions = >{ + forceFitColumns: forceFit + }; + this._table.setOptions(updateOptions); + this._table.layout(new Dimension( width && width > 0 ? width : getContentWidth(this._inputContainer.nativeElement), height && height > 0 ? height : getContentHeight(this._inputContainer.nativeElement))); + this._table.resizeCanvas(); } public setLayout(): void { @@ -250,4 +282,8 @@ export default class TableComponent extends ComponentBase implements IComponent, public set selectedRows(newValue: number[]) { this.setPropertyFromUI((props, value) => props.selectedRows = value, newValue); } + + public get forceFitColumns() { + return this.getPropertyOrDefault((props) => props.forceFitColumns, ColumnSizingMode.ForceFit); + } } diff --git a/yarn.lock b/yarn.lock index aa68c2eb4a..3a233d3649 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8447,9 +8447,9 @@ slice-ansi@^2.0.0: astral-regex "^1.0.0" is-fullwidth-code-point "^2.0.0" -"slickgrid@github:anthonydresser/SlickGrid#2.3.29": - version "2.3.29" - resolved "https://codeload.github.com/anthonydresser/SlickGrid/tar.gz/40b88f10d36d35f350838d1a2142c4b790701709" +"slickgrid@github:anthonydresser/SlickGrid#2.3.30": + version "2.3.30" + resolved "https://codeload.github.com/anthonydresser/SlickGrid/tar.gz/c941811d833504dfaf40b29b69044a42595bfafb" dependencies: jquery ">=1.8.0" jquery-ui ">=1.8.0"