pgo-ui 1.0.74 → 1.0.76

package/src/components/pgo/DataTable copy.vue

@@ -20,7 +20,7 @@
                   inputBorder
                 ]"
                 @input="debounceSearch"
-              />
+              >
               <div class="absolute left-3 top-1/2 transform -translate-y-1/2">
                 <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
@@ -39,11 +39,11 @@
         <!-- Loading Bar -->
         <div class="absolute top-0 left-0 right-0 z-10 h-1  overflow-hidden">
           <div v-if="loading" class="bg-gray-200 w-full">
-            <div class="h-full bg-primary animate-loading-bar"></div>
+            <div class="h-full bg-primary animate-loading-bar" />
           </div>
         </div>
 
-        <table class="w-full caption-bottom text-sm">
+        <table :dir="dir" class="w-full caption-bottom text-sm">
           <!-- Table Header -->
           <thead :class="[headerBg]">
             <tr :class="[headerBorder, 'transition-colors']">
@@ -56,7 +56,7 @@
                     :indeterminate.prop="someSelected"
                     class="h-4 w-4  rounded border border-gray-200 text-primary focus:ring-2 focus:ring-primary-500 focus:ring-offset-0"
                     @change="toggleSelectAll"
-                  />
+                  >
                 </div>
               </th>
               <!-- Column Headers -->
@@ -72,15 +72,16 @@
                   'hover:bg-input-hover-border',
                   { 'bg-surface': isSorted(header.value) }
                 ]"
-                @click="header.sortable !== false ? toggleSort(header.value) : null"
+                @click="header.sortable == true ? toggleSort(header.value) : null"
               >
-                <div :class="['flex items-center space-x-2', textAlign[header.headerAlign] || 'defaults',]">
-                  <span :class="['w-full',  header.width ? 'truncate' : 'whitespace-nowrap',]"
-                    :style="{ maxWidth: header.width || '120px', }"
+                <div :class="['flex items-center space-x-2', textAlign[header.headerAlign ?? 'defaults']]">
+                  <span
+                    :class="['w-full', header.width ? 'truncate' : 'whitespace-nowrap',]"
+                    :style="{ maxWidth: header.width || 'auto', }"
                   >
                     {{ header.title }}
                   </span>
-                  <div v-if="header.sortable !== false" class="flex h-4 w-4 items-center justify-center">
+                  <div v-if="header.sortable == true" class="flex h-4 w-4 items-center justify-center">
                     <!-- Unsorted state -->
                     <svg
                       v-if="!isSorted(header.value)"
@@ -115,10 +116,11 @@
                 </div>
               </th>
               <!-- Actions column -->
-              <th v-if="$slots['item-actions'] || showActions" :class="['h-10 px-3 text-end align-middle font-medium', headerText]"
-              :style="{ width: '25px' || 'auto' }"
+              <th
+                v-if="$slots['item-actions'] || showActions" :class="['h-10 px-3 text-end align-middle font-medium', headerText]"
+                :style="{ width: '25px' || 'auto' }"
               >
-                <Button 
+                <Button
                   v-if="inlineEdit"
                   :label="editMode ? 'Cancel Edit' : 'Inline Edit'"
                   :color="editMode ? 'danger' : 'primary'"
@@ -156,7 +158,7 @@
               @click="handleRowClick(item, index)"
             >
               <!-- Selection checkbox -->
-              <td v-if="selectable" class="px-6 py-4">
+              <td v-if="selectable" class="px-2 py-2">
                 <div class="flex items-center justify-center">
                   <input
                     type="checkbox"
@@ -164,21 +166,21 @@
                     class="h-4 w-4 rounded border-2 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-0"
                     @click.stop
                     @change="toggleItemSelection(item, index)"
-                  />
+                  >
                 </div>
               </td>
 
               <!-- Data columns -->
               <template v-for="header in headers" :key="header.value">
                 <td
-                  :style="{ width: header.width || 'flex', maxWidth: header.width || '120px' }"
+                  :style="{ width: header.width || 'flex', maxWidth: header.width || 'auto' }"
                   :class="[
-                    'px-6 py-4',
+                    'px-2 py-2 ',
                   ]"
                   @click.stop
                 >
                   <div
-                    class="truncate  "  
+                    class="  "
                   >
                     <slot
                       :name="`item.${header.value}`"
@@ -189,47 +191,74 @@
                     >
 
                       <!-- html -->
