--- a/app/query-result-table.component.ts	Tue Jan 26 16:54:38 2016 +0100
+++ b/app/query-result-table.component.ts	Tue Jan 26 19:19:23 2016 +0100
@@ -1,6 +1,7 @@
 import {Component, OnInit} from 'angular2/core';
 
 import {NG_TABLE_DIRECTIVES} from 'ng2-table/ng2-table';
+import {PAGINATION_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
 
 import {QueryState} from './query-state';
 
@@ -9,23 +10,52 @@
     template: `
     <div *ngIf="queryState && queryState.results">
         <pre>{{queryState.resultCypherQuery}}</pre>
-        <p>Query results ({{queryState.resultInfo}}):</p>
-        <ngTable 
-           (tableChanged)="onChangeTable(config)"
-           [rows]="queryState.results" [columns]="queryState.resultColumns">
+        <h2>Query result</h2>
+        <pre *ngIf="config.paging">{{queryState.resultInfo}}: page {{page}} of {{numPages}}</pre>
+        <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>
+        <ngTable [config]="config.sorting"
+                 (tableChanged)="onChangeTable(config)"
+                 [rows]="rows" [columns]="columns">
         </ngTable>
     </div>
         `,
-    inputs: ['queryState'],
-    directives: [NG_TABLE_DIRECTIVES]
+    inputs: ['queryState', 'data', 'columns'],
+    directives: [NG_TABLE_DIRECTIVES, PAGINATION_DIRECTIVES]
 })
    
 export class QueryResultTableComponent implements OnInit { 
     
     public queryState: QueryState;
+    public data: Array<any>;
+    public columns: 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() {
         console.debug("result table changed! queryState=", this.queryState?this.queryState.resultColumns:'');
+        this.config.sorting = this.queryState.resultColumns;
     }
     
     ngOnInit() {
@@ -36,4 +66,61 @@
         console.debug("result table init!");
     }
     
+    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
+        return data.sort((previous: any, current: any) => {
+            //let columns = this.config.sorting.columns || [];
+            for (let i = 0; i < columns.length; i++) {
+                let sort = columns[i].sort;
+                if (!sort) continue;
+                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;
+        });
+    }
+
+    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, page: any = config.paging) {
+        //console.debug("onChangeTable config=", config);
+        if (config.filtering) {
+            Object.assign(this.config.filtering, config.filtering);
+        }
+        if (config.sorting) {
+            Object.assign(this.config.sorting, config.sorting);
+        }
+
+        let filteredData = this.changeFilter(this.data, this.config);
+        let sortedData = this.changeSort(filteredData, this.config);
+
+        this.rows = (page && config.paging) ? this.changePage(page, sortedData) : sortedData;
+        this.length = sortedData.length;
+    }
+
 }