Auto Column Sizing (#2778)

* add auto column sizing

* add break for performance

* update with new library

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

@@ -1,13 +1,16 @@
 // Adapted from https://github.com/naresh-n/slickgrid-column-data-autosize/blob/master/src/slick.autocolumnsize.js
 
 import { mixin, clone } from 'sql/base/common/objects';
+import { isInDOM } from 'vs/base/browser/dom';
 
 export interface IAutoColumnSizeOptions extends Slick.PluginOptions {
 	maxWidth?: number;
+	autoSizeOnRender?: boolean;
 }
 
 const defaultOptions: IAutoColumnSizeOptions = {
-	maxWidth: 200
+	maxWidth: 200,
+	autoSizeOnRender: false
 };
 
 export class AutoColumnSize<T> implements Slick.Plugin<T> {
@@ -15,6 +18,7 @@ export class AutoColumnSize<T> implements Slick.Plugin<T> {
 	private _$container: JQuery;
 	private _context: CanvasRenderingContext2D;
 	private _options: IAutoColumnSizeOptions;
+	private onPostEventHandler = new Slick.EventHandler();
 
 	constructor(options: IAutoColumnSizeOptions = defaultOptions) {
 		this._options = mixin(options, defaultOptions, false);
@@ -23,8 +27,12 @@ export class AutoColumnSize<T> implements Slick.Plugin<T> {
 	public init(grid: Slick.Grid<T>) {
 		this._grid = grid;
 
+		if (this._options.autoSizeOnRender) {
+			this.onPostEventHandler.subscribe(this._grid.onRendered, () => this.onPostRender());
+		}
+
 		this._$container = $(this._grid.getContainerNode());
-		this._$container.on('dblclick.autosize', '.slick-resizable-handle', e => this.reSizeColumn(e));
+		this._$container.on('dblclick.autosize', '.slick-resizable-handle', e => this.handleDoubleClick(e));
 		this._context = document.createElement('canvas').getContext('2d');
 	}
 
@@ -32,7 +40,66 @@ export class AutoColumnSize<T> implements Slick.Plugin<T> {
 		this._$container.off();
 	}
 
-	private reSizeColumn(e: JQuery.Event<HTMLElement, string>) {
+	private onPostRender() {
+		// this doesn't do anything if the grid isn't on the dom
+		if (!isInDOM(this._grid.getContainerNode())) {
+			return;
+		}
+
+		// since data can be async we want to only do this if we have the data to actual
+		// work on since we are measuring the physical length of data
+		let data = this._grid.getData();
+		let item = data.getItem(0);
+		if (item && Object.keys(item).length > 0) {
+			let hasValue = false;
+			for (let key in item) {
+				if (item.hasOwnProperty(key)) {
+					if (item[key]) {
+						hasValue = true;
+						break;
+					}
+				}
+			}
+			if (!hasValue) {
+				return;
+			}
+		} else {
+			return;
+		}
+
+		let headerColumnsQuery = $(this._grid.getContainerNode()).find('.slick-header-columns');
+		if (headerColumnsQuery && headerColumnsQuery.length) {
+			let headerColumns = headerColumnsQuery[0];
+			let origCols = this._grid.getColumns();
+			let allColumns = clone(origCols);
+			allColumns.forEach((col, index) => {
+				col.formatter = origCols[index].formatter;
+				col.asyncPostRender = origCols[index].asyncPostRender;
+			});
+			let change = false;
+			for (let i = 0; i <= headerColumns.children.length; i++) {
+				let headerEl = $(headerColumns.children.item(i));
+				let columnDef = headerEl.data('column');
+				if (columnDef) {
+					let headerWidth = this.getElementWidth(headerEl[0]);
+					let colIndex = this._grid.getColumnIndex(columnDef.id);
+					let column = allColumns[colIndex];
+					let autoSizeWidth = Math.max(headerWidth, this.getMaxColumnTextWidth(columnDef, colIndex)) + 1;
+					if (autoSizeWidth !== column.width) {
+						allColumns[colIndex].width = autoSizeWidth;
+						change = true;
+					}
+				}
+			}
+			if (change) {
+				this.onPostEventHandler.unsubscribeAll();
+				this._grid.setColumns(allColumns);
+				this._grid.onColumnsResized.notify();
+			}
+		}
+	}
+
+	private handleDoubleClick(e: JQuery.Event<HTMLElement, string>) {
 		let headerEl = $(e.currentTarget).closest('.slick-header-column');
 		let columnDef = headerEl.data('column');
 
@@ -43,6 +110,10 @@ export class AutoColumnSize<T> implements Slick.Plugin<T> {
 		e.preventDefault();
 		e.stopPropagation();
 
+		this.reSizeColumn(headerEl, columnDef);
+	}
+
+	private reSizeColumn(headerEl: JQuery, columnDef: Slick.Column<T>) {
 		let headerWidth = this.getElementWidth(headerEl[0]);
 		let colIndex = this._grid.getColumnIndex(columnDef.id);
 		let origCols = this._grid.getColumns();