--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/query-result-table.component.ts	Fri Mar 17 20:16:52 2017 +0100
@@ -0,0 +1,179 @@
+import {Component, OnInit} from '@angular/core';
+
+//import {NG_TABLE_DIRECTIVES} from 'ng2-table/ng2-table';
+//import {PAGINATION_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
+
+import {QueryState} from './query-state';
+
+@Component({
+    selector: 'query-result',
+    template: `
+    <div *ngIf="queryState?.results">
+        <span>Cypher query:</span>
+        <pre>{{queryState.getQueryText()}}</pre>
+        <h2>Query result</h2>
+        <pre>{{resultInfo}}</pre>
+        <div *ngIf="showTable"><button (click)="showTable=false">hide results</button></div>
+        <div *ngIf="!showTable"><button (click)="showTable=true">show results</button></div>
+        <div *ngIf="showTable">
+            <div>Show 
+                <select (change)="onSelectNumItems($event)">
+                    <option value="10">10</option>
+                    <option value="100">100</option>
+                    <option value="0">all</option>
+                </select>
+                results per page.
+            </div>
+            <div>
+                <form (ngSubmit)="onSelectCols($event)">
+                    Columns:
+                    <span *ngFor=" let col of allColumns">
+                        <input type="checkbox" value="{{col.name}}" [(ngModel)]="col.show">{{col.name}}
+                    </span> 
+                    <button type="submit">change columns</button>
+                </form>
+            </div>
+            <div *ngIf="config.paging">Page {{page}} of {{numPages}}</div>
+            <pagination *ngIf="config.paging"
+                        class="pagination-sm"
+                        [(ngModel)]="page"
+                        [totalItems]="length"
+                        [itemsPerPage]="itemsPerPage"
+                        [maxSize]="maxSize"
+                        [boundaryLinks]="true"
+                        [rotate]="false"
+                        (pageChanged)="onChangeTable(config, $event)"
+                        (numPages)="numPages = $event">
+            </pagination>
+            <ng-table 
+                     [config]="config.sorting"
+                     (tableChanged)="onChangeTable($event)"
+                     [rows]="rows" [columns]="columns">
+            </ng-table>
+        </div>
+    </div>
+        `,
+    inputs: ['queryState', 'resultInfo'],
+//    directives: [NG_TABLE_DIRECTIVES, PAGINATION_DIRECTIVES]
+})
+
+export class QueryResultTableComponent implements OnInit { 
+    
+    public queryState: QueryState;
+    public resultInfo: string;
+    
+    public showTable = false;
+    public data: Array<any>;
+    public columns: Array<any>;
+    public allColumns: Array<any>;
+    
+    public rows: Array<any>;
+     
+    public page: number = 1;
+    public itemsPerPage: number = 10;
+    public maxSize: number = 5;
+    public numPages: number = 1;
+    public length: number = 0;
+    
+    public config: any = {
+        paging: true,
+        sorting: {'columns': this.columns},
+        //filtering: {filterString: '', columnName: 'position'}
+    };
+    
+    ngOnChanges(changes: any) {
+        console.debug("result table changed! changes=", changes);
+        this.data = this.queryState.results;
+        this.allColumns = this.queryState.resultColumns;
+        this.columns = this.allColumns.filter(c => c.show);
+        this.config.sorting = this.columns;
+        this.config.paging = {'page': this.page, 'itemsPerPage': this.itemsPerPage};
+        this.showTable = (this.data.length < 1000);
+        this.onChangeTable(this.config);
+    }
+    
+    ngOnInit() {
+        console.debug("result table init!");
+    }
+    
+    onSelectNumItems(event: any) {
+        let selected = event.target.value;
+        console.debug("selected number of items:", selected);
+        let num = parseInt(selected);
+        if (num == 0) {
+            this.itemsPerPage = this.length;
+        } else {
+            this.itemsPerPage = num;
+        }
+        // update something
+        this.config.paging = {'page': this.page, 'itemsPerPage': this.itemsPerPage};
+        this.onChangeTable(this.config);
+    }
+    
+    onSelectCols(event: any) {
+        console.debug("select cols:", this.allColumns);
+        this.columns = this.allColumns.filter(c => c.show);        
+        this.config.sorting = this.columns;
+    }
+    
+    changePage(page:any, data:Array<any> = this.data):Array<any> {
+        let start = (page.page - 1) * page.itemsPerPage;
+        let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length;
+        return data.slice(start, end);
+      }
+
+    changeSort(data: any, config: any) {
+        if (!config.sorting) {
+            return data;
+        }
+        let columns = this.columns.filter(c => c.sort);
+        // simple sorting
+        let sorted = data.sort((previous: any, current: any) => {
+            for (let i = 0; i < columns.length; i++) {
+                let sort = columns[i].sort;
+                let columnName = columns[i].name;
+                if (previous[columnName] > current[columnName]) {
+                    return sort === 'desc' ? -1 : 1;
+                } else if (previous[columnName] < current[columnName]) {
+                    return sort === 'asc' ? -1 : 1;
+                }
+            }
+            return 0;
+        });
+        return sorted;
+    }
+
+    changeFilter(data: any, config: any): any {
+        if (!config.filtering) {
+            return data;
+        }
+
+        let filteredData: Array<any> = data.filter((item: any) =>
+            item[config.filtering.columnName].match(this.config.filtering.filterString));
+
+        return filteredData;
+    }
+
+    onChangeTable(config: any, page: any = config.paging) {
+        console.debug("onChangeTable config=", config, " page=", page);
+        if (config.filtering) {
+            Object.assign(this.config.filtering, config.filtering);
+        }
+        if (config.sorting) {
+            Object.assign(this.config.sorting, config.sorting);
+            // changing sorting resets page
+            if (page == null) {
+                this.page = 1;
+                page = {'page': this.page, 'itemsPerPage': this.itemsPerPage};
+            }
+        }
+
+        //let filteredData = this.changeFilter(this.data, this.config);
+        //let sortedData = this.changeSort(filteredData, this.config);
+        let sortedData = this.changeSort(this.data, this.config);
+
+        this.rows = (page && this.config.paging) ? this.changePage(page, sortedData) : sortedData;
+        this.length = sortedData.length;
+    }
+
+}