-                       <div v-if="header.displayType == 'html'" :class="[
-                        'text-sm truncate  shrink ', 
-                        cellText,
-                        textAlign[header?.align] || 'defaults',
-                        
-                      ]">
-                        {{ header.columntData }}
+                      <div
+                        v-if="header.displayType == 'html'" :class="[
+                          'text-sm truncate shrink',
+                          cellText,
+                          textAlign[header?.align ?? 'defaults'],
+                        ]" v-html="getCustomColumnData(header, item)"
+                      />
+
+                      <!-- Custom column -->
+                      <div
+                        v-else-if="header.displayType == 'custom'" :class="[
+                          'text-sm truncate shrink',
+                          cellText,
+                          textAlign[header?.align ?? 'defaults'],
+                        ]"
+                      >
+                        <template v-if="getCustomColumnData(header, item)?.type === 'CopyTextBox'">
+                          <div class="flex flex-wrap items-center gap-1">
+                            <template
+                              v-for="(chip, idx) in getCustomColumnData(header, item).CopyTextBox"
+                              :key="idx"
+                            >
+                              <CopyTextBox
+                                v-bind="chip"
+                                class="mr-1 "
+                              />
+
+                            </template>
+                          </div>
+                        </template>
+                        <div v-else v-html="getCustomColumnData(header, item)" />
                       </div>
                       <!-- Chip Display -->
-                      
-                      <div v-else-if="header.displayType == 'chip' && (header.inlineEditable && !editMode)" 
+
+                      <div
+                        v-else-if="header.displayType == 'chip' "
                         :class="['align-middle leading-0', getColumnFont(lang)]"
                       >
-                      <!-- <pre style="font-size:10px">{{ JSON.stringify(getNestedValue(item, header.value)) }}</pre> -->
-                        <Chip 
-                          size="small" 
+                        <!-- <pre style="font-size:10px">{{ JSON.stringify(getNestedValue(item, header.value)) }}</pre> -->
+                        <Chip
+                          size="small"
                           v-if="header?.chip && header?.chip[getNestedValue(item, header.value)]"
                           v-bind="header.chip[getNestedValue(item, header.value)]"
                         />
-                          <span v-else class="text-xs text-gray-400">
-                            {{ getNestedValue(item, header.value) || '-' }}
-                          </span>
+                        <span v-else class="text-xs text-gray-400">
+                          {{ getNestedValue(item, header.value) || '-' }}
+                        </span>
                       </div>
-                      
+
                       <!-- Checkbox (Inline Editable) -->
-                      <div v-else-if="header.displayType == 'checkbox'" 
+                      <div
+                        v-else-if="header.displayType == 'checkbox'"
                         :class="['align-middle leading-none', getColumnFont(header.lang)]"
                       >
-                        <Checkbox 
+                        <Checkbox
                           :model-value="!!getNestedValue(item, header.value)"
                           v-bind="header.displayProps"
                           :disabled="!editMode || !header.inlineEditable"
                           @update:model-value="(value) => handleCellUpdate(item, header.value, value, index)"
                         />
                       </div>
-                      
+
                       <!-- Select (Inline Editable) -->
-                      <div v-else-if="header.inputType == 'select' && header.inlineEditable" 
+                      <div
+                        v-else-if="header.inputType == 'select' && header.inlineEditable"
                         :class="['align-middle leading-none', getColumnFont(header.lang)]"
                       >
-                        <Select 
+                        <Select
                           v-if="editMode && header.inlineEditable"
                           :model-value="getNestedValue(item, header.value)"
                           v-bind="header.select"
@@ -239,9 +268,10 @@
                           {{ formatCellValue(getNestedValue(item, header.value), header) }}
                         </div>
                       </div>
-                      
+
                       <!-- Text Input (Inline Editable) -->
-                      <div v-else-if="header.displayType == 'input' && header.inlineEditable" 
+                      <div
+                        v-else-if="header.displayType == 'input' && header.inlineEditable"
                         :class="['align-middle leading-none', getColumnFont(header.lang)]"
                       >
                         <input
@@ -250,33 +280,60 @@
                           type="text"
                           class="w-full px-2 py-1 text-sm border rounded focus:outline-none focus:ring-2 focus:ring-primary"
                           @input="(e) => handleCellUpdate(item, header.value, e.target.value, index)"
