diff --git a/src/body-renderer.js b/src/body-renderer.js
index 17e8435..f4b70a2 100644
--- a/src/body-renderer.js
+++ b/src/body-renderer.js
@@ -25,7 +25,7 @@ export default class BodyRenderer {
     }
 
     renderBodyHTML() {
-        const rows = this.datamanager.getRows();
+        const rows = this.datamanager.getRowsForView();
 
         this.bodyScrollable.innerHTML = `
             <table class="data-table-body">
@@ -38,7 +38,7 @@ export default class BodyRenderer {
 
     renderBodyWithClusterize() {
         // first page
-        const rows = this.datamanager.getRows(0, 20);
+        const rows = this.datamanager.getRowsForView(0, 20);
         const initialData = this.getDataForClusterize(rows);
 
         if (!this.clusterize) {
@@ -82,7 +82,7 @@ export default class BodyRenderer {
     }
 
     appendRemainingData() {
-        const rows = this.datamanager.getRows(20);
+        const rows = this.datamanager.getRowsForView(20);
         const data = this.getDataForClusterize(rows);
         this.clusterize.append(data);
     }
diff --git a/src/datamanager.js b/src/datamanager.js
index 0fff5be..5af6209 100644
--- a/src/datamanager.js
+++ b/src/datamanager.js
@@ -25,6 +25,7 @@ export default class DataManager {
 
         this.prepareColumns();
         this.prepareRows();
+        this.prepareRowView();
 
         this.prepareNumericColumns();
     }
@@ -142,6 +143,9 @@ export default class DataManager {
             const index = this._getNextRowCount();
 
             let row = [];
+            let meta = {
+                rowIndex: index
+            };
 
             if (Array.isArray(d)) {
                 // row is an array
@@ -168,17 +172,25 @@ export default class DataManager {
                         row.push(d[col.id]);
                     }
                 }
+
+                meta.indent = d.indent;
             }
 
-            return this.prepareRow(row, {
-                rowIndex: index
-            });
+            return this.prepareRow(row, meta);
         });
     }
 
-    prepareRow(row, props) {
+    prepareRowView() {
+        // This is order in which rows will be rendered in the table.
+        // When sorting happens, only this.rowViewOrder will change
+        // and not the original this.rows
+        this.rowViewOrder = this.rows.map(row => row.meta.rowIndex);
+    }
+
+    prepareRow(row, meta) {
         const baseRowCell = {
-            rowIndex: props.rowIndex
+            rowIndex: meta.rowIndex,
+            indent: meta.indent
         };
 
         row = row
@@ -186,7 +198,7 @@ export default class DataManager {
             .map(cell => Object.assign({}, baseRowCell, cell));
 
         // monkey patched in array object
-        row.meta = props;
+        row.meta = meta;
         return row;
     }
 
@@ -241,28 +253,28 @@ export default class DataManager {
                 (this.currentSort.sortOrder === 'asc' && sortOrder === 'desc') ||
                 (this.currentSort.sortOrder === 'desc' && sortOrder === 'asc')
             ) {
-                this.reverseArray(this.rows);
+                this.reverseArray(this.rowViewOrder);
                 this.currentSort.sortOrder = sortOrder;
                 return;
             }
         }
 
-        this.rows.sort((a, b) => {
-            const _aIndex = a[0].rowIndex;
-            const _bIndex = b[0].rowIndex;
-            const _a = a[colIndex].content;
-            const _b = b[colIndex].content;
+        this.rowViewOrder.sort((a, b) => {
+            const aIndex = a;
+            const bIndex = b;
+            const aContent = this.getCell(colIndex, a).content;
+            const bContent = this.getCell(colIndex, b).content;
 
             if (sortOrder === 'none') {
-                return _aIndex - _bIndex;
+                return aIndex - bIndex;
             } else if (sortOrder === 'asc') {
-                if (_a < _b) return -1;
-                if (_a > _b) return 1;
-                if (_a === _b) return 0;
+                if (aContent < bContent) return -1;
+                if (aContent > bContent) return 1;
+                if (aContent === bContent) return 0;
             } else if (sortOrder === 'desc') {
-                if (_a < _b) return 1;
-                if (_a > _b) return -1;
-                if (_a === _b) return 0;
+                if (aContent < bContent) return 1;
+                if (aContent > bContent) return -1;
+                if (aContent === bContent) return 0;
             }
             return 0;
         });
@@ -271,11 +283,9 @@ export default class DataManager {
             // update row index
             const srNoColIndex = this.getColumnIndexById('_rowIndex');
             this.rows.forEach((row, index) => {
-                row.forEach(cell => {
-                    if (cell.colIndex === srNoColIndex) {
-                        cell.content = (index + 1) + '';
-                    }
-                });
+                const viewIndex = this.rowViewOrder.indexOf(index);
+                const cell = row[srNoColIndex];
+                cell.content = (viewIndex + 1) + '';
             });
         }
     }
@@ -438,6 +448,11 @@ export default class DataManager {
         return this.rows.slice(start, end);
     }
 
+    getRowsForView(start, end) {
+        const rows = this.rowViewOrder.map(i => this.rows[i]);
+        return rows.slice(start, end);
+    }
+
     getColumns(skipStandardColumns) {
         let columns = this.columns;
 
@@ -477,13 +492,13 @@ export default class DataManager {
 
     getRow(rowIndex) {
         rowIndex = +rowIndex;
-        return this.rows.find(row => row[0].rowIndex === rowIndex);
+        return this.rows[rowIndex];
     }
 
     getCell(colIndex, rowIndex) {
         rowIndex = +rowIndex;
         colIndex = +colIndex;
-        return this.rows.find(row => row[0].rowIndex === rowIndex)[colIndex];
+        return this.getRow(rowIndex)[colIndex];
     }
 
     get() {