diff --git a/src/views/Editor.vue b/src/views/Editor.vue
index 800595b..f454d84 100644
--- a/src/views/Editor.vue
+++ b/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)
+}
-DataTable(:value='sampleData' tableStyle='min-width: 50rem')
- Column(v-for='col of sampleFields' :key='col.field' :field='col.field' :header='col.header')
+DataTable(
+ @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(
- v-if='slotProps.data.image'
- :src='slotProps.data.image.src'
- :alt='slotProps.data.image.alt'
- preview
+ div(
+ v-if='col.type === "image"'
)
- 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'
- v-else
+ #editor='{ data, field }'
)
- 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] }}
+ //-