-                        />
-                          <div v-else :class="['text-sm', cellText]">
+                        >
+                        <div v-else :class="['text-sm', cellText]">
                           {{ formatCellValue(getNestedValue(item, header.value), header) }}
                         </div>
                       </div>
-                      
-                      <!-- Default Text Display -->
-                      <div v-else :class="[
-                        'text-sm truncate  shrink ', 
-                        cellText,
-                        textAlign[header.align] || 'defaults',
-                        header.displayType == 'englishText' || header.displayType == 'date' ? 'eng-font' : getColumnFont(lang),
-                      ]">
-                        {{ formatCellValue(getNestedValue(item, header.value), header) }}
+                      <!-- Document Viewer -->
+                      <div
+                        v-else-if="header.displayType == 'docButton'"
+                        :class="['align-middle leading-none', getColumnFont(header.lang)]"
+                      >
+                        <FileDisplay
+                          :item="getNestedValue(item, header.value)"
+                          v-bind="header.docButton"
+                          @view-file="emit('viewpdf', $event)"
+                        />
+                        <!-- <Button
+                          icon="document-text"
+                          icon-type="solid"
+                          variant="text"
+                          size="xs"
+                          @click="emit('viewpdf', formatCellValue(getNestedValue(item, header.value), header))"
+                        /> -->
+                        <!-- @click="handlePdfView(formatCellValue(getNestedValue(item, header.value), header))" -->
                       </div>
+
+                      <!-- Default Text Display -->
+                      <!-- <bdi class="flex items-center"></bdi> -->
+                      <bdi
+                        v-else :class="[
+                          'text-sm',
+                          cellText,
+                          textAlign[header.align ?? 'defaults'],
+                          header.displayType == 'englishText' || header.displayType == 'date' ? 'eng-font' : getColumnFont(lang),
+                        ]"
+                      >
+                        <span
+                          :class="['w-full', header.width ? 'truncate' : 'truncate whitespace-nowrap',]"
+                          :style="{ maxWidth: header.width || 'auto', }"
+                        >
+                          {{ formatCellValue(getNestedValue(item, header.value), header) }}
+                        </span>
+                      </bdi>
                     </slot>
-                  </div>  
+                  </div>
                 </td>
               </template>
 
               <!-- Actions -->
-              <td v-if="$slots['item-actions'] || showActions" class="px-6 py-4">
+              <td v-if="$slots['item-actions'] || showActions" class="px-2 py-2">
                 <slot name="item-actions" :item="item" :index="index">
                   <div class="flex items-center justify-end space-x-2">
-                    <Button v-if="showView" @click.stop="emit('view', item)" size="md" color="info" variant="text" icon="eye" icon-type="outline"  label="" />
-                    <Button v-if="showEdit" @click.stop="emit('edit', item)" size="md" icon="pencil-square" color="warning" variant="text" label="" />
-                    <Button v-if="showDelete" @click.stop="emit('delete', item)" size="md" color="danger" variant="text" icon="trash" label="" />
+                    <Button v-if="showView && evaluateCondition(settings?.actions?.viewCondition, item)" v-tooltip="{en: 'View', dv: 'ވިއު'}" @click.stop="emit('view', item)" size="md" color="info" variant="text" icon="eye" icon-type="outline" label="" />
+                    <Button v-if="showEdit && evaluateCondition(settings?.actions?.editCondition, item)" v-tooltip="{en: 'Edit', dv: 'އެޑިޓް'}" @click.stop="emit('edit', item)" size="md" icon="pencil-square" color="warning" variant="text" label="" />
+                    <Button v-if="showDelete && evaluateCondition(settings?.actions?.deleteCondition, item)" v-tooltip="{en: 'Delete', dv: 'ޑިލީޓް'}" @click.stop="emit('delete', item)" size="md" color="danger" variant="text" icon="trash" label="" />
                   </div>
                 </slot>
               </td>
@@ -307,21 +364,34 @@
       <slot name="footer" />
     </div>
 
+    <!-- Delete Confirmation Modal -->
+    <template>
+    <!-- <ConfirmationModal
+      v-model="showConfirmation2"
+      :item="DeleteItem"
+      title="Delete Confirmation"
+      subtitle="Are you sure you want to delete this item?"
+      message="Are you sure you want to delete this item?"
+      type="warning"
+      @confirm="handleDeleteConfirm"
+    /> -->
+    </template>
+
     <!-- Confirmation Modal -->
