Refactor results grid (#2147)

* got a basic ui

* working on message panel

* done with messages moving to grids

* formatting

* working on multiple grids

* it does work

* styling

* formatting

* formatting

* fixed reset methods

* moved for scrollable

* formatting

* fixing scrolling

* making progress

* formatting

* fixed scrolling

* fix horizontal scrolling and size

* fix columns for tables

* integrate view item

* implementing heightmap scrolling

* add context menu and fix scrolling

* formatting

* revert slickgrid

* add actions to message pane

* formatting

* formatting

* bottom padding for tables

* minimized and maximized table actions

* add timestamp

* added batch start message  with selection

* updating

* formatting

* formatting

* fix execution time

* formatting

* fix problems

* fix rendering issues, add icons

* formatting

* formatting

* added commit change

* fix performance, message scrolling, etc

* formatting

* formatting

* fixing performance

* formatting

* update package

* tring to fix bugs

* reworking

* the problem is the 1st sash is always the first sash visible

* remove resizing from grid panels

* add missing files

* trying to get edit to work

* fix editdata

* formatting

* update angular2-slickgrid

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

@@ -4,11 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { IThemable } from 'vs/platform/theme/common/styler';
-import * as objects from 'sql/base/common/objects';
 import { Event, Emitter } from 'vs/base/common/event';
-import { Dimension } from 'vs/base/browser/dom';
+import { Dimension, EventType } from 'vs/base/browser/dom';
 import { $, Builder } from 'vs/base/browser/builder';
-import { EventType } from 'vs/base/browser/dom';
 import { IAction } from 'vs/base/common/actions';
 import { IActionOptions, ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
@@ -17,12 +15,16 @@ import './panelStyles';
 import { Disposable } from 'vs/base/common/lifecycle';
 
 export interface IPanelStyles {
+}
 
+export interface IPanelOptions {
+	showHeaderWhenSingleView?: boolean;
 }
 
 export interface IPanelView {
 	render(container: HTMLElement): void;
 	layout(dimension: Dimension): void;
+	remove?(): void;
 }
 
 export interface IPanelTab {
@@ -36,6 +38,10 @@ interface IInternalPanelTab extends IPanelTab {
 	label: Builder;
 }
 
+const defaultOptions: IPanelOptions = {
+	showHeaderWhenSingleView: true
+};
+
 export type PanelTabIdentifier = string;
 
 export class TabbedPanel extends Disposable implements IThemable {
@@ -49,11 +55,12 @@ export class TabbedPanel extends Disposable implements IThemable {
 	private _actionbar: ActionBar;
 	private _currentDimensions: Dimension;
 	private _collapsed = false;
+	private _headerVisible: boolean;
 
 	private _onTabChange = new Emitter<PanelTabIdentifier>();
 	public onTabChange: Event<PanelTabIdentifier> = this._onTabChange.event;
 
-	constructor(private container: HTMLElement) {
+	constructor(private container: HTMLElement, private options: IPanelOptions = defaultOptions) {
 		super();
 		this.$parent = this._register($('.tabbedPanel'));
 		this.$parent.appendTo(container);
@@ -65,7 +72,12 @@ export class TabbedPanel extends Disposable implements IThemable {
 		let actionbarcontainer = $('.title-actions');
 		this._actionbar = new ActionBar(actionbarcontainer.getHTMLElement());
 		this.$header.append(actionbarcontainer);
-		this.$parent.append(this.$header);
+		if (options.showHeaderWhenSingleView) {
+			this._headerVisible = true;
+			this.$parent.append(this.$header);
+		} else {
+			this._headerVisible = false;
+		}
 		this.$body = $('tabBody');
 		this.$body.attr('role', 'tabpanel');
 		this.$body.attr('tabindex', '0');
@@ -73,12 +85,16 @@ export class TabbedPanel extends Disposable implements IThemable {
 	}
 
 	public pushTab(tab: IPanelTab): PanelTabIdentifier {
-		let internalTab = objects.clone(tab) as IInternalPanelTab;
+		let internalTab = tab as IInternalPanelTab;
 		this._tabMap.set(tab.identifier, internalTab);
 		this._createTab(internalTab);
 		if (!this._shownTab) {
 			this.showTab(tab.identifier);
 		}
+		if (this._tabMap.size > 1 && !this._headerVisible) {
+			this.$parent.append(this.$header, 0);
+			this._headerVisible = true;
+		}
 		return tab.identifier as PanelTabIdentifier;
 	}
 
@@ -139,6 +155,11 @@ export class TabbedPanel extends Disposable implements IThemable {
 	}
 
 	public removeTab(tab: PanelTabIdentifier) {
+		let actualTab = this._tabMap.get(tab);
+		actualTab.header.destroy();
+		if (actualTab.view.remove) {
+			actualTab.view.remove();
+		}
 		this._tabMap.get(tab).header.destroy();
 		this._tabMap.delete(tab);
 	}
@@ -151,8 +172,9 @@ export class TabbedPanel extends Disposable implements IThemable {
 		this._currentDimensions = dimension;
 		this.$header.style('width', dimension.width + 'px');
 		this.$body.style('width', dimension.width + 'px');
-		this.$body.style('height', (dimension.height - this.headersize) + 'px');
-		this._layoutCurrentTab(new Dimension(dimension.width, dimension.height - this.headersize));
+		const bodyHeight = dimension.height - (this._headerVisible ? this.headersize : 0);
+		this.$body.style('height', bodyHeight + 'px');
+		this._layoutCurrentTab(new Dimension(dimension.width, bodyHeight));
 	}
 
 	private _layoutCurrentTab(dimension: Dimension): void {

src/sql/base/browser/ui/scrollableSplitview/heightMap.ts

@@ -0,0 +1,212 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { INextIterator } from 'vs/base/common/iterator';
+
+export interface IView {
+	id: string;
+}
+
+export interface IViewItem {
+	view: IView;
+	top: number;
+	height: number;
+	width: number;
+}
+
+export class HeightMap {
+
+	private heightMap: IViewItem[];
+	private indexes: { [item: string]: number; };
+
+	constructor() {
+		this.heightMap = [];
+		this.indexes = {};
+	}
+
+	public getContentHeight(): number {
+		let last = this.heightMap[this.heightMap.length - 1];
+		return !last ? 0 : last.top + last.height;
+	}
+
+	public onInsertItems(iterator: INextIterator<IViewItem>, afterItemId: string = null): number {
+		let viewItem: IViewItem;
+		let i: number, j: number;
+		let totalSize: number;
+		let sizeDiff = 0;
+
+		if (afterItemId === null) {
+			i = 0;
+			totalSize = 0;
+		} else {
+			i = this.indexes[afterItemId] + 1;
+			viewItem = this.heightMap[i - 1];
+
+			if (!viewItem) {
+				console.error('view item doesnt exist');
+				return undefined;
+			}
+
+			totalSize = viewItem.top + viewItem.height;
+		}
+
+		let boundSplice = this.heightMap.splice.bind(this.heightMap, i, 0);
+
+		let itemsToInsert: IViewItem[] = [];
+
+		while (viewItem = iterator.next()) {
+			viewItem.top = totalSize + sizeDiff;
+
+			this.indexes[viewItem.view.id] = i++;
+			itemsToInsert.push(viewItem);
+			sizeDiff += viewItem.height;
+		}
+
+		boundSplice.apply(this.heightMap, itemsToInsert);
+
+		for (j = i; j < this.heightMap.length; j++) {
+			viewItem = this.heightMap[j];
+			viewItem.top += sizeDiff;
+			this.indexes[viewItem.view.id] = j;
+		}
+
+		for (j = itemsToInsert.length - 1; j >= 0; j--) {
+			this.onInsertItem(itemsToInsert[j]);
+		}
+
+		for (j = this.heightMap.length - 1; j >= i; j--) {
+			this.onRefreshItem(this.heightMap[j]);
+		}
+
+		return sizeDiff;
+	}
+
+	public onInsertItem(item: IViewItem): void {
+		// noop
+	}
+
+	// Contiguous items
+	public onRemoveItems(iterator: INextIterator<string>): void {
+		let itemId: string;
+		let viewItem: IViewItem;
+		let startIndex: number = null;
+		let i: number;
+		let sizeDiff = 0;
+
+		while (itemId = iterator.next()) {
+			i = this.indexes[itemId];
+			viewItem = this.heightMap[i];
+
+			if (!viewItem) {
+				console.error('view item doesnt exist');
+				return;
+			}
+
+			sizeDiff -= viewItem.height;
+			delete this.indexes[itemId];
+			this.onRemoveItem(viewItem);
+
+			if (startIndex === null) {
+				startIndex = i;
+			}
+		}
+
+		if (sizeDiff === 0) {
+			return;
+		}
+
+		this.heightMap.splice(startIndex, i - startIndex + 1);
+
+		for (i = startIndex; i < this.heightMap.length; i++) {
+			viewItem = this.heightMap[i];
+			viewItem.top += sizeDiff;
+			this.indexes[viewItem.view.id] = i;
+			this.onRefreshItem(viewItem);
+		}
+	}
+
+	public onRemoveItem(item: IViewItem): void {
+		// noop
+	}
+
+	public onRefreshItem(item: IViewItem, needsRender: boolean = false): void {
+		// noop
+	}
+
+	protected updateSize(item: string, size: number): void {
+		let i = this.indexes[item];
+
+		let viewItem = this.heightMap[i];
+
+		viewItem.height = size;
+	}
+
+	protected updateTop(item: string, top: number): void {
+		let i = this.indexes[item];
+
+		let viewItem = this.heightMap[i];
+
+		viewItem.top = top;
+	}
+
+	public itemsCount(): number {
+		return this.heightMap.length;
+	}
+
+	public itemAt(position: number): string {
+		return this.heightMap[this.indexAt(position)].view.id;
+	}
+
+	public withItemsInRange(start: number, end: number, fn: (item: string) => void): void {
+		start = this.indexAt(start);
+		end = this.indexAt(end);
+		for (let i = start; i <= end; i++) {
+			fn(this.heightMap[i].view.id);
+		}
+	}
+
+	public indexAt(position: number): number {
+		let left = 0;
+		let right = this.heightMap.length;
+		let center: number;
+		let item: IViewItem;
+
+		// Binary search
+		while (left < right) {
+			center = Math.floor((left + right) / 2);
+			item = this.heightMap[center];
+
+			if (position < item.top) {
+				right = center;
+			} else if (position >= item.top + item.height) {
+				if (left === center) {
+					break;
+				}
+				left = center;
+			} else {
+				return center;
+			}
+		}
+
+		return this.heightMap.length;
+	}
+
+	public indexAfter(position: number): number {
+		return Math.min(this.indexAt(position) + 1, this.heightMap.length);
+	}
+
+	public itemAtIndex(index: number): IViewItem {
+		return this.heightMap[index];
+	}
+
+	public itemAfter(item: IViewItem): IViewItem {
+		return this.heightMap[this.indexes[item.view.id] + 1] || null;
+	}
+
+	public dispose(): void {
+		this.heightMap = null;
+		this.indexes = null;
+	}
+}

src/sql/base/browser/ui/scrollableSplitview/scrollableSplitview.css

@@ -0,0 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+ .monaco-scroll-split-view {
+	position: relative;
+}

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

@@ -0,0 +1,622 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+import 'vs/css!./scrollableSplitview';
+import { IDisposable, combinedDisposable, toDisposable } from 'vs/base/common/lifecycle';
+import { mapEvent, Emitter, Event, debounceEvent } from 'vs/base/common/event';
+import * as types from 'vs/base/common/types';
+import * as dom from 'vs/base/browser/dom';
+import { clamp } from 'vs/base/common/numbers';
+import { range, firstIndex } from 'vs/base/common/arrays';
+import { Sash, Orientation, ISashEvent as IBaseSashEvent } from 'vs/base/browser/ui/sash/sash';
+import { ScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
+import { HeightMap, IView as HeightIView, IViewItem as HeightIViewItem } from './heightMap';
+import { ArrayIterator } from 'vs/base/common/iterator';
+import { mixin } from 'vs/base/common/objects';
+export { Orientation } from 'vs/base/browser/ui/sash/sash';
+
+export interface ISplitViewOptions {
+	orientation?: Orientation; // default Orientation.VERTICAL
+	enableResizing?: boolean;
+}
+
+const defaultOptions: ISplitViewOptions = {
+	enableResizing: true
+};
+
+export interface IView extends HeightIView {
+	readonly minimumSize: number;
+	readonly maximumSize: number;
+	readonly onDidChange: Event<number | undefined>;
+	render(container: HTMLElement, orientation: Orientation): void;
+	layout(size: number, orientation: Orientation): void;
+}
+
+interface ISashEvent {
+	sash: Sash;
+	start: number;
+	current: number;
+}
+
+interface IViewItem extends HeightIViewItem {
+	view: IView;
+	size: number;
+	container: HTMLElement;
+	disposable: IDisposable;
+	layout(): void;
+}
+
+interface ISashItem {
+	sash: Sash;
+	disposable: IDisposable;
+}
+
+interface ISashDragState {
+	index: number;
+	start: number;
+	sizes: number[];
+}
+
+enum State {
+	Idle,
+	Busy
+}
+
+function pushToEnd<T>(arr: T[], value: T): T[] {
+	let didFindValue = false;
+
+	const result = arr.filter(v => {
+		if (v === value) {
+			didFindValue = true;
+			return false;
+		}
+
+		return true;
+	});
+
+	if (didFindValue) {
+		result.push(value);
+	}
+
+	return result;
+}
+
+export class ScrollableSplitView extends HeightMap implements IDisposable {
+
+	private orientation: Orientation;
+	private el: HTMLElement;
+	private size = 0;
+	private contentSize = 0;
+	private viewItems: IViewItem[] = [];
+	private sashItems: ISashItem[] = [];
+	private sashDragState: ISashDragState;
+	private state: State = State.Idle;
+	private scrollable: ScrollableElement;
+
+	private options: ISplitViewOptions;
+
+	private dirtyState = false;
+
+	private lastRenderTop: number;
+	private lastRenderHeight: number;
+
+	private _onDidSashChange = new Emitter<void>();
+	readonly onDidSashChange = this._onDidSashChange.event;
+	private _onDidSashReset = new Emitter<void>();
+	readonly onDidSashReset = this._onDidSashReset.event;
+
+	get length(): number {
+		return this.viewItems.length;
+	}
+
+	constructor(container: HTMLElement, options: ISplitViewOptions = {}) {
+		super();
+		this.orientation = types.isUndefined(options.orientation) ? Orientation.VERTICAL : options.orientation;
+
+		this.options = mixin(options, defaultOptions, false);
+
+		this.el = document.createElement('div');
+		this.scrollable = new ScrollableElement(this.el, {});
+		debounceEvent(this.scrollable.onScroll, (l, e) => e, 25)(e => {
+			this.render(e.scrollTop, e.height);
+			this.relayout();
+		});
+		let domNode = this.scrollable.getDomNode();
+		dom.addClass(this.el, 'monaco-scroll-split-view');
+		dom.addClass(domNode, 'monaco-split-view2');
+		dom.addClass(domNode, this.orientation === Orientation.VERTICAL ? 'vertical' : 'horizontal');
+		container.appendChild(domNode);
+	}
+
+	addViews(views: IView[], sizes: number[], index = this.viewItems.length): void {
+		if (this.state !== State.Idle) {
+			throw new Error('Cant modify splitview');
+		}
+
+		this.state = State.Busy;
+
+		for (let i = 0; i < views.length; i++) {
+			let view = views[i], size = sizes[i];
+
+			// Add view
+			const container = dom.$('.split-view-view');
+
+			const onChangeDisposable = view.onDidChange(size => this.onViewChange(item, size));
+			const containerDisposable = toDisposable(() => {
+				if (container.parentElement) {
+					this.el.removeChild(container);
+				}
+				this.onRemoveItems(new ArrayIterator([item.view.id]));
+			});
+			const disposable = combinedDisposable([onChangeDisposable, containerDisposable]);
+
+			const layoutContainer = this.orientation === Orientation.VERTICAL
+				? size => item.container.style.height = `${item.size}px`
+				: size => item.container.style.width = `${item.size}px`;
+
+			const layout = () => {
+				layoutContainer(item.size);
+				item.view.layout(item.size, this.orientation);
+			};
+
+			size = Math.round(size);
+			const item: IViewItem = { view, container, size, layout, disposable, height: size, top: 0, width: 0 };
+			this.viewItems.splice(index, 0, item);
+
+			this.onInsertItems(new ArrayIterator([item]), index > 0 ? this.viewItems[index - 1].view.id : undefined);
+
+			// Add sash
+			if (this.options.enableResizing && this.viewItems.length > 1) {
+				const orientation = this.orientation === Orientation.VERTICAL ? Orientation.HORIZONTAL : Orientation.VERTICAL;
+				const layoutProvider = this.orientation === Orientation.VERTICAL ? { getHorizontalSashTop: sash => this.getSashPosition(sash) } : { getVerticalSashLeft: sash => this.getSashPosition(sash) };
+				const sash = new Sash(this.el, layoutProvider, { orientation });
+				const sashEventMapper = this.orientation === Orientation.VERTICAL
+					? (e: IBaseSashEvent) => ({ sash, start: e.startY, current: e.currentY })
+					: (e: IBaseSashEvent) => ({ sash, start: e.startX, current: e.currentX });
+
+				const onStart = mapEvent(sash.onDidStart, sashEventMapper);
+				const onStartDisposable = onStart(this.onSashStart, this);
+				const onChange = mapEvent(sash.onDidChange, sashEventMapper);
+				const onSashChangeDisposable = onChange(this.onSashChange, this);
+				const onEnd = mapEvent<void, void>(sash.onDidEnd, () => null);
+				const onEndDisposable = onEnd(() => this._onDidSashChange.fire());
+				const onDidReset = mapEvent<void, void>(sash.onDidReset, () => null);
+				const onDidResetDisposable = onDidReset(() => this._onDidSashReset.fire());
+
+				const disposable = combinedDisposable([onStartDisposable, onSashChangeDisposable, onEndDisposable, onDidResetDisposable, sash]);
+				const sashItem: ISashItem = { sash, disposable };
+
+				this.sashItems.splice(index - 1, 0, sashItem);
+			}
+
+			view.render(container, this.orientation);
+		}
+
+		this.relayout(index);
+		this.state = State.Idle;
+	}
+
+	addView(view: IView, size: number, index = this.viewItems.length): void {
+		if (this.state !== State.Idle) {
+			throw new Error('Cant modify splitview');
+		}
+
+		this.state = State.Busy;
+
+		// Add view
+		const container = dom.$('.split-view-view');
+
+		const onChangeDisposable = view.onDidChange(size => this.onViewChange(item, size));
+		const containerDisposable = toDisposable(() => {
+			if (container.parentElement) {
+				this.el.removeChild(container);
+			}
+			this.onRemoveItems(new ArrayIterator([item.view.id]));
+		});
+		const disposable = combinedDisposable([onChangeDisposable, containerDisposable]);
+
+		const layoutContainer = this.orientation === Orientation.VERTICAL
+			? size => item.container.style.height = `${item.size}px`
+			: size => item.container.style.width = `${item.size}px`;
+
+		const layout = () => {
+			layoutContainer(item.size);
+			item.view.layout(item.size, this.orientation);
+		};
+
+		size = Math.round(size);
+		const item: IViewItem = { view, container, size, layout, disposable, height: size, top: 0, width: 0 };
+		this.viewItems.splice(index, 0, item);
+
+		this.onInsertItems(new ArrayIterator([item]), index > 0 ? this.viewItems[index - 1].view.id : undefined);
+
+		// Add sash
+		if (this.options.enableResizing && this.viewItems.length > 1) {
+			const orientation = this.orientation === Orientation.VERTICAL ? Orientation.HORIZONTAL : Orientation.VERTICAL;
+			const layoutProvider = this.orientation === Orientation.VERTICAL ? { getHorizontalSashTop: sash => this.getSashPosition(sash) } : { getVerticalSashLeft: sash => this.getSashPosition(sash) };
+			const sash = new Sash(this.el, layoutProvider, { orientation });
+			const sashEventMapper = this.orientation === Orientation.VERTICAL
+				? (e: IBaseSashEvent) => ({ sash, start: e.startY, current: e.currentY })
+				: (e: IBaseSashEvent) => ({ sash, start: e.startX, current: e.currentX });
+
+			const onStart = mapEvent(sash.onDidStart, sashEventMapper);
+			const onStartDisposable = onStart(this.onSashStart, this);
+			const onChange = mapEvent(sash.onDidChange, sashEventMapper);
+			const onSashChangeDisposable = onChange(this.onSashChange, this);
+			const onEnd = mapEvent<void, void>(sash.onDidEnd, () => null);
+			const onEndDisposable = onEnd(() => this._onDidSashChange.fire());
+			const onDidReset = mapEvent<void, void>(sash.onDidReset, () => null);
+			const onDidResetDisposable = onDidReset(() => this._onDidSashReset.fire());
+
+			const disposable = combinedDisposable([onStartDisposable, onSashChangeDisposable, onEndDisposable, onDidResetDisposable, sash]);
+			const sashItem: ISashItem = { sash, disposable };
+
+			sash.hide();
+			this.sashItems.splice(index - 1, 0, sashItem);
+		}
+
+		view.render(container, this.orientation);
+		this.relayout(index);
+		this.state = State.Idle;
+	}
+
+	removeView(index: number): void {
+		if (this.state !== State.Idle) {
+			throw new Error('Cant modify splitview');
+		}
+
+		this.state = State.Busy;
+
+		if (index < 0 || index >= this.viewItems.length) {
+			return;
+		}
+
+		// Remove view
+		const viewItem = this.viewItems.splice(index, 1)[0];
+		viewItem.disposable.dispose();
+
+		// Remove sash
+		if (this.options.enableResizing && this.viewItems.length >= 1) {
+			const sashIndex = Math.max(index - 1, 0);
+			const sashItem = this.sashItems.splice(sashIndex, 1)[0];
+			sashItem.disposable.dispose();
+		} else {
+			this.lastRenderHeight = NaN, this.lastRenderTop = NaN;
+		}
+
+		this.relayout();
+		this.state = State.Idle;
+	}
+
+	moveView(from: number, to: number): void {
+		if (this.state !== State.Idle) {
+			throw new Error('Cant modify splitview');
+		}
+
+		this.state = State.Busy;
+
+		if (from < 0 || from >= this.viewItems.length) {
+			return;
+		}
+
+		if (to < 0 || to >= this.viewItems.length) {
+			return;
+		}
+
+		if (from === to) {
+			return;
+		}
+
+		const viewItem = this.viewItems.splice(from, 1)[0];
+		this.viewItems.splice(to, 0, viewItem);
+
+		if (to + 1 < this.viewItems.length) {
+			this.el.insertBefore(viewItem.container, this.viewItems[to + 1].container);
+		} else {
+			this.el.appendChild(viewItem.container);
+		}
+
+		this.layoutViews();
+		this.state = State.Idle;
+	}
+
+	private relayout(lowPriorityIndex?: number): void {
+		const contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
+		this.resize(this.viewItems.length - 1, this.size - contentSize, undefined, lowPriorityIndex);
+	}
+
+	layout(size: number): void {
+		const previousSize = Math.max(this.size, this.contentSize);
+		this.size = size;
+		this.resize(this.viewItems.length - 1, size - previousSize);
+	}
+
+	private render(scrollTop: number, viewHeight: number): void {
+		let i: number;
+		let stop: number;
+
+		let renderTop = scrollTop;
+		let renderBottom = scrollTop + viewHeight;
+		let thisRenderBottom = this.lastRenderTop + this.lastRenderHeight;
+
+		// when view scrolls down, start rendering from the renderBottom
+		for (i = this.indexAfter(renderBottom) - 1, stop = this.indexAt(Math.max(thisRenderBottom, renderTop)); i >= stop; i--) {
+			if (this.insertItemInDOM(<IViewItem>this.itemAtIndex(i))) {
+				this.dirtyState = true;
+			}
+		}
+
+		// when view scrolls up, start rendering from either this.renderTop or renderBottom
+		for (i = Math.min(this.indexAt(this.lastRenderTop), this.indexAfter(renderBottom)) - 1, stop = this.indexAt(renderTop); i >= stop; i--) {
+			if (this.insertItemInDOM(<IViewItem>this.itemAtIndex(i))) {
+				this.dirtyState = true;
+			}
+		}
+
+		// when view scrolls down, start unrendering from renderTop
+		for (i = this.indexAt(this.lastRenderTop), stop = Math.min(this.indexAt(renderTop), this.indexAfter(thisRenderBottom)); i < stop; i++) {
+			if (this.removeItemFromDOM(<IViewItem>this.itemAtIndex(i))) {
+				this.dirtyState = true;
+			}
+		}
+
+		// when view scrolls up, start unrendering from either renderBottom this.renderTop
+		for (i = Math.max(this.indexAfter(renderBottom), this.indexAt(this.lastRenderTop)), stop = this.indexAfter(thisRenderBottom); i < stop; i++) {
+			if (this.removeItemFromDOM(<IViewItem>this.itemAtIndex(i))) {
+				this.dirtyState = true;
+			}
+		}
+
+		let topItem = this.itemAtIndex(this.indexAt(renderTop));
+
+		if (topItem) {
+			this.el.style.top = (topItem.top - renderTop) + 'px';
+		}
+
+		this.lastRenderTop = renderTop;
+		this.lastRenderHeight = renderBottom - renderTop;
+	}
+
+	private onSashStart({ sash, start }: ISashEvent): void {
+		const index = firstIndex(this.sashItems, item => item.sash === sash);
+		const sizes = this.viewItems.map(i => i.size);
+
+		// const upIndexes = range(index, -1);
+		// const collapseUp = upIndexes.reduce((r, i) => r + (sizes[i] - this.viewItems[i].view.minimumSize), 0);
+		// const expandUp = upIndexes.reduce((r, i) => r + (this.viewItems[i].view.maximumSize - sizes[i]), 0);
+
+		// const downIndexes = range(index + 1, this.viewItems.length);
+		// const collapseDown = downIndexes.reduce((r, i) => r + (sizes[i] - this.viewItems[i].view.minimumSize), 0);
+		// const expandDown = downIndexes.reduce((r, i) => r + (this.viewItems[i].view.maximumSize - sizes[i]), 0);
+
+		// const minDelta = -Math.min(collapseUp, expandDown);
+		// const maxDelta = Math.min(collapseDown, expandUp);
+
+		this.sashDragState = { start, index, sizes };
+	}
+
+	private onSashChange({ sash, current }: ISashEvent): void {
+		const { index, start, sizes } = this.sashDragState;
+		const delta = current - start;
+
+		this.resize(index, delta, sizes);
+	}
+
+	private onViewChange(item: IViewItem, size: number | undefined): void {
+		const index = this.viewItems.indexOf(item);
+
+		if (index < 0 || index >= this.viewItems.length) {
+			return;
+		}
+
+		size = typeof size === 'number' ? size : item.size;
+		size = clamp(size, item.view.minimumSize, item.view.maximumSize);
+		item.size = size;
+		this.relayout(index);
+	}
+
+	resizeView(index: number, size: number): void {
+		if (this.state !== State.Idle) {
+			throw new Error('Cant modify splitview');
+		}
+
+		this.state = State.Busy;
+
+		if (index < 0 || index >= this.viewItems.length) {
+			return;
+		}
+
+		const item = this.viewItems[index];
+		size = Math.round(size);
+		size = clamp(size, item.view.minimumSize, item.view.maximumSize);
+		let delta = size - item.size;
+
+		if (delta !== 0 && index < this.viewItems.length - 1) {
+			const downIndexes = range(index + 1, this.viewItems.length);
+			const collapseDown = downIndexes.reduce((r, i) => r + (this.viewItems[i].size - this.viewItems[i].view.minimumSize), 0);
+			const expandDown = downIndexes.reduce((r, i) => r + (this.viewItems[i].view.maximumSize - this.viewItems[i].size), 0);
+			const deltaDown = clamp(delta, -expandDown, collapseDown);
+
+			this.resize(index, deltaDown);
+			delta -= deltaDown;
+		}
+
+		if (delta !== 0 && index > 0) {
+			const upIndexes = range(index - 1, -1);
+			const collapseUp = upIndexes.reduce((r, i) => r + (this.viewItems[i].size - this.viewItems[i].view.minimumSize), 0);
+			const expandUp = upIndexes.reduce((r, i) => r + (this.viewItems[i].view.maximumSize - this.viewItems[i].size), 0);
+			const deltaUp = clamp(-delta, -collapseUp, expandUp);
+
+			this.resize(index - 1, deltaUp);
+		}
+
+		this.state = State.Idle;
+	}
+
+	// DOM changes
+
+	private insertItemInDOM(item: IViewItem): boolean {
+		if (item.container.parentElement) {
+			return false;
+		}
+
+		let elementAfter: HTMLElement = null;
+		let itemAfter = <IViewItem>this.itemAfter(item);
+
+		if (itemAfter && itemAfter.container) {
+			elementAfter = itemAfter.container;
+		}
+
+		if (elementAfter === null) {
+			this.el.appendChild(item.container);
+		} else {
+			try {
+				this.el.insertBefore(item.container, elementAfter);
+			} catch (e) {
+				// console.warn('Failed to locate previous tree element');
+				this.el.appendChild(item.container);
+			}
+		}
+
+		item.layout();
+		return true;
+	}
+
+	private removeItemFromDOM(item: IViewItem): boolean {
+		if (!item || !item.container || !item.container.parentElement) {
+			return false;
+		}
+
+		this.el.removeChild(item.container);
+		return true;
+	}
+
+	getViewSize(index: number): number {
+		if (index < 0 || index >= this.viewItems.length) {
+			return -1;
+		}
+
+		return this.viewItems[index].size;
+	}
+
+	private resize(index: number, delta: number, sizes = this.viewItems.map(i => i.size), lowPriorityIndex?: number): void {
+		if (index < 0 || index >= this.viewItems.length) {
+			return;
+		}
+
+		if (delta !== 0) {
+			let upIndexes = range(index, -1);
+			let downIndexes = range(index + 1, this.viewItems.length);
+
+			if (typeof lowPriorityIndex === 'number') {
+				upIndexes = pushToEnd(upIndexes, lowPriorityIndex);
+				downIndexes = pushToEnd(downIndexes, lowPriorityIndex);
+			}
+
+			const upItems = upIndexes.map(i => this.viewItems[i]);
+			const upSizes = upIndexes.map(i => sizes[i]);
+
+			const downItems = downIndexes.map(i => this.viewItems[i]);
+			const downSizes = downIndexes.map(i => sizes[i]);
+
+			for (let i = 0, deltaUp = delta; deltaUp !== 0 && i < upItems.length; i++) {
+				const item = upItems[i];
+				const size = clamp(upSizes[i] + deltaUp, item.view.minimumSize, item.view.maximumSize);
+				const viewDelta = size - upSizes[i];
+
+				deltaUp -= viewDelta;
+				item.size = size;
+			}
+
+			for (let i = 0, deltaDown = delta; deltaDown !== 0 && i < downItems.length; i++) {
+				const item = downItems[i];
+				const size = clamp(downSizes[i] - deltaDown, item.view.minimumSize, item.view.maximumSize);
+				const viewDelta = size - downSizes[i];
+
+				deltaDown += viewDelta;
+				item.size = size;
+			}
+		}
+
+		let contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
+		let emptyDelta = this.size - contentSize;
+
+		for (let i = this.viewItems.length - 1; emptyDelta > 0 && i >= 0; i--) {
+			const item = this.viewItems[i];
+			const size = clamp(item.size + emptyDelta, item.view.minimumSize, item.view.maximumSize);
+			const viewDelta = size - item.size;
+
+			emptyDelta -= viewDelta;
+			item.size = size;
+		}
+
+		this.contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
+
+		this.scrollable.setScrollDimensions({
+			scrollHeight: this.contentSize,
+			height: this.size
+		});
+
+		this.layoutViews();
+	}
+
+	private layoutViews(): void {
+		if (this.dirtyState) {
+			for (let i = this.indexAt(this.lastRenderTop); i <= this.indexAfter(this.lastRenderTop + this.lastRenderHeight) - 1; i++) {
+				this.viewItems[i].layout();
+				if (this.options.enableResizing) {
+					this.sashItems[i].sash.layout();
+				}
+			}
+			this.dirtyState = false;
+		}
+
+		// Update sashes enablement
+		// let previous = false;
+		// const collapsesDown = this.viewItems.map(i => previous = (i.size - i.view.minimumSize > 0) || previous);
+
+		// previous = false;
+		// const expandsDown = this.viewItems.map(i => previous = (i.view.maximumSize - i.size > 0) || previous);
+
+		// const reverseViews = [...this.viewItems].reverse();
+		// previous = false;
+		// const collapsesUp = reverseViews.map(i => previous = (i.size - i.view.minimumSize > 0) || previous).reverse();
+
+		// previous = false;
+		// const expandsUp = reverseViews.map(i => previous = (i.view.maximumSize - i.size > 0) || previous).reverse();
+
+		// this.sashItems.forEach((s, i) => {
+		// 	if ((collapsesDown[i] && expandsUp[i + 1]) || (expandsDown[i] && collapsesUp[i + 1])) {
+		// 		s.sash.enable();
+		// 	} else {
+		// 		s.sash.disable();
+		// 	}
+		// });
+	}
+
+	private getSashPosition(sash: Sash): number {
+		let position = 0;
+
+		for (let i = 0; i < this.sashItems.length; i++) {
+			position += this.viewItems[i].size;
+
+			if (this.sashItems[i].sash === sash) {
+				return position;
+			}
+		}
+
+		return 0;
+	}
+
+	dispose(): void {
+		this.viewItems.forEach(i => i.disposable.dispose());
+		this.viewItems = [];
+
+		this.sashItems.forEach(i => i.disposable.dispose());
+		this.sashItems = [];
+	}
+}

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

@@ -0,0 +1,215 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+export interface IObservableCollection<T> {
+	getLength(): number;
+	at(index: number): T;
+	getRange(start: number, end: number): T[];
+	setCollectionChangedCallback(callback: (change: CollectionChange, startIndex: number, count: number) => void): void;
+}
+
+export interface IGridDataRow {
+	row?: number;
+	values: any[];
+}
+
+export enum CollectionChange {
+	ItemsReplaced
+}
+
+class LoadCancellationToken {
+	isCancelled: boolean;
+}
+
+class DataWindow<TData> {
+	private _dataSourceLength: number;
+	private _data: TData[];
+	private _length: number = 0;
+	private _offsetFromDataSource: number = -1;
+
+	private loadFunction: (offset: number, count: number) => Thenable<TData[]>;
+	private lastLoadCancellationToken: LoadCancellationToken;
+	private loadCompleteCallback: (start: number, end: number) => void;
+	private placeholderItemGenerator: (index: number) => TData;
+
+	constructor(dataSourceLength: number,
+		loadFunction: (offset: number, count: number) => Thenable<TData[]>,
+		placeholderItemGenerator: (index: number) => TData,
+		loadCompleteCallback: (start: number, end: number) => void) {
+		this._dataSourceLength = dataSourceLength;
+		this.loadFunction = loadFunction;
+		this.placeholderItemGenerator = placeholderItemGenerator;
+		this.loadCompleteCallback = loadCompleteCallback;
+	}
+
+	getStartIndex(): number {
+		return this._offsetFromDataSource;
+	}
+
+	getEndIndex(): number {
+		return this._offsetFromDataSource + this._length;
+	}
+
+	contains(dataSourceIndex: number): boolean {
+		return dataSourceIndex >= this.getStartIndex() && dataSourceIndex < this.getEndIndex();
+	}
+
+	getItem(index: number): TData {
+		if (!this._data) {
+			return this.placeholderItemGenerator(index);
+		}
+		return this._data[index - this._offsetFromDataSource];
+	}
+
+	positionWindow(offset: number, length: number): void {
+		this._offsetFromDataSource = offset;
+		this._length = length;
+		this._data = undefined;
+
+		if (this.lastLoadCancellationToken) {
+			this.lastLoadCancellationToken.isCancelled = true;
+		}
+
+		if (length === 0) {
+			return;
+		}
+
+		let cancellationToken = new LoadCancellationToken();
+		this.lastLoadCancellationToken = cancellationToken;
+		this.loadFunction(offset, length).then(data => {
+			if (!cancellationToken.isCancelled) {
+				this._data = data;
+				this.loadCompleteCallback(this._offsetFromDataSource, this._offsetFromDataSource + this._length);
+			}
+		});
+	}
+}
+
+export class VirtualizedCollection<TData> implements IObservableCollection<TData> {
+
+	private _length: number;
+	private _windowSize: number;
+	private _bufferWindowBefore: DataWindow<TData>;
+	private _window: DataWindow<TData>;
+	private _bufferWindowAfter: DataWindow<TData>;
+
+	private collectionChangedCallback: (change: CollectionChange, startIndex: number, count: number) => void;
+
+	constructor(windowSize: number,
+		length: number,
+		loadFn: (offset: number, count: number) => Thenable<TData[]>,
+		private _placeHolderGenerator: (index: number) => TData) {
+		this._windowSize = windowSize;
+		this._length = length;
+
+		let loadCompleteCallback = (start: number, end: number) => {
+			if (this.collectionChangedCallback) {
+				this.collectionChangedCallback(CollectionChange.ItemsReplaced, start, end - start);
+			}
+		};
+
+		this._bufferWindowBefore = new DataWindow(length, loadFn, _placeHolderGenerator, loadCompleteCallback);
+		this._window = new DataWindow(length, loadFn, _placeHolderGenerator, loadCompleteCallback);
+		this._bufferWindowAfter = new DataWindow(length, loadFn, _placeHolderGenerator, loadCompleteCallback);
+	}
+
+	setCollectionChangedCallback(callback: (change: CollectionChange, startIndex: number, count: number) => void): void {
+		this.collectionChangedCallback = callback;
+	}
+
+	getLength(): number {
+		return this._length;
+	}
+
+	at(index: number): TData {
+		return this.getRange(index, index + 1)[0];
+	}
+
+	getRange(start: number, end: number): TData[] {
+
+		// current data may contain placeholders
+		let currentData = this.getRangeFromCurrent(start, end);
+
+		// only shift window and make promise of refreshed data in following condition:
+		if (start < this._bufferWindowBefore.getStartIndex() || end > this._bufferWindowAfter.getEndIndex()) {
+			// jump, reset
+			this.resetWindowsAroundIndex(start);
+		} else if (end <= this._bufferWindowBefore.getEndIndex()) {
+			// scroll up, shift up
+			let windowToRecycle = this._bufferWindowAfter;
+			this._bufferWindowAfter = this._window;
+			this._window = this._bufferWindowBefore;
+			this._bufferWindowBefore = windowToRecycle;
+			let newWindowOffset = Math.max(0, this._window.getStartIndex() - this._windowSize);
+
+			this._bufferWindowBefore.positionWindow(newWindowOffset, this._window.getStartIndex() - newWindowOffset);
+		} else if (start >= this._bufferWindowAfter.getStartIndex()) {
+			// scroll down, shift down
+			let windowToRecycle = this._bufferWindowBefore;
+			this._bufferWindowBefore = this._window;
+			this._window = this._bufferWindowAfter;
+			this._bufferWindowAfter = windowToRecycle;
+			let newWindowOffset = Math.min(this._window.getStartIndex() + this._windowSize, this._length);
+			let newWindowLength = Math.min(this._length - newWindowOffset, this._windowSize);
+
+			this._bufferWindowAfter.positionWindow(newWindowOffset, newWindowLength);
+		}
+
+		return currentData;
+	}
+
+	private getRangeFromCurrent(start: number, end: number): TData[] {
+		let currentData = [];
+		for (let i = 0; i < end - start; i++) {
+			currentData.push(this.getDataFromCurrent(start + i));
+		}
+
+		return currentData;
+	}
+
+	private getDataFromCurrent(index: number): TData {
+		if (this._bufferWindowBefore.contains(index)) {
+			return this._bufferWindowBefore.getItem(index);
+		} else if (this._bufferWindowAfter.contains(index)) {
+			return this._bufferWindowAfter.getItem(index);
+		} else if (this._window.contains(index)) {
+			return this._window.getItem(index);
+		}
+
+		return this._placeHolderGenerator(index);
+	}
+
+	private resetWindowsAroundIndex(index: number): void {
+
+		let bufferWindowBeforeStart = Math.max(0, index - this._windowSize * 1.5);
+		let bufferWindowBeforeEnd = Math.max(0, index - this._windowSize / 2);
+		this._bufferWindowBefore.positionWindow(bufferWindowBeforeStart, bufferWindowBeforeEnd - bufferWindowBeforeStart);
+
+		let mainWindowStart = bufferWindowBeforeEnd;
+		let mainWindowEnd = Math.min(mainWindowStart + this._windowSize, this._length);
+		this._window.positionWindow(mainWindowStart, mainWindowEnd - mainWindowStart);
+
+		let bufferWindowAfterStart = mainWindowEnd;
+		let bufferWindowAfterEnd = Math.min(bufferWindowAfterStart + this._windowSize, this._length);
+		this._bufferWindowAfter.positionWindow(bufferWindowAfterStart, bufferWindowAfterEnd - bufferWindowAfterStart);
+	}
+}
+
+export class AsyncDataProvider<TData extends IGridDataRow> implements Slick.DataProvider<TData> {
+
+	constructor(private dataRows: IObservableCollection<TData>) { }
+
+	public getLength(): number {
+		return this.dataRows ? this.dataRows.getLength() : 0;
+	}
+
+	public getItem(index: number): TData {
+		return !this.dataRows ? undefined : this.dataRows.at(index);
+	}
+
+	public getRange(start: number, end: number): TData[] {
+		return !this.dataRows ? undefined : this.dataRows.getRange(start, end);
+	}
+}

src/sql/base/browser/ui/table/plugins/mousewheelTableScroll.plugin.ts

@@ -0,0 +1,76 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+import * as DOM from 'vs/base/browser/dom';
+import { StandardMouseWheelEvent } from 'vs/base/browser/mouseEvent';
+import { dispose, IDisposable } from 'vs/base/common/lifecycle';
+import { mixin } from 'vs/base/common/objects';
+
+const SCROLL_WHEEL_SENSITIVITY = 50;
+
+export interface IMouseWheelSupportOptions {
+	scrollSpeed?: number;
+}
+
+const defaultOptions: IMouseWheelSupportOptions = {
+	scrollSpeed: SCROLL_WHEEL_SENSITIVITY
+};
+
+export class MouseWheelSupport implements Slick.Plugin<any> {
+
+	private viewport: HTMLElement;
+	private canvas: HTMLElement;
+	private options: IMouseWheelSupportOptions;
+
+	private _disposables: IDisposable[] = [];
+
+	constructor(options: IMouseWheelSupportOptions = {}) {
+		this.options = mixin(options, defaultOptions);
+	}
+
+	public init(grid: Slick.Grid<any>): void {
+		this.canvas = grid.getCanvasNode();
+		this.viewport = this.canvas.parentElement;
+		let onMouseWheel = (browserEvent: MouseWheelEvent) => {
+			let e = new StandardMouseWheelEvent(browserEvent);
+			this._onMouseWheel(e);
+		};
+		this._disposables.push(DOM.addDisposableListener(this.viewport, 'mousewheel', onMouseWheel));
+		this._disposables.push(DOM.addDisposableListener(this.viewport, 'DOMMouseScroll', onMouseWheel));
+	}
+
+	private _onMouseWheel(event: StandardMouseWheelEvent) {
+		const scrollHeight = this.canvas.clientHeight;
+		const height = this.viewport.clientHeight;
+		const scrollDown = Math.sign(event.deltaY) === -1;
+		if (scrollDown) {
+			if ((this.viewport.scrollTop - (event.deltaY * this.options.scrollSpeed)) + height > scrollHeight) {
+				this.viewport.scrollTop = scrollHeight - height;
+				this.viewport.dispatchEvent(new Event('scroll'));
+			} else {
+				this.viewport.scrollTop = this.viewport.scrollTop - (event.deltaY * this.options.scrollSpeed);
+				this.viewport.dispatchEvent(new Event('scroll'));
+				event.stopPropagation();
+				event.preventDefault();
+			}
+		} else {
+			if ((this.viewport.scrollTop - (event.deltaY * this.options.scrollSpeed)) < 0) {
+				this.viewport.scrollTop = 0;
+				this.viewport.dispatchEvent(new Event('scroll'));
+			} else {
+				this.viewport.scrollTop = this.viewport.scrollTop - (event.deltaY * this.options.scrollSpeed);
+				this.viewport.dispatchEvent(new Event('scroll'));
+				event.stopPropagation();
+				event.preventDefault();
+			}
+		}
+	}
+
+	destroy() {
+		dispose(this._disposables);
+	}
+}

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

@@ -11,9 +11,17 @@ import { IListStyles } from 'vs/base/browser/ui/list/listWidget';
 import * as DOM from 'vs/base/browser/dom';
 import { Color } from 'vs/base/common/color';
 import { mixin } from 'vs/base/common/objects';
-import { IDisposable } from 'vs/base/common/lifecycle';
+import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { Orientation } from 'vs/base/browser/ui/splitview/splitview';
 import { Widget } from 'vs/base/browser/ui/widget';
+import { isArray, isBoolean } from 'vs/base/common/types';
+import { Event, Emitter } from 'vs/base/common/event';
+import { range } from 'vs/base/common/arrays';
+
+export interface ITableContextMenuEvent {
+	anchor: HTMLElement | { x: number, y: number };
+	cell?: { row: number, cell: number };
+}
 
 export interface ITableStyles extends IListStyles {
 	tableHeaderBackground?: Color;
@@ -27,30 +35,46 @@ function getDefaultOptions<T>(): Slick.GridOptions<T> {
 	};
 }
 
-export class Table<T extends Slick.SlickData> extends Widget implements IThemable {
+export interface ITableSorter<T> {
+	sort(args: Slick.OnSortEventArgs<T>);
+}
+
+export interface ITableConfiguration<T> {
+	dataProvider?: Slick.DataProvider<T> | Array<T>;
+	columns?: Slick.Column<T>[];
+	sorter?: ITableSorter<T>;
+}
+
+export class Table<T extends Slick.SlickData> extends Widget implements IThemable, IDisposable {
 	private styleElement: HTMLStyleElement;
 	private idPrefix: string;
 
 	private _grid: Slick.Grid<T>;
 	private _columns: Slick.Column<T>[];
-	private _data: TableDataView<T>;
+	private _data: Slick.DataProvider<T>;
+	private _sorter: ITableSorter<T>;
+
 	private _autoscroll: boolean;
-	private _onRowCountChangeListener: IDisposable;
 	private _container: HTMLElement;
 	private _tableContainer: HTMLElement;
 
 	private _classChangeTimeout: number;
 
-	constructor(parent: HTMLElement, data?: Array<T> | TableDataView<T>, columns?: Slick.Column<T>[], options?: Slick.GridOptions<T>) {
+	private _disposables: IDisposable[] = [];
+
+	private _onContextMenu = new Emitter<ITableContextMenuEvent>();
+	public readonly onContextMenu: Event<ITableContextMenuEvent> = this._onContextMenu.event;
+
+	constructor(parent: HTMLElement, configuration?: ITableConfiguration<T>, options?: Slick.GridOptions<T>) {
 		super();
-		if (data instanceof TableDataView) {
-			this._data = data;
+		if (!configuration || isArray(configuration.dataProvider)) {
+			this._data = new TableDataView<T>(configuration && configuration.dataProvider as Array<T>);
 		} else {
-			this._data = new TableDataView<T>(data);
+			this._data = configuration.dataProvider;
 		}
 
-		if (columns) {
-			this._columns = columns;
+		if (configuration.columns) {
+			this._columns = configuration.columns;
 		} else {
 			this._columns = new Array<Slick.Column<T>>();
 		}
@@ -81,15 +105,33 @@ export class Table<T extends Slick.SlickData> extends Widget implements IThemabl
 		this._grid = new Slick.Grid<T>(this._tableContainer, this._data, this._columns, newOptions);
 		this.idPrefix = this._tableContainer.classList[0];
 		DOM.addClass(this._container, this.idPrefix);
-		this._onRowCountChangeListener = this._data.onRowCountChange(() => this._handleRowCountChange());
-		this._grid.onSort.subscribe((e, args) => {
-			this._data.sort(args);
-			this._grid.invalidate();
-			this._grid.render();
+		if (configuration.sorter) {
+			this._sorter = configuration.sorter;
+			this._grid.onSort.subscribe((e, args) => {
+				this._sorter.sort(args);
+				this._grid.invalidate();
+				this._grid.render();
+			});
+		}
+
+		this._grid.onContextMenu.subscribe((e: JQuery.Event) => {
+			const originalEvent = e.originalEvent;
+			const cell = this._grid.getCellFromEvent(originalEvent);
+			const anchor = originalEvent instanceof MouseEvent ? { x: originalEvent.x, y: originalEvent.y } : originalEvent.srcElement as HTMLElement;
+			this._onContextMenu.fire({ anchor, cell });
 		});
 	}
 
-	private _handleRowCountChange() {
+	public dispose() {
+		dispose(this._disposables);
+	}
+
+	public invalidateRows(rows: number[], keepEditor: boolean) {
+		this._grid.invalidateRows(rows, keepEditor);
+		this._grid.render();
+	}
+
+	public updateRowCount() {
 		this._grid.updateRowCount();
 		this._grid.render();
 		if (this._autoscroll) {
@@ -113,20 +155,22 @@ export class Table<T extends Slick.SlickData> extends Widget implements IThemabl
 		} else {
 			this._data = new TableDataView<T>(data);
 		}
-		this._onRowCountChangeListener.dispose();
 		this._grid.setData(this._data, true);
-		this._onRowCountChangeListener = this._data.onRowCountChange(() => this._handleRowCountChange());
 	}
 
 	get columns(): Slick.Column<T>[] {
 		return this._grid.getColumns();
 	}
 
-	setSelectedRows(rows: number[]) {
-		this._grid.setSelectedRows(rows);
+	public setSelectedRows(rows: number[] | boolean) {
+		if (isBoolean(rows)) {
+			this._grid.setSelectedRows(range(this._grid.getDataLength()));
+		} else {
+			this._grid.setSelectedRows(rows);
+		}
 	}
 
-	getSelectedRows(): number[] {
+	public getSelectedRows(): number[] {
 		return this._grid.getSelectedRows();
 	}
 
@@ -143,21 +187,6 @@ export class Table<T extends Slick.SlickData> extends Widget implements IThemabl
 		};
 	}
 
-	onContextMenu(fn: (e: Slick.EventData, data: Slick.OnContextMenuEventArgs<T>) => any): IDisposable;
-	onContextMenu(fn: (e: DOMEvent, data: Slick.OnContextMenuEventArgs<T>) => any): IDisposable;
-	onContextMenu(fn: any): IDisposable {
-		this._grid.onContextMenu.subscribe(fn);
-		return {
-			dispose: () => {
-				this._grid.onContextMenu.unsubscribe(fn);
-			}
-		};
-	}
-
-	getCellFromEvent(e: DOMEvent): Slick.Cell {
-		return this._grid.getCellFromEvent(e);
-	}
-
 	setSelectionModel(model: Slick.SelectionModel<T, Array<Slick.Range>>) {
 		this._grid.setSelectionModel(model);
 	}
@@ -194,7 +223,7 @@ export class Table<T extends Slick.SlickData> extends Widget implements IThemabl
 			this._tableContainer.style.width = sizing.width + 'px';
 			this._tableContainer.style.height = sizing.height + 'px';
 		} else {
-			if (orientation === Orientation.HORIZONTAL) {
+			if (orientation === Orientation.VERTICAL) {
 				this._container.style.width = '100%';
 				this._container.style.height = sizing + 'px';
 				this._tableContainer.style.width = '100%';
@@ -207,6 +236,7 @@ export class Table<T extends Slick.SlickData> extends Widget implements IThemabl
 			}
 		}
 		this.resizeCanvas();
+		this.autosizeColumns();
 	}
 
 	autosizeColumns() {

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

@@ -25,7 +25,7 @@ export class TableBasicView<T> extends View {
 		super(undefined, viewOpts);
 		this._container = document.createElement('div');
 		this._container.className = 'table-view';
-		this._table = new Table<T>(this._container, data, columns, tableOpts);
+		this._table = new Table<T>(this._container, { dataProvider: data, columns }, tableOpts);
 	}
 
 	public get table(): Table<T> {
@@ -59,7 +59,7 @@ export class TableHeaderView<T> extends HeaderView {
 		super(undefined, viewOpts);
 		this._container = document.createElement('div');
 		this._container.className = 'table-view';
-		this._table = new Table<T>(this._container, data, columns, tableOpts);
+		this._table = new Table<T>(this._container, { dataProvider: data, columns }, tableOpts);
 	}
 
 	public get table(): Table<T> {
@@ -76,7 +76,7 @@ export class TableHeaderView<T> extends HeaderView {
 	}
 
 	protected layoutBody(size: number): void {
-		this._table.layout(size, Orientation.HORIZONTAL);
+		this._table.layout(size, Orientation.VERTICAL);
 	}
 
 	focus(): void {
@@ -99,7 +99,7 @@ export class TableCollapsibleView<T> extends AbstractCollapsibleView {
 		super(undefined, viewOpts);
 		this._container = document.createElement('div');
 		this._container.className = 'table-view';
-		this._table = new Table<T>(this._container, data, columns, tableOpts);
+		this._table = new Table<T>(this._container, { dataProvider: data, columns }, tableOpts);
 	}
 
 	public render(container: HTMLElement, orientation: Orientation): void {
@@ -143,6 +143,6 @@ export class TableCollapsibleView<T> extends AbstractCollapsibleView {
 	}
 
 	protected layoutBody(size: number): void {
-		this._table.layout(size, Orientation.HORIZONTAL);
+		this._table.layout(size, Orientation.VERTICAL);
 	}
 }