support secondary fields

src/types/data.ts

@@ -16,6 +16,7 @@ export interface Image {
 export interface Column {
   name: string
   type: FieldType
+  secondary?: boolean
 }
 
 export type Columns = Column[]

src/views/Editor/DataEditor.vue

@@ -26,6 +26,7 @@ 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 columnsPrimary = computed(() => props.columns.filter(column => !column.secondary))
 
 const onRowEditSave = (event: { newData: any, index: number }) => {
   let { newData, index } = event
@@ -106,7 +107,7 @@ DataTable.data-editor(
     style='width:5rem;'
   )
   Column(
-    v-for='col of columns'
+    v-for='col of columnsPrimary'
     :key='col.name'
     :field='col.name'
     :header='col.name'
@@ -170,9 +171,7 @@ DataTable.data-editor(
         rounded
         severity='secondary'
         variant='text'
-        :onClick=`(e) => {
-          slotProps.editorInitCallback(e)
-        }`
+        @click='slotProps.editorInitCallback'
       )
       Button(
         icon='pi pi-trash'
@@ -180,9 +179,7 @@ DataTable.data-editor(
         rounded
         severity='danger'
         variant='text'
-        :onClick=`(e) => {
-          onDeleteRow(e, slotProps)
-        }`
+        :onClick='(e) => onDeleteRow(e, slotProps)'
       )
     template(
       #editor='slotProps'
@@ -193,9 +190,7 @@ DataTable.data-editor(
         rounded
         severity='secondary'
         variant='text'
-        :onClick=`(e) => {
-          slotProps.editorSaveCallback(e)
-        }`
+        @click='slotProps.editorSaveCallback'
       )
       Button(
         icon='pi pi-times'
@@ -203,9 +198,7 @@ DataTable.data-editor(
         rounded
         severity='secondary'
         variant='text'
-        :onClick=`(e) => {
-          slotProps.editorCancelCallback(e)
-        }`
+        @click'slotProps.editorCancelCallback(e)'
       )
   template(
     #expansion='slotProps'

src/views/Editor/FieldEditor.vue

@@ -2,6 +2,7 @@
 import { ref } from 'vue'
 import { v1 as uuidv1 } from 'uuid'
 import Button from 'primevue/button'
+import Checkbox from 'primevue/checkbox'
 import DataTable from 'primevue/datatable'
 import Column from 'primevue/column'
 import InputText  from 'primevue/inputtext'
@@ -82,6 +83,27 @@ DataTable.field-editor(
         v-model='data[field]'
         :options='FieldTypes'
       )
+  Column(
+    field='secondary'
+    header='Secondary'
+  )
+    template(
+      #body='slotProps'
+    )
+      Checkbox(
+        v-model='slotProps.data.secondary'
+        :name='`${slotProps.data.name} is secondary`'
+        binary
+        disabled
+      )
+    template(
+      #editor='slotProps'
+    )
+      Checkbox(
+        v-model='slotProps.data.secondary'
+        :name='`${slotProps.data.name} is secondary`'
+        binary
+      )
   Column(
     rowEditor
     header='Actions'