-     <Model 
-      v-model="showConfirmation" 
-      persistent 
+    <Model
+      v-model="showConfirmation"
+      persistent
       lang="en"
 
       title="Confirm Update"
     >
       <p class="text-sm text-gray-600 mb-6">
-          Are you sure you want to update <strong>{{ pendingUpdate.header }}</strong> 
-          from <strong>{{ pendingUpdate.oldValue }}</strong> to <strong>{{ pendingUpdate.newValue }}</strong>?
+        Are you sure you want to update <strong>{{ pendingUpdate.header }}</strong>
+        from <strong>{{ pendingUpdate.oldValue }}</strong> to <strong>{{ pendingUpdate.newValue }}</strong>?
       </p>
       <template #footer>
         <div class="flex justify-end gap-2">
-            <Button
+          <Button
             label="Cancel"
             color="secondary"
             variant="outlined"
@@ -335,7 +405,7 @@
           />
         </div>
       </template>
-     </Model>
+    </Model>
   </div>
 </template>
 
@@ -344,10 +414,17 @@ import { ref, computed, watch, reactive, onMounted, inject } from 'vue'
 import Button from '../pgo/Button.vue'
 import Pagination from '../pgo/Pagination.vue'
 import Chip from '../pgo/buttons/Chip.vue'
+import CopyTextBox from './CopyTextBox.vue'
 import Checkbox from '../pgo/inputs/Checkbox.vue'
 import Select from '../pgo/inputs/Select.vue'
 import Model from '../pgo/Modal.vue'
+import ConfirmationModal from './ConfirmationModal.vue'
+
 import { textAlign, initializeFunctions } from '../../pgo-components/lib/componentConfig.js'
