diff --git a/index.html b/index.html
index 6d57d23..e171438 100644
--- a/index.html
+++ b/index.html
@@ -21,6 +21,7 @@
 	<button onclick="datatable.render()">Render Table</button>
 	<button onclick="datatable.refresh()">Refresh Data</button>
 	<button onclick="switchToTreeView()" data-action="treeview">TreeView</button>
+    <button onclick="appendRows()">Append Rows</button>
 	<label>
 		<input type="checkbox" id="input-large-data" />
 		<span>Large Data</span>
@@ -278,6 +279,15 @@
 				console.log(e)
 			}
 		};
+
+        function appendRows() {
+            datatable.appendRows(
+                [
+                    ["Garrett", "Accountant", "Tokyo", 8422, "2011/07/25", 170],
+                    ["Winters", "Accountant", "Tokyo", 8422, "2011/07/25", 123]
+                ]
+            )
+        }
 	</script>
 </body>
 
diff --git a/src/datamanager.js b/src/datamanager.js
index 4f7fdcd..c845a1c 100644
--- a/src/datamanager.js
+++ b/src/datamanager.js
@@ -29,7 +29,8 @@ export default class DataManager {
         this.rows = [];
 
         this.prepareColumns();
-        this.prepareRows();
+        this.validateData(this.data);
+        this.rows = this.prepareRows(this.data);
         this.prepareTreeRows();
         this.prepareRowView();
         this.prepareNumericColumns();
@@ -141,10 +142,8 @@ export default class DataManager {
         });
     }
 
-    prepareRows() {
-        this.validateData(this.data);
-
-        this.rows = this.data.map((d, i) => {
+    prepareRows(data) {
+        return data.map((d, i) => {
             const index = this._getNextRowCount();
 
             let row = [];
@@ -243,8 +242,9 @@ export default class DataManager {
 
     appendRows(rows) {
         this.validateData(rows);
-
-        this.rows.push(...this.prepareRows(rows));
+        this.rows = this.rows.concat(this.prepareRows(rows));
+        this.prepareTreeRows();
+        this.prepareRowView();
     }
 
     sortRows(colIndex, sortOrder = 'none') {