Feat/importpreview2 (#6506)

* Allow column resizing in preview table

* added property to TableComponentProperties

* hooked up new prop into model view

* new setOptions

* adding enum to azdata interface

* bring in slickgrid 2.3.30

* PR feedback
This commit is contained in:
kenvanhyning
2019-07-26 08:31:47 -07:00
committed by GitHub
parent 9f342ec9d5
commit 5cffa7fe52
9 changed files with 74 additions and 8 deletions

View File

@@ -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<Slick.SlickData>(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 = <Slick.GridOptions<any>>{
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<azdata.TableComponentProperties, number[]>((props, value) => props.selectedRows = value, newValue);
}
public get forceFitColumns() {
return this.getPropertyOrDefault<azdata.TableComponentProperties, ColumnSizingMode>((props) => props.forceFitColumns, ColumnSizingMode.ForceFit);
}
}