Add cell editing

pathscale · Oct 2, 2020 · b3a3c9f · b3a3c9f
1 parent a7bc53a
commit b3a3c9f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/src/components/compounds/Table/DataGrid.ts b/src/components/compounds/Table/DataGrid.ts
@@ -47,6 +47,10 @@ class DataGrid {
     this.originalRows.splice(index, 1)
   }
 
+  editCell(row, column, newValue) {
+    row[column.name] = newValue
+  }
+
   sortByColumn(column: string, ascendant: boolean) {
     this.rows.sort((a, b) => {
       if(a[column] < b[column]) { return ascendant ? -1 : 1 };

diff --git a/src/components/compounds/Table/Table.vue b/src/components/compounds/Table/Table.vue
@@ -31,6 +31,7 @@ const Table = {
     sortable: Boolean,
     expandable: Boolean,
     draggable: Boolean,
+    editable: Boolean
   },
 
   setup(props, { emit }) {
@@ -203,7 +204,11 @@ export default Table
                 }}</v-tag></a
               >
             </td>
-            <td v-for="column in data.getColumns()" :key="column.name" :class="column.style">
+            <td
+              v-for="column in data.getColumns()"
+              :key="column.name" :class="column.style"
+              :contenteditable='props.editable'
+              v-on:blur="data.editCell(row, column, $event.target.textContent)">
               <slot :name="column.name" :row="row">
                 {{ row[column.name] }}
               </slot>