row adding/deleting

src/views/Editor/DataEditor.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { v7 as uuidv7 } from 'uuid'
+import Button from 'primevue/button'
 import DataTable from 'primevue/datatable'
 import Column from 'primevue/column'
 import Image from 'primevue/image'
@@ -19,7 +21,24 @@ const editingRows = ref([])
 const onRowEditSave = (event: { newData: any, index: number }) => {
   let { newData, index } = event
   model.value![index] = newData
+}
+
+const onAddRow = (event: Event) => {
+  event.preventDefault()
+  model.value!.push({ _id: uuidv7() })
   console.log(model.value)
+
+  requestAnimationFrame(() => {
+    (document.querySelector('tr:last-of-type button.edit') as HTMLButtonElement).click()
+    requestAnimationFrame(() => {
+      (document.querySelector('tr:last-of-type input') as HTMLInputElement | undefined)?.focus()
+    })
+  })
+}
+
+const onDeleteRow = (event: Event, slotProps: { index: number }) => {
+  event.preventDefault()
+  model.value!.splice(slotProps.index, 1)
 }
 </script>
 
@@ -30,6 +49,7 @@ DataTable(
   :value='model'
   editMode='row'
   tableStyle='min-width: 50rem'
+  v-if='model.length > 0'
 )
   Column(
     v-for='col of columns'
@@ -72,10 +92,65 @@ DataTable(
           fluid
         )
   Column(
-    :rowEditor='true'
+    rowEditor
     style='width:10%;min-width:8rem;'
     bodyStyle='text-align:center;'
   )
+    template(
+      #body='slotProps'
+    )
+      Button.edit(
+        icon='pi pi-pencil'
+        aria-label='Row Edit'
+        rounded
+        severity='secondary'
+        variant='text'
+        :onClick=`(e) => {
+          slotProps.editorInitCallback(e)
+        }`
+      )
+      Button(
+        icon='pi pi-trash'
+        aria-label='Delete'
+        rounded
+        severity='danger'
+        variant='text'
+        :onClick=`(e) => {
+          onDeleteRow(e, slotProps)
+        }`
+      )
+    template(
+      #editor='slotProps'
+    )
+      Button(
+        icon='pi pi-save'
+        aria-label='Save Edit'
+        rounded
+        severity='secondary'
+        variant='text'
+        :onClick=`(e) => {
+          slotProps.editorSaveCallback(e)
+        }`
+      )
+      Button(
+        icon='pi pi-times'
+        aria-label='Cancel Edit'
+        rounded
+        severity='secondary'
+        variant='text'
+        :onClick=`(e) => {
+          slotProps.editorCancelCallback(e)
+        }`
+      )
+p(
+  v-else
+) There are no items yet!
+Button(
+  icon='pi pi-plus'
+  aria-label='Add New Item'
+  label='Add New Item'
+  @click='onAddRow'
+)
 </template>
 
 <style scoped lang="sass">