add row actions

src/components/scroll-table.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="Scroll-Table">
         <my-input placeholder="Suche" type="text" @change="searchChanged" v-model="currentSearch"></my-input>
-        <my-table :columns="columns" :rows="rows"
+        <my-table :actions="actions" :columns="columns" :rows="rows"
           :currentOrderBy="currentOrderBy"
           :currentOrderDesc="currentOrderDesc"
           @sort="sort">
@@ -20,127 +20,132 @@ import MyInput from './my-input.vue';
 import { ObserveVisibility } from 'vue-observe-visibility/dist/vue-observe-visibility';
 
 export default {
-   name: "ScrollTable",
-    directives: {
-        ObserveVisibility
-    },
-    components: {
-        MyTable,
-        MyInput
-    },
-    props: {
-       columns: {
-           type: Array,
-           default() {
+	name: "ScrollTable",
+	directives: {
+		ObserveVisibility
+	},
+	components: {
+		MyTable,
+		MyInput
+	},
+	props: {
+        actions: {
+            type: Array,
+            default() {
                 return [ ];
-           }
-       },
-       newRows: {
-           type: Array,
-           default() {
-                return [ ];
-           }
-       },
-       offset: {
-           type: Number,
-           default: 0
-       },
-       limit: {
-           type: Number,
-           default: 10
-       },
-       orderBy: {
-           type: String
-       },
-       orderDesc: {
-           type: Boolean,
-           default: false
-       },
-       search: {
-           type: String
-       },
-       loading: {
-           type: Boolean,
-           default: false
-       },
-       hasMore: {
-           type: Boolean,
-           default: true
-       },
-       handler: {
-           type: Function,
-           default: () => {}
-       }
-    },
-    watch: {
-        newRows(rows) {
-            rows.forEach(row => {
-                this.rowsToPush.push(row);
-            });
-            this.currentOffset += rows.length;
+            }
+        },
+		columns: {
+			type: Array,
+			default() {
+				return [ ];
+			}
+		},
+		newRows: {
+			type: Array,
+			default() {
+				return [ ];
+			}
+		},
+		offset: {
+			type: Number,
+			default: 0
+		},
+		limit: {
+			type: Number,
+			default: 10
+		},
+		orderBy: {
+			type: String
+		},
+		orderDesc: {
+			type: Boolean,
+			default: false
+		},
+		search: {
+			type: String
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		hasMore: {
+			type: Boolean,
+			default: true
+		},
+		handler: {
+			type: Function,
+			default: () => {}
+		}
+	},
+	watch: {
+		newRows(rows) {
+			rows.forEach(row => {
+				this.rowsToPush.push(row);
+			});
+			this.currentOffset += rows.length;
             this.pushRows(); // for transition
         },
         loading(l) {
-            if (!l) {
+        	if (!l) {
                 // delay after loading for visibility observer
                 setTimeout(() => {
-                    this.loadingDelayed = false;
+                	this.loadingDelayed = false;
                 }, 200);
             } else {
-                this.loadingDelayed = true;
+            	this.loadingDelayed = true;
             }
         }
     },
     data() {
-        return {
-            rows: [ ],
-            rowsToPush: [ ],
-            currentOffset: this.offset,
-            currentOrderBy: this.orderBy,
-            currentOrderDesc: this.orderDesc,
-            currentSearch: this.search,
-            loadingDelayed: false,
-            reloadTriggered: false
-        }
+    	return {
+    		rows: [ ],
+    		rowsToPush: [ ],
+    		currentOffset: this.offset,
+    		currentOrderBy: this.orderBy,
+    		currentOrderDesc: this.orderDesc,
+    		currentSearch: this.search,
+    		loadingDelayed: false,
+    		reloadTriggered: false
+    	}
     },
     methods: {
-        visibilityChanged(isVisible, entry) {
-            if (isVisible) {
+    	visibilityChanged(isVisible, entry) {
+    		if (isVisible) {
                 // infinite scrolling
                 this.reloadTriggered = false;
                 this.handler(this.currentOffset, this.limit, this.currentOrderBy, this.currentOrderDesc, this.currentSearch);
             }
         },
         pushRows() {
-            let row = this.rowsToPush.shift();
-            if (row) {
-                this.rows.push(row);
-                setTimeout(() => {
-                    this.pushRows();
-                }, 20);
-            }
+        	let row = this.rowsToPush.shift();
+        	if (row) {
+        		this.rows.push(row);
+        		setTimeout(() => {
+        			this.pushRows();
+        		}, 20);
+        	}
         },
         clear() {
-            this.currentOffset = 0;
-            this.rows = [];
-            this.rowsToPush = [];
+        	this.currentOffset = 0;
+        	this.rows = [];
+        	this.rowsToPush = [];
         },
         sort(e) {
-            if (e.orderBy == this.currentOrderBy) {
-                this.currentOrderDesc = !this.currentOrderDesc;
-            } else {
-                this.currentOrderDesc = false;
-            }
-            this.currentOrderBy = e.orderBy;
-            this.reloadTriggered = true;
-            this.clear();
+        	if (e.orderBy == this.currentOrderBy) {
+        		this.currentOrderDesc = !this.currentOrderDesc;
+        	} else {
+        		this.currentOrderDesc = false;
+        	}
+        	this.currentOrderBy = e.orderBy;
+        	this.reloadTriggered = true;
+        	this.clear();
         },
         searchChanged(e) {
-            this.currentSearch = e;
-            this.reloadTriggered = true;
-            this.clear();
+        	this.currentSearch = e;
+        	this.reloadTriggered = true;
+        	this.clear();
         }
     }
 }
-
 </script>