Add state for column sizing (#3683)

* add state for column sizing

* work properly with auto size columns
This commit is contained in:
Anthony Dresser
2019-01-11 10:25:57 -08:00
committed by GitHub
parent bfb68254a4
commit 71c1ed6c49
2 changed files with 17 additions and 4 deletions

View File

@@ -46,6 +46,9 @@ export class Table<T extends Slick.SlickData> extends Widget implements IThemabl
private _onClick = new Emitter<ITableMouseEvent>();
public readonly onClick: Event<ITableMouseEvent> = this._onClick.event;
private _onColumnResize = new Emitter<void>();
public readonly onColumnResize = this._onColumnResize.event;
constructor(parent: HTMLElement, configuration?: ITableConfiguration<T>, options?: Slick.GridOptions<T>) {
super();
if (!configuration || !configuration.dataProvider || isArray(configuration.dataProvider)) {
@@ -105,6 +108,7 @@ export class Table<T extends Slick.SlickData> extends Widget implements IThemabl
this.mapMouseEvent(this._grid.onContextMenu, this._onContextMenu);
this.mapMouseEvent(this._grid.onClick, this._onClick);
this._grid.onColumnsResized.subscribe(() => this._onColumnResize.fire());
}
private mapMouseEvent(slickEvent: Slick.Event<any>, emitter: Emitter<ITableMouseEvent>) {

View File

@@ -90,6 +90,7 @@ export class GridTableState extends Disposable {
/* The top row of the current scroll */
public scrollPositionY = 0;
public scrollPositionX = 0;
public columnSizes: number[] = undefined;
public selection: Slick.Range[];
public activeCell: Slick.Cell;
@@ -287,8 +288,7 @@ export class GridPanel extends ViewletPanel {
this._state.tableStates.push(tableState);
}
}
let table = this.instantiationService.createInstance(GridTable, this.runner, set);
table.state = tableState;
let table = this.instantiationService.createInstance(GridTable, this.runner, set, tableState);
this.tableDisposable.push(tableState.onMaximizedChange(e => {
if (e) {
this.maximizeTable(table.id);
@@ -418,6 +418,7 @@ class GridTable<T> extends Disposable implements IView {
constructor(
private runner: QueryRunner,
private _resultSet: sqlops.ResultSetSummary,
state: GridTableState,
@IContextMenuService private contextMenuService: IContextMenuService,
@IInstantiationService private instantiationService: IInstantiationService,
@IEditorService private editorService: IEditorService,
@@ -425,6 +426,7 @@ class GridTable<T> extends Disposable implements IView {
@IConfigurationService private configurationService: IConfigurationService
) {
super();
this.state = state;
this.container.style.width = '100%';
this.container.style.height = '100%';
this.container.className = 'grid-panel';
@@ -438,7 +440,8 @@ class GridTable<T> extends Disposable implements IView {
? 'XML Showplan'
: escape(c.columnName),
field: i.toString(),
formatter: isLinked ? hyperLinkFormatter : textFormatter
formatter: isLinked ? hyperLinkFormatter : textFormatter,
width: this.state.columnSizes && this.state.columnSizes[i] ? this.state.columnSizes[i] : undefined
};
});
}
@@ -509,7 +512,7 @@ class GridTable<T> extends Disposable implements IView {
this.table = this._register(new Table(tableContainer, { dataProvider: this.dataProvider, columns: this.columns }, tableOptions));
this.table.setSelectionModel(this.selectionModel);
this.table.registerPlugin(new MouseWheelSupport());
this.table.registerPlugin(new AutoColumnSize({ autoSizeOnRender: this.configurationService.getValue('resultsGrid.autoSizeColumns') }));
this.table.registerPlugin(new AutoColumnSize({ autoSizeOnRender: !this.state.columnSizes && this.configurationService.getValue('resultsGrid.autoSizeColumns') }));
this.table.registerPlugin(copyHandler);
this.table.registerPlugin(this.rowNumberColumn);
this.table.registerPlugin(new AdditionalKeyBindings());
@@ -565,6 +568,12 @@ class GridTable<T> extends Disposable implements IView {
}
});
// we need to remove the first column since this is the row number
this.table.onColumnResize(() => {
let columnSizes = this.table.grid.getColumns().slice(1).map(v => v.width);
this.state.columnSizes = columnSizes;
});
this.table.grid.onActiveCellChanged.subscribe(e => {
if (this.state) {
this.state.activeCell = this.table.grid.getActiveCell();