expand table for more info

src/views/Editor/DataEditor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { v7 as uuidv7 } from 'uuid'
 import Button from 'primevue/button'
 import DataTable from 'primevue/datatable'
@@ -22,8 +22,10 @@ const emits = defineEmits<{
 }>()
 const model = defineModel<DataRow[]>({ required: true })
 const editingRows = ref<DataRow[]>([])
+const expandedRows = ref<DataRow[]>([])
 const editingImage = ref(false)
 const editingImageRow = ref(null as EditingRow | null)
+const columnsByKey = computed(() => Object.assign({}, ...props.columns.map(c => ({[c.name]: c}))))
 
 const onRowEditSave = (event: { newData: any, index: number }) => {
   let { newData, index } = event
@@ -93,17 +95,25 @@ ImageEditor(
 DataTable.data-editor(
   @row-edit-save='onRowEditSave'
   v-model:editingRows='editingRows'
+  v-model:expandedRows='expandedRows'
   :value='model'
   editMode='row'
   tableStyle='min-width: 50rem'
   v-if='model.length > 0'
 )
+  Column(
+    expander
+    style='width:5rem;'
+  )
   Column(
     v-for='col of columns'
     :key='col.name'
     :field='col.name'
     :header='col.name'
-    style='width:5rem;'
+    :class=`{
+      "image-column": col.type === "image",
+      "other-column": col.type !== "image",
+    }`
   )
     template(
       #body='slotProps'
@@ -144,7 +154,6 @@ DataTable.data-editor(
       )
         InputText(
           v-model='slotProps.data[slotProps.field]'
-          fluid
         )
   Column(
     rowEditor
@@ -198,6 +207,28 @@ DataTable.data-editor(
           slotProps.editorCancelCallback(e)
         }`
       )
+  template(
+    #expansion='slotProps'
+  )
+    .info
+      p _id: {{ slotProps.data['_id'] }}
+    .info(
+      v-for='(column, field) in columnsByKey'
+    )
+      p.empty(
+        v-if='!slotProps.data[field]'
+      ) {{ field }} is empty
+      .info-image(
+        v-else-if='column.type === "image"'
+      )
+        p Image
+        Image(
+          :src='slotProps.data[field].src'
+          preview
+        )
+      p(
+        v-else
+      ) {{ field }}: {{ slotProps.data[field] }}
 p(
   v-else
 ) There are no items yet!
@@ -210,10 +241,23 @@ Button(
 </template>
 
 <style scoped lang="sass">
+:deep(tr > td)
+  height: 100%
+:deep(.image-column)
+  width: 25vw
+:deep(.other-column)
+  max-width: 0
 :deep(.p-image)
   img
-    max-width: 16rem
+    max-width: 100%
+    max-height: 8rem
 :deep(td:last-of-type)
-  display: flex
-  padding-left: 8px
+  padding-left: 0
+  button:first-of-type
+    margin-left: -16px
+.info :deep(.p-image) img
+    max-width: 16rem
+    max-height: 16rem
+p.empty
+  font-style: italic
 </style>