+import FileDisplay from './FileDisplay.vue'
+
+const api = inject('api')
+const snackbar = inject('snackbar')
 
 const props = defineProps({
   // Data
@@ -359,7 +436,7 @@ const props = defineProps({
     type: [Array, Object],
     required: true
   },
-  
+
   // Server-side options
   serverSideOptions: {
     type: Object,
@@ -389,7 +466,7 @@ const props = defineProps({
     type: String,
     default: 'No data available'
   },
-  
+
   // Features
   showActions: {
     type: Boolean,
@@ -451,7 +528,7 @@ const props = defineProps({
     type: String,
     default: 'shadow-none'
   },
-  
+
   // Header styling
   headerBg: {
     type: String,
@@ -465,7 +542,7 @@ const props = defineProps({
     type: String,
     default: 'text-textcolor'
   },
-  
+
   // Row styling
   rowBorder: {
     type: String,
@@ -483,13 +560,13 @@ const props = defineProps({
     type: String,
     default: 'text-textcolor'
   },
-  
+
   // Input styling
   inputBorder: {
     type: String,
     default: 'border-input-border focus:border-input-focus-border focus:ring-input-focus-ring'
   },
-  
+
   // Button styling
   buttonPrimary: {
     type: String,
@@ -499,7 +576,7 @@ const props = defineProps({
     type: String,
     default: 'bg-surface hover:bg-input-hover-border text-textcolor border border-input-border'
   },
-  
+
   // Pagination styling
   paginationBg: {
     type: String,
@@ -532,6 +609,9 @@ const props = defineProps({
   lang: {
     type: String,
     default: 'dv'
+  },
+  dir: {
+    type: String
   }
 
 })
@@ -545,9 +625,11 @@ const emit = defineEmits([
   'search',
   'view',
   'edit',
-  'delete'
+  'delete',
+  'viewpdf'
 ])
 
+
 // Internal state
 const searchQuery = ref('')
 const selectedItems = ref([])
@@ -555,9 +637,9 @@ const searchTimeout = ref(null)
 const editMode = ref(false)
 const showConfirmation = ref(false)
 const updateLoading = ref(false)
-const headers = ref({})
-// const compiledFunctions = ref({})
-// const tableVariables = reactive({ ...props.settings?.variables })
+const headers = computed(() => props.settings.headers || [])
+const compiledFunctions = ref({})
+const tableVariables = reactive({ ...props.settings?.variables })
 
 const pendingUpdate = ref({
   item: null,
@@ -603,43 +685,65 @@ const someSelected = computed(() => {
   return selectedItems.value.length > 0 && !allSelected.value
 })
 
-// Add this function
-// const initializeAllFunctions = () => {
-//   if (props.settings.functions) {
-//     const functionContext = {
-//       items: props.items,
-//       headers: props.settings?.headers,
-//       selectedItems,
-//       searchQuery,
-//       internalOptions,
-//       tableVariables,
-//       variables: tableVariables,
-//       emit,
-//       props,
-//       console,
-//       snackbar: inject('snackbar', null),
-//       api: inject('api', null),
-//       this: {
-//         variables: tableVariables
-//       }
-//     }
-
-//     compiledFunctions.value = initializeFunctions(props.functions, functionContext)
-//   }
-// }
+const initializeAllFunctions = () => {
+
+  if (props.settings?.functions) {
+
+    const functionContext = {
+      items: props.items,
+      headers: headers.value,
+      selectedItems,
+      searchQuery,
+      internalOptions,
+      tableVariables,
+      variables: tableVariables,
+      emit,
+      props,
+      console,
+      snackbar: snackbar,
+      api: api,
+      this: {
+        variables: tableVariables
+      }
+    }
+
+    compiledFunctions.value = initializeFunctions(props.settings.functions, functionContext)
+  } else {
+    console.log('No functions found in settings')
+  }
+}
+
+// Execute function helper
+const executeFunction = (functionName, ...args) => {
+
+  if (compiledFunctions.value[functionName]) {
+    try {
+      const result = compiledFunctions.value[functionName](...args)
+      return result
+    } catch (error) {
+      console.error(`Error executing function ${functionName}:`, error)
+    }
+  } else {
+    console.warn(`Function ${functionName} not found`)
+  }
+}
+
+// Add this method in your script section
+const getCustomColumnData = (header, item) => {
+
+  if (header.columnData && (header.displayType === 'html' || header.displayType === 'custom')) {
+    // Extract function name from columnData (e.g., "customeColumnData(item)")
+    const functionMatch = header.columnData.match(/(\w+)\(/)
+    if (functionMatch) {
+      const functionName = functionMatch[1]
+      // Execute the compiled function with the item data as the first argument
+      const result = executeFunction(functionName, item)
+      return result || ''
+    }
+  }
+  return ''
+}
 
-// // Execute function helper
-// const executeFunction = (functionName, ...args) => {
-//   if (compiledFunctions.value[functionName]) {
-//     try {
-//       return compiledFunctions.value[functionName](...args)
-//     } catch (error) {
-//       console.error(`Error executing function ${functionName}:`, error)
-//     }
-//   } else {
-//     console.warn(`Function ${functionName} not found`)
-//   }
-// }
 // Methods
 const getItemKey = (item, index) => {
   return item[props.itemKey] ?? index
@@ -653,6 +757,15 @@ const getNestedValue = (obj, path) => {
   return path.split('.').reduce((current, key) => current?.[key], obj)
 }
 
+const evaluateCondition = (condition, item) => {
+  if (!condition) return true
+  try {
+    return new Function('item', `return ${condition}`)(item)
+  } catch {
+    return true
+  }
+}
+
 const formatCellValue = (value, header) => {
   if (header.format && typeof header.format === 'function') {
     return header.format(value)
@@ -663,41 +776,41 @@ const formatCellValue = (value, header) => {
 const toggleSort = (key) => {
   // Find the header to check if it's sortable
   const header = props.settings.headers.find(h => h.key === key)
-  
+
   // Don't sort if explicitly marked as not sortable
   if (header && header.sortable === false) {
-    console.log('Column is not sortable:', key)
+    // console.log('Column is not sortable:', key)
     return
   }
-  
+
   const sortBy = [...internalOptions.value.sortBy]
   const sortDesc = [...internalOptions.value.sortDesc]
-  
+
   const index = sortBy.findIndex(item => item === key)
-  
+
   if (index === -1) {
     // Add new sort
     sortBy.push(key)
     sortDesc.push(false)
-    console.log('Adding new sort - ASC')
+    // console.log('Adding new sort - ASC')
   } else {
     // Toggle existing sort
     if (!sortDesc[index]) {
       sortDesc[index] = true
-      console.log('Changing to DESC')
+      // console.log('Changing to DESC')
     } else {
       // Remove sort
       sortBy.splice(index, 1)
       sortDesc.splice(index, 1)
-      console.log('Removing sort')
+      // console.log('Removing sort')
     }
   }
-  
+
   internalOptions.value.sortBy = sortBy
   internalOptions.value.sortDesc = sortDesc
   internalOptions.value.page = 1 // Reset to first page
-  
-  
+
+
   emitOptionsUpdate()
 }
 
@@ -713,13 +826,13 @@ const getSortDirection = (key) => {
 
 const getColumnFont = (lang) => {
   if (!lang) return ''
-  
+
   const fontMap = {
     'en': 'eng-font',       // or whatever your English font is
     'dv': 'faruma',      // Dhivehi font
     // Add more languages as needed
   }
-  
+
   return fontMap[lang] || ''
 }
 
@@ -727,7 +840,7 @@ const debounceSearch = () => {
   if (searchTimeout.value) {
     clearTimeout(searchTimeout.value)
   }
-  
+
   searchTimeout.value = setTimeout(() => {
     internalOptions.value.search = searchQuery.value
     internalOptions.value.page = 1
@@ -743,13 +856,13 @@ const handleRowClick = (item, index) => {
 const toggleItemSelection = (item, index) => {
   const key = getItemKey(item, index)
   const currentIndex = selectedItems.value.indexOf(key)
-  
+
   if (currentIndex === -1) {
     selectedItems.value.push(key)
   } else {
     selectedItems.value.splice(currentIndex, 1)
   }
-  
+
   emit('selection-change', selectedItems.value, getSelectedItems())
 }
 
@@ -759,12 +872,12 @@ const toggleSelectAll = () => {
   } else {
     selectedItems.value = props.items.map((item, index) => getItemKey(item, index))
   }
-  
+
   emit('selection-change', selectedItems.value, getSelectedItems())
 }
 
 const getSelectedItems = () => {
-  return props.items.filter((item, index) => 
+  return props.items.filter((item, index) =>
     selectedItems.value.includes(getItemKey(item, index))
   )
 }
@@ -786,10 +899,10 @@ const toggleEditMode = () => {
 const handleCellUpdate = (item, key, newValue, index) => {
   const header = props.settings.headers.find(h => h.key === key)
   const oldValue = getNestedValue(item, key)
-  
+
   // Only show confirmation if value actually changed
   if (oldValue === newValue) return
-  
+
   pendingUpdate.value = {
     item,
     key,
@@ -798,23 +911,23 @@ const handleCellUpdate = (item, key, newValue, index) => {
     header: header?.title || key,
     index
   }
-  
+
   showConfirmation.value = true
 }
 
 // Confirm and send update
 const confirmUpdate = async () => {
   updateLoading.value = true
-  
+
   try {
     const { item, key, newValue, index } = pendingUpdate.value
-    
+
     // Prepare update data
     const updateData = {
       [props.itemKey]: item[props.itemKey],
       [key]: newValue
     }
-    
+
     // Emit event to parent
     emit('inline-update', {
       item,
@@ -823,19 +936,16 @@ const confirmUpdate = async () => {
       index,
       updateData
     })
-    
+
     // If updateUrl is provided, send API request
     if (props.updateUrl) {
-      const api = inject('api', null)
-      if (api) {
         const url = `${props.updateUrl}/${item[props.itemKey]}`
         await api.patch(url, updateData)
-      }
     }
-    
+
     // Update local data
     item[key] = newValue
-    
+
     // Reset confirmation
     showConfirmation.value = false
     updateLoading.value = false
@@ -877,12 +987,11 @@ watch(() => props.items, () => {
   selectedItems.value = []
 }, { deep: true })
 
-watch(() => props.settings, () => {
-  headers.value =  props.settings?.headers || []
-  // if (props.settings?.functions) {
-  //   initializeAllFunctions()
-  // }
-  console.log('Headers updated:', headers.value) // Debug log to check headers
+// Watch for function changes
+watch(() => props.settings, (newSettings) => {
+  if (newSettings?.functions) {
+    initializeAllFunctions()
+  }
 }, { deep: true })
 
 // Initialize
@@ -890,9 +999,8 @@ onMounted(() => {
   if (props.serverSideOptions) {
     internalOptions.value = { ...internalOptions.value, ...props.serverSideOptions }
   }
-  // if (props.settings?.functions) {
-  //   initializeAllFunctions()
-  // }
+
+  initializeAllFunctions()
 
 })
 </script>
@@ -916,7 +1024,7 @@ onMounted(() => {
 
 /* Table collapse */
 tables {
-   border-collapse: separate; 
+   border-collapse: separate;
   border-spacing: 0;
 }