basic editing

src/views/Editor.vue

@@ -3,7 +3,10 @@ import { ref } from 'vue'
 
 import DataTable from 'primevue/datatable'
 import Column from 'primevue/column'
+import ColumnGroup from 'primevue/columngroup'
 import Image from 'primevue/image'
+import InputText  from 'primevue/inputtext'
+import Row from 'primevue/row'
 
 const sampleData = ref([
   {
@@ -29,6 +32,7 @@ const sampleData = ref([
     },
   },
 ])
+const editingRows = ref([])
 
 const sampleFields = ref([
   { field: 'name', header: 'Name', type: 'text' },
@@ -36,29 +40,69 @@ const sampleFields = ref([
   { field: 'quantity', header: 'Quantity', type: 'text' },
   { field: 'image', header: 'Image', type: 'image' },
 ])
+
+const onRowEditSave = (event: { newData: any, index: number }) => {
+  let { newData, index } = event
+  sampleData.value[index] = newData
+  console.log(sampleData.value)
+}
 </script>
 
 <template lang="pug">
-DataTable(:value='sampleData' tableStyle='min-width: 50rem')
+DataTable(
-  Column(v-for='col of sampleFields' :key='col.field' :field='col.field' :header='col.header')
+  @row-edit-save='onRowEditSave'
+  v-model:editingRows='editingRows'
+  :value='sampleData'
+  editMode='row'
+  tableStyle='min-width: 50rem'
+)
+  Column(
+    v-for='col of sampleFields'
+    :key='col.field'
+    :field='col.field'
+    :header='col.header'
+    style='width:5rem;'
+  )
     template(
       #body='slotProps'
-      v-if='col.type === "image"'
     )
-      Image(
+      div(
-        v-if='slotProps.data.image'
+        v-if='col.type === "image"'
-        :src='slotProps.data.image.src'
-        :alt='slotProps.data.image.alt'
-        preview
       )
-      span(
+        Image(
+          v-if='slotProps.data.image'
+          :src='slotProps.data.image.src'
+          :alt='slotProps.data.image.alt'
+          preview
+        )
+        span(
+          v-else
+        ) No image
+      div(
         v-else
-      ) No image
+      )
+        span {{ slotProps.data[col.field] }}
     template(
-      #body='slotProps'
+      #editor='{ data, field }'
-      v-else
     )
-      span {{ slotProps.data[col.field] }}
+      div(
+        v-if='col.type === "image"'
+      )
+        span Not Implemented
+      div(
+        v-else
+      )
+        InputText(
+          v-model='data[field]'
+          fluid
+        )
+  Column(
+    :rowEditor='true'
+    style='width:10%;min-width:8rem;'
+    bodyStyle='text-align:center;'
+  )
+      //- span {{ slotProps.data[col.field] }}
+      //-<Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
 </template>
 
 <style lang="sass">