query results filtering and sorting (#14833)

* query results filtering and sorting (#14589)

* enable filter

* attach button style

* add hybrid data provider

* make filter and sort work

* fix editor switch issue

* configuration

* fix sort and filter

* add more specific selector

* fix hidden items issue

* update text

* revert text change

* fix copy results issue

* put feature behind preview flag

* comments

* fix tslint error

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

@@ -3,8 +3,9 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { IDisposableDataProvider } from 'sql/base/browser/ui/table/interfaces';
+import { IDisposableDataProvider } from 'sql/base/common/dataProvider';
 import { CancellationTokenSource } from 'vs/base/common/cancellation';
+import { Emitter, Event } from 'vs/base/common/event';
 
 export interface IObservableCollection<T> {
 	getLength(): number;
@@ -201,8 +202,38 @@ export class VirtualizedCollection<T extends Slick.SlickData> implements IObserv
 
 export class AsyncDataProvider<T extends Slick.SlickData> implements IDisposableDataProvider<T> {
 
+	private _onFilterStateChange = new Emitter<void>();
+	get onFilterStateChange(): Event<void> { return this._onFilterStateChange.event; }
+
+	private _onSortComplete = new Emitter<Slick.OnSortEventArgs<T>>();
+	get onSortComplete(): Event<Slick.OnSortEventArgs<T>> { return this._onSortComplete.event; }
+
 	constructor(public dataRows: IObservableCollection<T>) { }
 
+	public get isDataInMemory(): boolean {
+		return false;
+	}
+
+	getRangeAsync(startIndex: number, length: number): Promise<T[]> {
+		throw new Error('Method not implemented.');
+	}
+
+	getFilteredColumnValues(column: Slick.Column<T>): Promise<string[]> {
+		throw new Error('Method not implemented.');
+	}
+
+	getColumnValues(column: Slick.Column<T>): Promise<string[]> {
+		throw new Error('Method not implemented.');
+	}
+
+	sort(options: Slick.OnSortEventArgs<T>): Promise<void> {
+		throw new Error('Method not implemented.');
+	}
+
+	filter(columns?: Slick.Column<T>[]): Promise<void> {
+		throw new Error('Method not implemented.');
+	}
+
 	public getLength(): number {
 		return this.dataRows.getLength();
 	}

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

@@ -0,0 +1,139 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { AsyncDataProvider, IObservableCollection } from 'sql/base/browser/ui/table/asyncDataView';
+import { FilterableColumn } from 'sql/base/browser/ui/table/interfaces';
+import { CellValueGetter, TableDataView, TableFilterFunc, TableSortFunc } from 'sql/base/browser/ui/table/tableDataView';
+import { IDisposableDataProvider } from 'sql/base/common/dataProvider';
+import { Event, Emitter } from 'vs/base/common/event';
+import { DisposableStore } from 'vs/base/common/lifecycle';
+
+export interface HybridDataProviderOptions {
+	inMemoryDataProcessing: boolean;
+	inMemoryDataCountThreshold?: number;
+}
+
+/**
+ * Used to abstract the underlying data provider, based on the options, if we are allowing in-memory data processing and the threshold is not reached the
+ * a TableDataView will be used to provide in memory data source, otherwise it will be using the async data provider.
+ */
+export class HybridDataProvider<T extends Slick.SlickData> implements IDisposableDataProvider<T> {
+	private _asyncDataProvider: AsyncDataProvider<T>;
+	private _tableDataProvider: TableDataView<T>;
+	private _dataCached: boolean = false;
+	private _disposableStore = new DisposableStore();
+
+	private _onFilterStateChange = new Emitter<void>();
+	get onFilterStateChange(): Event<void> { return this._onFilterStateChange.event; }
+
+	private _onSortComplete = new Emitter<Slick.OnSortEventArgs<T>>();
+	get onSortComplete(): Event<Slick.OnSortEventArgs<T>> { return this._onSortComplete.event; }
+
+	constructor(dataRows: IObservableCollection<T>,
+		private _loadDataFn: (offset: number, count: number) => Thenable<T[]>,
+		filterFn: TableFilterFunc<T>,
+		sortFn: TableSortFunc<T>,
+		valueGetter: CellValueGetter,
+		private readonly _options: HybridDataProviderOptions) {
+		this._asyncDataProvider = new AsyncDataProvider<T>(dataRows);
+		this._tableDataProvider = new TableDataView<T>(undefined, undefined, sortFn, filterFn, valueGetter);
+		this._disposableStore.add(this._asyncDataProvider.onFilterStateChange(() => {
+			this._onFilterStateChange.fire();
+		}));
+		this._disposableStore.add(this._asyncDataProvider.onSortComplete((args) => {
+			this._onSortComplete.fire(args);
+		}));
+		this._disposableStore.add(this._tableDataProvider.onFilterStateChange(() => {
+			this._onFilterStateChange.fire();
+		}));
+		this._disposableStore.add(this._tableDataProvider.onSortComplete((args) => {
+			this._onSortComplete.fire(args);
+		}));
+		this._disposableStore.add(this._asyncDataProvider);
+		this._disposableStore.add(this._tableDataProvider);
+	}
+
+	public get isDataInMemory(): boolean {
+		return this._dataCached;
+	}
+
+	async getRangeAsync(startIndex: number, length: number): Promise<T[]> {
+		return this.provider.getRangeAsync(startIndex, length);
+	}
+
+	public async getColumnValues(column: Slick.Column<T>): Promise<string[]> {
+		await this.initializeCacheIfNeeded();
+		return this.provider.getColumnValues(column);
+	}
+
+	public async getFilteredColumnValues(column: Slick.Column<T>): Promise<string[]> {
+		await this.initializeCacheIfNeeded();
+		return this.provider.getFilteredColumnValues(column);
+	}
+
+	public get dataRows(): IObservableCollection<T> {
+		return this._asyncDataProvider.dataRows;
+	}
+
+	public set dataRows(value: IObservableCollection<T>) {
+		this._asyncDataProvider.dataRows = value;
+	}
+
+	public dispose(): void {
+		this._disposableStore.dispose();
+	}
+
+	public getLength(): number {
+		return this.provider.getLength();
+	}
+
+	public getItem(index: number): T {
+		return this.provider.getItem(index);
+	}
+
+	public getItems(): T[] {
+		throw new Error('Method not implemented.');
+	}
+
+	public get length(): number {
+		return this.provider.getLength();
+	}
+
+	public set length(value: number) {
+		this._asyncDataProvider.length = value;
+	}
+
+	public async filter(columns: FilterableColumn<T>[]) {
+		await this.initializeCacheIfNeeded();
+		this.provider.filter(columns);
+	}
+
+	public async sort(options: Slick.OnSortEventArgs<T>) {
+		await this.initializeCacheIfNeeded();
+		this.provider.sort(options);
+	}
+
+	private get thresholdReached(): boolean {
+		return this._options.inMemoryDataCountThreshold !== undefined && this.length > this._options.inMemoryDataCountThreshold;
+	}
+
+	private get provider(): IDisposableDataProvider<T> {
+		return this._dataCached ? this._tableDataProvider : this._asyncDataProvider;
+	}
+
+	private async initializeCacheIfNeeded() {
+		if (!this._options.inMemoryDataProcessing) {
+			return;
+		}
+		if (this.thresholdReached) {
+			return;
+		}
+		if (!this._dataCached) {
+			const data = await this._loadDataFn(0, this.length);
+			this._dataCached = true;
+			this._tableDataProvider.push(data);
+		}
+	}
+}

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

@@ -3,13 +3,10 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import { IDisposableDataProvider } from 'sql/base/common/dataProvider';
 import { IListStyles } from 'vs/base/browser/ui/list/listWidget';
 import { Color } from 'vs/base/common/color';
 
-export interface IDisposableDataProvider<T> extends Slick.DataProvider<T> {
-	dispose(): void;
-}
-
 export interface ITableMouseEvent {
 	anchor: HTMLElement | { x: number, y: number };
 	cell?: { row: number, cell: number };
@@ -32,4 +29,5 @@ export interface ITableConfiguration<T> {
 
 export interface FilterableColumn<T> extends Slick.Column<T> {
 	filterable?: boolean;
+	filterValues?: Array<string>;
 }

src/sql/base/browser/ui/table/media/table.css

@@ -18,15 +18,15 @@
 	height: 100%;
 }
 
-.slick-sort-indicator-asc {
+.monaco-table .slick-sort-indicator-asc {
 	background: url('sort-asc.gif');
 }
 
-.slick-sort-indicator-desc {
+.monaco-table .slick-sort-indicator-desc {
 	background: url('sort-desc.gif');
 }
 
-.slick-sort-indicator {
+.monaco-table .slick-sort-indicator {
 	display: inline-block;
 	width: 8px;
 	height: 5px;
@@ -98,7 +98,6 @@
 	padding: 4px;
 	white-space: nowrap;
 	width: 200px;
-	display: grid;
 	align-content: flex-start;
 }
 

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

@@ -10,28 +10,20 @@ import { escape } from 'sql/base/common/strings';
 import { addDisposableListener } from 'vs/base/browser/dom';
 import { DisposableStore } from 'vs/base/common/lifecycle';
 import { withNullAsUndefined } from 'vs/base/common/types';
+import { IDisposableDataProvider } from 'sql/base/common/dataProvider';
 
-export interface IExtendedColumn<T> extends Slick.Column<T> {
-	filterValues?: Array<string>;
-}
-
+export type HeaderFilterCommands = 'sort-asc' | 'sort-desc';
 export interface CommandEventArgs<T extends Slick.SlickData> {
 	grid: Slick.Grid<T>,
 	column: Slick.Column<T>,
-	command: string
-}
-
-export type CellValueGetter = (data: any) => string;
-
-function GetCellValue(data: any): string {
-	return data?.toString();
+	command: HeaderFilterCommands
 }
 
 const ShowFilterText: string = localize('headerFilter.showFilter', "Show Filter");
 
 export class HeaderFilter<T extends Slick.SlickData> {
 
-	public onFilterApplied = new Slick.Event<{ grid: Slick.Grid<T>, column: IExtendedColumn<T> }>();
+	public onFilterApplied = new Slick.Event<{ grid: Slick.Grid<T>, column: FilterableColumn<T> }>();
 	public onCommand = new Slick.Event<CommandEventArgs<T>>();
 
 	private grid!: Slick.Grid<T>;
@@ -42,12 +34,12 @@ export class HeaderFilter<T extends Slick.SlickData> {
 	private clearButton?: Button;
 	private cancelButton?: Button;
 	private workingFilters!: Array<string>;
-	private columnDef!: IExtendedColumn<T>;
+	private columnDef!: FilterableColumn<T>;
 	private buttonStyles?: IButtonStyles;
-
 	private disposableStore = new DisposableStore();
+	public enabled: boolean = true;
 
-	constructor(private cellValueExtrator: CellValueGetter = GetCellValue) {
+	constructor() {
 	}
 
 	public init(grid: Slick.Grid<T>): void {
@@ -92,7 +84,10 @@ export class HeaderFilter<T extends Slick.SlickData> {
 	}
 
 	private handleHeaderCellRendered(e: Event, args: Slick.OnHeaderCellRenderedEventArgs<T>) {
-		const column = args.column;
+		if (!this.enabled) {
+			return;
+		}
+		const column = args.column as FilterableColumn<T>;
 		if (column.id === '_detail_selector') {
 			return;
 		}
@@ -107,11 +102,12 @@ export class HeaderFilter<T extends Slick.SlickData> {
 		const $el = jQuery(`<button aria-label="${ShowFilterText}" title="${ShowFilterText}"></button>`)
 			.addClass('slick-header-menubutton')
 			.data('column', column);
+		this.setButtonImage($el, column.filterValues?.length > 0);
 
-		$el.click((e: JQuery.Event) => {
+		$el.click(async (e: JQuery.Event) => {
 			e.stopPropagation();
 			e.preventDefault();
-			this.showFilter($el[0]);
+			await this.showFilter($el[0]);
 		});
 		$el.appendTo(args.node);
 	}
@@ -122,11 +118,11 @@ export class HeaderFilter<T extends Slick.SlickData> {
 			.remove();
 	}
 
-	private addMenuItem(menu: JQuery<HTMLElement>, columnDef: Slick.Column<T>, title: string, command: string) {
+	private addMenuItem(menu: JQuery<HTMLElement>, columnDef: Slick.Column<T>, title: string, command: HeaderFilterCommands) {
 		const $item = jQuery('<div class="slick-header-menuitem">')
 			.data('command', command)
 			.data('column', columnDef)
-			.bind('click', (e) => this.handleMenuItemClick(e, command, columnDef))
+			.bind('click', async (e) => await this.handleMenuItemClick(e, command, columnDef))
 			.appendTo(menu);
 
 		const $icon = jQuery('<div class="slick-header-menuicon">')
@@ -154,7 +150,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
 			.appendTo(menu);
 	}
 
-	private updateFilterInputs(menu: JQuery<HTMLElement>, columnDef: IExtendedColumn<T>, filterItems: Array<string>) {
+	private updateFilterInputs(menu: JQuery<HTMLElement>, columnDef: FilterableColumn<T>, filterItems: Array<string>) {
 		let filterOptions = '<label><input type="checkbox" value="-1" />(Select All)</label>';
 		columnDef.filterValues = columnDef.filterValues || [];
 
@@ -176,7 +172,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
 		});
 	}
 
-	private showFilter(element: HTMLElement) {
+	private async showFilter(element: HTMLElement) {
 		const target = withNullAsUndefined(element);
 		const $menuButton = jQuery(target);
 		this.columnDef = $menuButton.data('column');
@@ -188,13 +184,23 @@ export class HeaderFilter<T extends Slick.SlickData> {
 
 		let filterItems: Array<string>;
 
-		if (this.workingFilters.length === 0) {
-			// Filter based all available values
-			filterItems = this.getFilterValues(this.grid.getData() as Slick.DataProvider<T>, this.columnDef);
-		}
-		else {
-			// Filter based on current dataView subset
-			filterItems = this.getAllFilterValues((this.grid.getData() as Slick.DataProvider<T>).getItems(), this.columnDef);
+		const provider = this.grid.getData() as IDisposableDataProvider<T>;
+
+		if (provider.getColumnValues) {
+			if (this.workingFilters.length === 0) {
+				filterItems = await provider.getColumnValues(this.columnDef);
+			} else {
+				filterItems = await provider.getFilteredColumnValues(this.columnDef);
+			}
+		} else {
+			if (this.workingFilters.length === 0) {
+				// Filter based all available values
+				filterItems = this.getFilterValues(this.grid.getData() as Slick.DataProvider<T>, this.columnDef);
+			}
+			else {
+				// Filter based on current dataView subset
+				filterItems = this.getAllFilterValues((this.grid.getData() as Slick.DataProvider<T>).getItems(), this.columnDef);
+			}
 		}
 
 		if (!this.$menu) {
@@ -203,8 +209,8 @@ export class HeaderFilter<T extends Slick.SlickData> {
 
 		this.$menu.empty();
 
-		this.addMenuItem(this.$menu, this.columnDef, 'Sort Ascending', 'sort-asc');
-		this.addMenuItem(this.$menu, this.columnDef, 'Sort Descending', 'sort-desc');
+		this.addMenuItem(this.$menu, this.columnDef, localize('table.sortAscending', "Sort Ascending"), 'sort-asc');
+		this.addMenuItem(this.$menu, this.columnDef, localize('table.sortDescending', "Sort Descending"), 'sort-desc');
 		this.addMenuInput(this.$menu, this.columnDef);
 
 		let filterOptions = '<label><input type="checkbox" value="-1" />(Select All)</label>';
@@ -345,7 +351,14 @@ export class HeaderFilter<T extends Slick.SlickData> {
 
 	private handleApply(e: JQuery.Event<HTMLElement, null>, columnDef: Slick.Column<T>) {
 		this.hideMenu();
+		const provider = this.grid.getData() as IDisposableDataProvider<T>;
 
+		if (provider.filter) {
+			provider.filter(this.grid.getColumns());
+			this.grid.invalidateAllRows();
+			this.grid.updateRowCount();
+			this.grid.render();
+		}
 		this.onFilterApplied.notify({ grid: this.grid, column: columnDef }, e, self);
 		e.preventDefault();
 		e.stopPropagation();
@@ -356,7 +369,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
 		dataView.getItems().forEach(items => {
 			const value = items[column.field!];
 			const valueArr = value instanceof Array ? value : [value];
-			valueArr.forEach(v => seen.add(this.cellValueExtrator(v)));
+			valueArr.forEach(v => seen.add(v));
 		});
 
 		return Array.from(seen);
@@ -398,9 +411,21 @@ export class HeaderFilter<T extends Slick.SlickData> {
 		return Array.from(seen).sort((v) => { return v; });
 	}
 
-	private handleMenuItemClick(e: JQuery.Event<HTMLElement, null>, command: string, columnDef: Slick.Column<T>) {
+	private async handleMenuItemClick(e: JQuery.Event<HTMLElement, null>, command: HeaderFilterCommands, columnDef: Slick.Column<T>) {
 		this.hideMenu();
+		const provider = this.grid.getData() as IDisposableDataProvider<T>;
 
+		if (provider.sort && (command === 'sort-asc' || command === 'sort-desc')) {
+			await provider.sort({
+				grid: this.grid,
+				multiColumnSort: false,
+				sortCol: this.columnDef,
+				sortAsc: command === 'sort-asc'
+			});
+			this.grid.invalidateAllRows();
+			this.grid.updateRowCount();
+			this.grid.render();
+		}
 		this.onCommand.notify({
 			grid: this.grid,
 			column: columnDef,

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

@@ -3,6 +3,8 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import { FilterableColumn } from 'sql/base/browser/ui/table/interfaces';
+
 export interface IRowNumberColumnOptions {
 	numberOfRows: number;
 	cssClass?: string;
@@ -45,7 +47,7 @@ export class RowNumberColumn<T> implements Slick.Plugin<T> {
 		}
 	}
 
-	public getColumnDefinition(): Slick.Column<T> {
+	public getColumnDefinition(): FilterableColumn<T> {
 		// that smallest we can make it is 22 due to padding and margins in the cells
 		return {
 			id: 'rowNumber',
@@ -56,6 +58,7 @@ export class RowNumberColumn<T> implements Slick.Plugin<T> {
 			cssClass: this.options.cssClass,
 			focusable: false,
 			selectable: false,
+			filterable: false,
 			formatter: r => this.formatter(r)
 		};
 	}

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

@@ -8,7 +8,7 @@ import 'vs/css!./media/slick.grid';
 import 'vs/css!./media/slickColorTheme';
 
 import { TableDataView } from './tableDataView';
-import { IDisposableDataProvider, ITableSorter, ITableMouseEvent, ITableConfiguration, ITableStyles } from 'sql/base/browser/ui/table/interfaces';
+import { ITableSorter, ITableMouseEvent, ITableConfiguration, ITableStyles } from 'sql/base/browser/ui/table/interfaces';
 
 import * as DOM from 'vs/base/browser/dom';
 import { mixin } from 'vs/base/common/objects';
@@ -19,6 +19,7 @@ import { isArray, isBoolean } from 'vs/base/common/types';
 import { Event, Emitter } from 'vs/base/common/event';
 import { range } from 'vs/base/common/arrays';
 import { AsyncDataProvider } from 'sql/base/browser/ui/table/asyncDataView';
+import { IDisposableDataProvider } from 'sql/base/common/dataProvider';
 
 function getDefaultOptions<T>(): Slick.GridOptions<T> {
 	return <Slick.GridOptions<T>>{
@@ -122,7 +123,7 @@ export class Table<T extends Slick.SlickData> extends Widget implements IDisposa
 		this._grid.onColumnsResized.subscribe(() => this._onColumnResize.fire());
 	}
 
-	public rerenderGrid(start: number, end: number) {
+	public rerenderGrid() {
 		this._grid.updateRowCount();
 		this._grid.setColumns(this._grid.getColumns());
 		this._grid.invalidateAllRows();

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

@@ -7,40 +7,58 @@ import { Event, Emitter } from 'vs/base/common/event';
 import * as types from 'vs/base/common/types';
 import { compare as stringCompare } from 'vs/base/common/strings';
 
-import { IDisposableDataProvider } from 'sql/base/browser/ui/table/interfaces';
+import { FilterableColumn } from 'sql/base/browser/ui/table/interfaces';
+import { IDisposableDataProvider } from 'sql/base/common/dataProvider';
 
 export interface IFindPosition {
 	col: number;
 	row: number;
 }
 
-function defaultSort<T extends { [key: string]: any }>(args: Slick.OnSortEventArgs<T>, data: Array<T>): Array<T> {
+export type CellValueGetter = (data: any) => any;
+export type TableFilterFunc<T extends Slick.SlickData> = (data: Array<T>, columns: Slick.Column<T>[]) => Array<T>;
+export type TableSortFunc<T extends Slick.SlickData> = (args: Slick.OnSortEventArgs<T>, data: Array<T>) => Array<T>;
+export type TableFindFunc<T extends Slick.SlickData> = (val: T, exp: string) => Array<number>;
+
+function defaultCellValueGetter(data: any): any {
+	return data;
+}
+
+function defaultSort<T extends Slick.SlickData>(args: Slick.OnSortEventArgs<T>, data: Array<T>, cellValueGetter: CellValueGetter = defaultCellValueGetter): Array<T> {
 	if (!args.sortCol || !args.sortCol.field || data.length === 0) {
 		return data;
 	}
 	const field = args.sortCol.field;
 	const sign = args.sortAsc ? 1 : -1;
+	let sampleData = data[0][field];
+	sampleData = types.isObject(sampleData) ? cellValueGetter(sampleData) : sampleData;
 	let comparer: (a: T, b: T) => number;
-	if (types.isString(data[0][field])) {
-		if (!isNaN(Number(data[0][field]))) {
-			comparer = (a: T, b: T) => {
-				let anum = Number(a[field]);
-				let bnum = Number(b[field]);
-				return anum === bnum ? 0 : anum > bnum ? 1 : -1;
-			};
-		} else {
-			comparer = (a: T, b: T) => {
-				return stringCompare(a[field], b[field]);
-			};
-		}
+	if (!isNaN(Number(sampleData))) {
+		comparer = (a: T, b: T) => {
+			let anum = Number(cellValueGetter(a[field]));
+			let bnum = Number(cellValueGetter(b[field]));
+			return anum === bnum ? 0 : anum > bnum ? 1 : -1;
+		};
 	} else {
 		comparer = (a: T, b: T) => {
-			return a[field] === b[field] ? 0 : (a[field] > b[field] ? 1 : -1);
+			return stringCompare(cellValueGetter(a[field]), cellValueGetter(b[field]));
 		};
 	}
 	return data.sort((a, b) => comparer(a, b) * sign);
 }
 
+function defaultFilter<T extends Slick.SlickData>(data: T[], columns: FilterableColumn<T>[], cellValueGetter: CellValueGetter = defaultCellValueGetter): T[] {
+	let filteredData = data;
+	columns?.forEach(column => {
+		if (column.filterValues?.length > 0 && column.field) {
+			filteredData = filteredData.filter((item) => {
+				return column.filterValues.includes(cellValueGetter(item[column.field!]));
+			});
+		}
+	});
+	return filteredData;
+}
+
 export class TableDataView<T extends Slick.SlickData> implements IDisposableDataProvider<T> {
 	//The data exposed publicly, when filter is enabled, _data holds the filtered data.
 	private _data: Array<T>;
@@ -49,6 +67,7 @@ export class TableDataView<T extends Slick.SlickData> implements IDisposableData
 	private _findArray?: Array<IFindPosition>;
 	private _findIndex?: number;
 	private _filterEnabled: boolean;
+	private _currentColumnFilters: FilterableColumn<T>[];
 
 	private _onRowCountChange = new Emitter<number>();
 	get onRowCountChange(): Event<number> { return this._onRowCountChange.event; }
@@ -59,14 +78,15 @@ export class TableDataView<T extends Slick.SlickData> implements IDisposableData
 	private _onFilterStateChange = new Emitter<void>();
 	get onFilterStateChange(): Event<void> { return this._onFilterStateChange.event; }
 
-	private _filterFn: (data: Array<T>) => Array<T>;
-	private _sortFn: (args: Slick.OnSortEventArgs<T>, data: Array<T>) => Array<T>;
+	private _onSortComplete = new Emitter<Slick.OnSortEventArgs<T>>();
+	get onSortComplete(): Event<Slick.OnSortEventArgs<T>> { return this._onSortComplete.event; }
 
 	constructor(
 		data?: Array<T>,
-		private _findFn?: (val: T, exp: string) => Array<number>,
-		_sortFn?: (args: Slick.OnSortEventArgs<T>, data: Array<T>) => Array<T>,
-		_filterFn?: (data: Array<T>) => Array<T>
+		private _findFn?: TableFindFunc<T>,
+		private _sortFn?: TableSortFunc<T>,
+		private _filterFn?: TableFilterFunc<T>,
+		private _cellValueGetter: CellValueGetter = defaultCellValueGetter
 	) {
 		if (data) {
 			this._data = data;
@@ -75,25 +95,59 @@ export class TableDataView<T extends Slick.SlickData> implements IDisposableData
 		}
 
 		// @todo @anthonydresser 5/1/19 theres a lot we could do by just accepting a regex as a exp rather than accepting a full find function
-		this._sortFn = _sortFn ? _sortFn : defaultSort;
-
-		this._filterFn = _filterFn ? _filterFn : (dataToFilter) => dataToFilter;
+		this._sortFn = _sortFn ? _sortFn : (args, data) => {
+			return defaultSort(args, data, _cellValueGetter);
+		};
+		this._filterFn = _filterFn ? _filterFn : (data, columns) => {
+			return defaultFilter(data, columns, _cellValueGetter);
+		};
 		this._filterEnabled = false;
+		this._cellValueGetter = this._cellValueGetter ? this._cellValueGetter : (cellValue) => cellValue?.toString();
+	}
+
+	public get isDataInMemory(): boolean {
+		return true;
+	}
+
+	async getRangeAsync(startIndex: number, length: number): Promise<T[]> {
+		return this._data.slice(startIndex, startIndex + length);
+	}
+
+	public async getFilteredColumnValues(column: Slick.Column<T>): Promise<string[]> {
+		return this.getDistinctColumnValues(this._data, column);
+	}
+
+	public async getColumnValues(column: Slick.Column<T>): Promise<string[]> {
+		return this.getDistinctColumnValues(this.filterEnabled ? this._allData : this._data, column);
+	}
+
+	private getDistinctColumnValues(source: T[], column: Slick.Column<T>): string[] {
+		const distinctValues: Set<string> = new Set();
+		source.forEach(items => {
+			const value = items[column.field!];
+			const valueArr = value instanceof Array ? value : [value];
+			valueArr.forEach(v => distinctValues.add(this._cellValueGetter(v)));
+		});
+
+		return Array.from(distinctValues);
 	}
 
 	public get filterEnabled(): boolean {
 		return this._filterEnabled;
 	}
 
-	public filter() {
+	public async filter(columns?: Slick.Column<T>[]) {
 		if (!this.filterEnabled) {
 			this._allData = new Array(...this._data);
-			this._data = this._filterFn(this._allData);
 			this._filterEnabled = true;
 		}
-
-		this._data = this._filterFn(this._allData);
-		this._onFilterStateChange.fire();
+		this._currentColumnFilters = columns;
+		this._data = this._filterFn(this._allData, columns);
+		if (this._data.length === this._allData.length) {
+			this.clearFilter();
+		} else {
+			this._onFilterStateChange.fire();
+		}
 	}
 
 	public clearFilter() {
@@ -105,8 +159,9 @@ export class TableDataView<T extends Slick.SlickData> implements IDisposableData
 		}
 	}
 
-	sort(args: Slick.OnSortEventArgs<T>) {
+	async sort(args: Slick.OnSortEventArgs<T>): Promise<void> {
 		this._data = this._sortFn(args, this._data);
+		this._onSortComplete.fire(args);
 	}
 
 	getLength(): number {
@@ -137,7 +192,7 @@ export class TableDataView<T extends Slick.SlickData> implements IDisposableData
 
 		if (this._filterEnabled) {
 			this._allData.push(...inputArray);
-			let filteredArray = this._filterFn(inputArray);
+			let filteredArray = this._filterFn(inputArray, this._currentColumnFilters);
 			if (filteredArray.length !== 0) {
 				this._data.push(...filteredArray);
 			}