fix:gantt chart styles

2025-09-08 10:45:29 +03:30
parent c382d97d8d
commit a768c64a68
6 changed files with 1296 additions and 1094 deletions
--- a/resources/js/views/demos/forms/tables/data-table/AgGridTable.vue
+++ b/resources/js/views/demos/forms/tables/data-table/AgGridTable.vue
@@ -14,75 +14,83 @@ import autoTable from 'jspdf-autotable'
 ModuleRegistry.registerModules([AllCommunityModule])

 const props = defineProps({
- apiUrl: {
-   type: String,
-   default: ''
- },
- apiHeaders: {
-   type: Object,
-   default: () => ({})
- },
- data: {
-   type: Array,
-   default: () => []
- },
- columns: {
-   type: Array,
-   default: () => []
- },
- height: {
-   type: String,
-   default: '600px'
- },
- mobileHeight: {
-   type: String,
-   default: '400px'
- },
- enableExport: {
-   type: Boolean,
-   default: true
- },
- enableEdit: {
-   type: Boolean,
-   default: true
- },
- enableDelete: {
-   type: Boolean,
-   default: true
- },
- enableSearch: {
-   type: Boolean,
-   default: true
- },
- loading: {
-   type: Boolean,
-   default: false
- },
- customActions: {
-   type: Array,
-   default: () => []
- },
- dataProcessor: {
-   type: Function,
-   default: null
- },
- schemaMap: {
-   type: Object,
-   default: () => ({})
- },
- keepOriginalKeys: {
-   type: Boolean,
-   default: false
- }
+  apiUrl: {
+    type: String,
+    default: ''
+  },
+  apiHeaders: {
+    type: Object,
+    default: () => ({})
+  },
+  data: {
+    type: Array,
+    default: () => []
+  },
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  height: {
+    type: String,
+    default: '600px'
+  },
+  mobileHeight: {
+    type: String,
+    default: '400px'
+  },
+  enableExport: {
+    type: Boolean,
+    default: true
+  },
+  enableEdit: {
+    type: Boolean,
+    default: true
+  },
+  enableDelete: {
+    type: Boolean,
+    default: true
+  },
+  enableSearch: {
+    type: Boolean,
+    default: true
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  customActions: {
+    type: Array,
+    default: () => []
+  },
+  dataProcessor: {
+    type: Function,
+    default: null
+  },
+  schemaMap: {
+    type: Object,
+    default: () => ({})
+  },
+  keepOriginalKeys: {
+    type: Boolean,
+    default: false
+  },
+  maxCellTextLength: {
+    type: Number,
+    default: 30
+  },
+  tableId: {
+    type: String,
+    default: 'default'
+  }
 })

 const emit = defineEmits([
- 'data-updated',
- 'row-selected',
- 'row-deleted',
- 'row-edited',
- 'export-completed',
- 'api-error'
+  'data-updated',
+  'row-selected',
+  'row-deleted',
+  'row-edited',
+  'export-completed',
+  'api-error'
 ])

 const { isMobile, isTablet, windowWidth } = useResponsive()
@@ -127,13 +135,42 @@ const processedData = computed(() => {
  })
 })

+// Custom cell renderer component for long text with tooltip
+const LongTextCellRenderer = {
+  template: `
+    <div 
+      :title="fullText" 
+      class="long-text-cell"
+      style="
+        white-space: nowrap; 
+        overflow: hidden; 
+        text-overflow: ellipsis;
+        cursor: help;
+      "
+    >
+      {{ displayText }}
+    </div>
+  `,
+  setup(props) {
+    const fullText = props.value || ''
+    const maxLength = props.colDef?.cellRendererParams?.maxLength || 30
+    const displayText = fullText.length > maxLength
+      ? fullText.substring(0, maxLength) + '...'
+      : fullText
+
+    return {
+      fullText,
+      displayText
+    }
+  }
+}
+
 // Dynamically infer columns from data when not provided
 const inferredColumns = computed(() => {
  if (Array.isArray(props.columns) && props.columns.length) return props.columns
  const rows = Array.isArray(processedData.value) ? processedData.value.slice(0, 50) : []
  if (!rows.length) return []

-  // Collect union of keys across sample rows
  const keySet = new Set()
  rows.forEach(r => {
    if (r && typeof r === 'object') {
@@ -143,7 +180,7 @@ const inferredColumns = computed(() => {
    }
  })

-  const keys = Array.from(keySet)
+  const keys = Array.from(keySet).filter(k => k !== 'action')
  const toTitle = (k) => k
    .replace(/_/g, ' ')
    .replace(/([a-z])([A-Z])/g, '$1 $2')
@@ -151,20 +188,28 @@ const inferredColumns = computed(() => {

  const isLikelyDate = (v) => {
    if (typeof v !== 'string') return false
-    // ISO or yyyy-mm-dd or timestamps in string
    if (/^\d{4}-\d{2}-\d{2}/.test(v) || /T\d{2}:\d{2}:\d{2}/.test(v)) return true
    const d = new Date(v)
    return !isNaN(d.getTime())
  }

-  return keys.map(k => {
-    // Detect type by scanning a few rows
-    let sampleVal = undefined
-    for (let i = 0; i < rows.length; i++) {
+  const isLongText = (samples) => {
+    return samples.some(val =>
+      typeof val === 'string' && val.length > props.maxCellTextLength
+    )
+  }
+
+  const columns = keys.map(k => {
+    const sampleValues = []
+    for (let i = 0; i < Math.min(10, rows.length); i++) {
      const val = rows[i]?.[k]
-      if (val !== undefined && val !== null) { sampleVal = val; break }
+      if (val !== undefined && val !== null) {
+        sampleValues.push(val)
+      }
    }

+    const sampleVal = sampleValues[0]
+
    const col = {
      field: k,
      headerName: toTitle(k),
@@ -173,6 +218,7 @@ const inferredColumns = computed(() => {
      editable: false,
      minWidth: 100,
      flex: 1,
+      suppressMovable: true
    }

    if (typeof sampleVal === 'number') {
@@ -189,16 +235,42 @@ const inferredColumns = computed(() => {
        const d = new Date(p.value)
        return isNaN(d.getTime()) ? String(p.value) : d.toISOString().split('T')[0]
      }
+    } else if (typeof sampleVal === 'string' && isLongText(sampleValues)) {
+      col.flex = 1
+      col.cellRenderer = LongTextCellRenderer
+      col.cellRendererParams = {
+        maxLength: props.maxCellTextLength
+      }
+      col.tooltipField = k
    } else {
      col.flex = 1
    }
+
    return col
  })
+
+  columns.push({
+    headerName: "ACTION",
+    field: "action",
+    sortable: false,
+    filter: false,
+    flex: 1,
+    minWidth: 100,
+    hide: false,
+    editable: false,
+    cellRenderer: actionButtonsRenderer,
+    suppressHeaderMenuButton: true,
+    suppressMovable: true,
+    lockPosition: true,
+    colId: "action"
+  })
+
+  return columns
 })

-// Build grid with inferred columns (or props.columns if provided)
-// Note: Passing inferredColumns.value at setup time; if you need live re-init on schema change, we can add a watcher.
-let gridSetup = useDataTableGrid(processedData, isMobile, isTablet, inferredColumns)
+
+let gridSetup = useDataTableGrid(processedData, isMobile, isTablet, inferredColumns, props.tableId)
+console.log('AgGridTable props.tableId:', props.tableId);
 const gridApi = gridSetup.gridApi
 const columnDefs = gridSetup.columnDefs
 const rowData = gridSetup.rowData
@@ -228,344 +300,339 @@ watch(
 )

 const fetchData = async () => {
- if (!props.apiUrl) return
- 
- isLoading.value = true
- try {
-   const response = await fetch(props.apiUrl, {
-     headers: {
-       'Content-Type': 'application/json',
-       ...props.apiHeaders
-     }
-   })
-   
-   if (!response.ok) {
-     throw new Error(`HTTP error! status: ${response.status}`)
-   }
-   
-   const result = await response.json()
-   
-   let processedApiData = []
-   if (props.dataProcessor && typeof props.dataProcessor === 'function') {
-     processedApiData = props.dataProcessor(result)
-   } else {
-     processedApiData = result.todos || result.data || result.users || result.products || (Array.isArray(result) ? result : [])
-   }
-   
-   fetchedData.value = Array.isArray(processedApiData) ? processedApiData : []
-   console.log('Fetched data set to:', fetchedData.value)
-   emit('data-updated', fetchedData.value)
- } catch (error) {
-   console.error('Error fetching data:', error)
-   emit('api-error', error)
- } finally {
-   isLoading.value = false
- }
+  if (!props.apiUrl) return
+
+  isLoading.value = true
+  try {
+    const response = await fetch(props.apiUrl, {
+      headers: {
+        'Content-Type': 'application/json',
+        ...props.apiHeaders
+      }
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    const result = await response.json()
+
+    let processedApiData = []
+    if (props.dataProcessor && typeof props.dataProcessor === 'function') {
+      processedApiData = props.dataProcessor(result)
+    } else {
+      processedApiData = result.todos || result.data || result.users || result.products || (Array.isArray(result) ? result : [])
+    }
+
+    fetchedData.value = Array.isArray(processedApiData) ? processedApiData : []
+    console.log('Fetched data set to:', fetchedData.value)
+    emit('data-updated', fetchedData.value)
+  } catch (error) {
+    console.error('Error fetching data:', error)
+    emit('api-error', error)
+  } finally {
+    isLoading.value = false
+  }
 }

 const saveToAPI = async (userData, isUpdate = false) => {
- if (!props.apiUrl) return
- 
- try {
-   const method = isUpdate ? 'PUT' : 'POST'
-   const url = isUpdate ? `${props.apiUrl}/${userData.id}` : props.apiUrl
-   
-   const response = await fetch(url, {
-     method,
-     headers: {
-       'Content-Type': 'application/json',
-       ...props.apiHeaders
-     },
-     body: JSON.stringify(userData)
-   })
-   
-   if (!response.ok) {
-     throw new Error(`HTTP error! status: ${response.status}`)
-   }
-   
-   await fetchData()
-   return await response.json()
- } catch (error) {
-   console.error('Error saving data:', error)
-   emit('api-error', error)
-   throw error
- }
+  if (!props.apiUrl) return
+
+  try {
+    const method = isUpdate ? 'PUT' : 'POST'
+    const url = isUpdate ? `${props.apiUrl}/${userData.id}` : props.apiUrl
+
+    const response = await fetch(url, {
+      method,
+      headers: {
+        'Content-Type': 'application/json',
+        ...props.apiHeaders
+      },
+      body: JSON.stringify(userData)
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    await fetchData()
+    return await response.json()
+  } catch (error) {
+    console.error('Error saving data:', error)
+    emit('api-error', error)
+    throw error
+  }
 }

 const deleteFromAPI = async (id) => {
- if (!props.apiUrl) return
- 
- try {
-   const response = await fetch(`${props.apiUrl}/${id}`, {
-     method: 'DELETE',
-     headers: {
-       'Content-Type': 'application/json',
-       ...props.apiHeaders
-     }
-   })
-   
-   if (!response.ok) {
-     throw new Error(`HTTP error! status: ${response.status}`)
-   }
-   
-   await fetchData()
-   return true
- } catch (error) {
-   console.error('Error deleting data:', error)
-   emit('api-error', error)
-   throw error
- }
+  if (!props.apiUrl) return
+
+  try {
+    const response = await fetch(`${props.apiUrl}/${id}`, {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+        ...props.apiHeaders
+      }
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    await fetchData()
+    return true
+  } catch (error) {
+    console.error('Error deleting data:', error)
+    emit('api-error', error)
+    throw error
+  }
 }

 const {
- setupGlobalHandlers,
- cleanupGlobalHandlers,
- exportToCSV,
- exportToExcel,
- saveUser,
- confirmDelete,
- cancelDelete,
- showDetailsDialog,
- selectedRowData,
- deleteRowData,
- showDeleteDialog,
- deleteRow
-} = useDataTableActions(gridApi, rowData)
+  setupGlobalHandlers,
+  cleanupGlobalHandlers,
+  exportToCSV,
+  exportToExcel,
+  saveUser,
+  confirmDelete,
+  cancelDelete,
+  showDetailsDialog,
+  selectedRowData,
+  deleteRowData,
+  showDeleteDialog,
+  deleteRow
+} = useDataTableActions(gridApi, rowData, props.tableId)

 const handleSaveUser = async (updatedData) => {
-try {
-  // Optimistic update: update grid first
-  saveUser(updatedData)
+  try {
+    // Optimistic update: update grid first
+    saveUser(updatedData)

-  if (props.apiUrl) {
-    try {
-      await saveToAPI(updatedData, updatedData.id ? true : false)
-    } catch (apiErr) {
-      console.error('API save failed, refetching to sync:', apiErr)
-      // Re-sync from server on failure
-      await fetchData()
-      emit('api-error', apiErr)
-      return
+    if (props.apiUrl) {
+      try {
+        await saveToAPI(updatedData, updatedData.id ? true : false)
+      } catch (apiErr) {
+        console.error('API save failed, refetching to sync:', apiErr)
+        // Re-sync from server on failure
+        await fetchData()
+        emit('api-error', apiErr)
+        return
+      }
    }
+    emit('row-edited', updatedData)
+  } catch (error) {
+    console.error('Error saving user:', error)
  }
-  emit('row-edited', updatedData)
-} catch (error) {
-  console.error('Error saving user:', error)
-}
 }

 const handleConfirmDelete = async () => {
-try {
-  // Optimistic remove from grid first
-  confirmDelete()
+  try {
+    // Optimistic remove from grid first
+    confirmDelete()

-  if (props.apiUrl && deleteRowData.value?.id) {
-    try {
-      await deleteFromAPI(deleteRowData.value.id)
-    } catch (apiErr) {
-      console.error('API delete failed, refetching to restore:', apiErr)
-      await fetchData()
-      emit('api-error', apiErr)
-      return
+    if (props.apiUrl && deleteRowData.value?.id) {
+      try {
+        await deleteFromAPI(deleteRowData.value.id)
+      } catch (apiErr) {
+        console.error('API delete failed, refetching to restore:', apiErr)
+        await fetchData()
+        emit('api-error', apiErr)
+        return
+      }
    }
+    emit('row-deleted', deleteRowData.value)
+  } catch (error) {
+    console.error('Error deleting row:', error)
  }
-  emit('row-deleted', deleteRowData.value)
-} catch (error) {
-  console.error('Error deleting row:', error)
-}
 }

 const quickFilter = ref('')

 watch(quickFilter, (newValue) => {
- if (gridApi.value) {
-   gridApi.value.setGridOption('quickFilterText', newValue || '')
- }
+  if (gridApi.value) {
+    gridApi.value.setGridOption('quickFilterText', newValue || '')
+  }
 }, { immediate: false })

 const onGridReady = params => {
- gridReady(params)
- setupGlobalHandlers()
- 
- if (props.apiUrl) {
-   fetchData()
- }
+  gridReady(params)
+  setupGlobalHandlers()

- // Observe container size to recalc pagination
- try {
-   const container = gridContainer?.value
-   if (container && typeof ResizeObserver !== 'undefined') {
-     const ro = new ResizeObserver(() => {
-       if (gridApi.value) {
-         updatePagination()
-         setTimeout(() => {
-           gridApi.value?.sizeColumnsToFit?.()
-         }, 50)
-       }
-     })
-     ro.observe(container)
-   }
- } catch (e) {
-   // no-op
- }
+  setTimeout(() => {
+    const allPageSizeWrappers = document.querySelectorAll('.ag-paging-page-size .ag-picker-field-wrapper');
+    allPageSizeWrappers.forEach((pageSizeWrapper, index) => {
+      if (!pageSizeWrapper.hasAttribute('data-fixed')) {
+        pageSizeWrapper.setAttribute('data-fixed', 'true');
+
+        pageSizeWrapper.addEventListener('mousedown', (e) => {
+          if (e.button !== 0) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+          }
+          e.preventDefault();
+          e.stopPropagation();
+          const isExpanded = pageSizeWrapper.getAttribute('aria-expanded') === 'true';
+          pageSizeWrapper.setAttribute('aria-expanded', !isExpanded);
+          pageSizeWrapper.classList.toggle('ag-picker-collapsed', isExpanded);
+          pageSizeWrapper.classList.toggle('ag-picker-expanded', !isExpanded);
+          const selectList = pageSizeWrapper.parentNode.querySelector('[id^="ag-select-list"]');
+          if (selectList) {
+            selectList.style.display = isExpanded ? 'none' : 'block';
+          }
+        });
+
+        pageSizeWrapper.addEventListener('contextmenu', (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        });
+      }
+    });
+  }, 1000);
+
+  if (props.apiUrl) {
+    fetchData()
+  }
+
+  try {
+    const container = gridContainer?.value
+    if (container && typeof ResizeObserver !== 'undefined') {
+      const ro = new ResizeObserver(() => {
+        if (gridApi.value) {
+          updatePagination()
+          setTimeout(() => {
+            gridApi.value?.sizeColumnsToFit?.()
+          }, 50)
+        }
+      })
+      ro.observe(container)
+    }
+  } catch (e) { }
 }

 const handleQuickFilterUpdate = (value) => {
- quickFilter.value = value || ''
- 
- if (gridApi.value) {
-   gridApi.value.setGridOption('quickFilterText', value || '')
- }
+  quickFilter.value = value || ''
+
+  if (gridApi.value) {
+    gridApi.value.setGridOption('quickFilterText', value || '')
+  }
 }

 const refreshData = () => {
- if (props.apiUrl) {
-   fetchData()
- }
+  if (props.apiUrl) {
+    fetchData()
+  }
 }

 defineExpose({
- refreshData,
- fetchData,
- gridApi
+  refreshData,
+  fetchData,
+  gridApi
 })

 onMounted(() => {
- setupGlobalHandlers()
- window.addEventListener('resize', handleResize)
+  setupGlobalHandlers()
+  window.addEventListener('resize', handleResize)
 })

 onUnmounted(() => {
- cleanupGlobalHandlers()
- window.removeEventListener('resize', handleResize)
+  cleanupGlobalHandlers()
+  window.removeEventListener('resize', handleResize)
 })

 const handleResize = () => {
- windowWidth.value = window.innerWidth
- if (gridApi.value) {
-   updateColumnVisibility()
-   updatePagination()
-   setTimeout(() => {
-     if (gridApi.value && gridApi.value.sizeColumnsToFit) {
-       gridApi.value.sizeColumnsToFit()
-     }
-   }, 100)
- }
+  windowWidth.value = window.innerWidth
+  if (gridApi.value) {
+    updateColumnVisibility()
+    updatePagination()
+    setTimeout(() => {
+      if (gridApi.value) {
+        gridApi.value.sizeColumnsToFit();
+      }
+    }, 100)
+  }
 }

-const exportToPDF = () => {
- if (!gridApi.value) {
-   console.error('Grid API not available')
-   return
- }

- try {
-   const doc = new jsPDF()
-   const rowDataForPDF = []
-   const headers = []
-   
-   columnDefs.value.forEach(col => {
-     if (col.headerName && col.field && col.field !== 'action') {
-       headers.push(col.headerName)
-     }
-   })
-   
-   gridApi.value.forEachNodeAfterFilterAndSort(node => {
-     const row = []
-     columnDefs.value.forEach(col => {
-       if (col.field && col.field !== 'action') {
-         let value = node.data[col.field] || ''
-         row.push(value)
-       }
-     })
-     rowDataForPDF.push(row)
-   })
-   
-   autoTable(doc, {
-     head: [headers],
-     body: rowDataForPDF,
-     styles: { 
-       fontSize: 8,
-       cellPadding: 2
-     },
-     headStyles: { 
-       fillColor: [41, 128, 185],
-       textColor: 255,
-       fontStyle: 'bold'
-     },
-     alternateRowStyles: {
-       fillColor: [245, 245, 245]
-     },
-     margin: { top: 20 }
-   })
-   
-   doc.save(`data-table-${new Date().toISOString().split('T')[0]}.pdf`)
-   emit('export-completed', 'pdf')
- } catch (error) {
-   console.error('Error exporting PDF:', error)
- }
+const exportToPDF = () => {
+  if (!gridApi.value) {
+    console.error('Grid API not available')
+    return
+  }
+
+  try {
+    const doc = new jsPDF()
+    const rowDataForPDF = []
+    const headers = []
+
+    columnDefs.value.forEach(col => {
+      if (col.headerName && col.field && col.field !== 'action') {
+        headers.push(col.headerName)
+      }
+    })
+
+    gridApi.value.forEachNodeAfterFilterAndSort(node => {
+      const row = []
+      columnDefs.value.forEach(col => {
+        if (col.field && col.field !== 'action') {
+          let value = node.data[col.field] || ''
+          row.push(value)
+        }
+      })
+      rowDataForPDF.push(row)
+    })
+
+    autoTable(doc, {
+      head: [headers],
+      body: rowDataForPDF,
+      styles: {
+        fontSize: 8,
+        cellPadding: 2
+      },
+      headStyles: {
+        fillColor: [41, 128, 185],
+        textColor: 255,
+        fontStyle: 'bold'
+      },
+      alternateRowStyles: {
+        fillColor: [245, 245, 245]
+      },
+      margin: { top: 20 }
+    })
+
+    doc.save(`data-table-${new Date().toISOString().split('T')[0]}.pdf`)
+    emit('export-completed', 'pdf')
+  } catch (error) {
+    console.error('Error exporting PDF:', error)
+  }
 }
 </script>

 <template>
- <v-card class="elevation-2">
-   <v-overlay
-     v-model="isLoading"
-     contained
-     class="align-center justify-center"
-   >
-     <v-progress-circular
-       indeterminate
-       size="64"
-       color="primary"
-     ></v-progress-circular>
-   </v-overlay>
+  <v-card class="elevation-2">
+    <v-overlay v-model="isLoading" contained class="align-center justify-center">
+      <v-progress-circular indeterminate size="64" color="primary"></v-progress-circular>
+    </v-overlay>

-   <DataTableHeader
-     v-if="enableSearch || enableExport"
-     :is-mobile="isMobile"
-     :is-tablet="isTablet"
-     :quick-filter="quickFilter"
-     :enable-search="enableSearch"
-     :enable-export="enableExport"
-     @update:quick-filter="handleQuickFilterUpdate"
-     @export-csv="exportToCSV"
-     @export-excel="exportToExcel"
-     @export-pdf="exportToPDF"
-   />
+    <DataTableHeader v-if="enableSearch || enableExport" :is-mobile="isMobile" :is-tablet="isTablet"
+      :quick-filter="quickFilter" :enable-search="enableSearch" :enable-export="enableExport"
+      @update:quick-filter="handleQuickFilterUpdate" @export-csv="exportToCSV" @export-excel="exportToExcel"
+      @export-pdf="exportToPDF" />

-   <v-divider v-if="enableSearch || enableExport" />
+    <v-divider v-if="enableSearch || enableExport" />

-   <v-card-text class="pa-0">
-    <AgGridVue
-      class="vuetify-grid ag-theme-alpine-dark"
-      :style="`height:${isMobile ? mobileHeight : height}; width:100%`"
-      :columnDefs="columnDefs"
-      :rowData="processedData"
-      :defaultColDef="defaultColDef"
-      :gridOptions="gridOptions"
-      @grid-ready="onGridReady"
-      @cell-value-changed="onCellValueChanged"
-    />
-  </v-card-text>
+    <v-card-text class="pa-0">
+      <AgGridVue ref="gridContainer" class="vuetify-grid ag-theme-alpine-dark"
+        :style="`height:${isMobile ? mobileHeight : height}; width:100%`" :columnDefs="columnDefs"
+        :rowData="processedData" :defaultColDef="defaultColDef" :gridOptions="gridOptions" @grid-ready="onGridReady"
+        @cell-value-changed="onCellValueChanged" />
+    </v-card-text>

-   <UserDetailsDialog
-     v-if="enableEdit"
-     v-model="showDetailsDialog"
-     :selected-row-data="selectedRowData"
-     :columns="columnDefs"
-     :is-mobile="isMobile"
-     @save-user="handleSaveUser"
-   />
+    <UserDetailsDialog v-if="enableEdit" v-model="showDetailsDialog" :selected-row-data="selectedRowData"
+      :columns="columnDefs" :is-mobile="isMobile" @save-user="handleSaveUser" />

-   <ConfirmDeleteDialog
-     v-if="enableDelete"
-     v-model="showDeleteDialog"
-     :selected-row-data="deleteRowData"
-     :columns="columnDefs"
-     :is-mobile="isMobile"
-     @confirm="handleConfirmDelete"
-     @cancel="cancelDelete"
-   />
- </v-card>
-</template>
+    <ConfirmDeleteDialog v-if="enableDelete" v-model="showDeleteDialog" :selected-row-data="deleteRowData"
+      :columns="columnDefs" :is-mobile="isMobile" @confirm="handleConfirmDelete" @cancel="cancelDelete" />
+  </v-card>
+</template>
--- a/resources/js/views/demos/forms/tables/data-table/composables/useDataTableGrid.js
+++ b/resources/js/views/demos/forms/tables/data-table/composables/useDataTableGrid.js
@@ -470,40 +470,42 @@ export function useDataTableGrid(
    return []
  }

-  const processCustomColumns = (columns) => {
-    if (!Array.isArray(columns) || columns.length === 0) {
-      const base = createDefaultColumns();
-      return ensureSingleSelectionColumn(base);
-    }
+ const processCustomColumns = (columns) => {
+ if (!Array.isArray(columns) || columns.length === 0) {
+   const base = createDefaultColumns();
+   return ensureSingleSelectionColumn(base);
+ }

-    const processedColumns = columns.map(col => ({
-      ...col,
-      // Default to inline-editable unless explicitly disabled, skip action column
-      editable: col.field === 'action' ? false : (col.editable !== undefined ? col.editable : true),
-      suppressHeaderMenuButton: col.suppressHeaderMenuButton !== undefined ? col.suppressHeaderMenuButton : false,
-    }));
+ const processedColumns = columns.map(col => ({
+   ...col,
+   editable: col.field === 'action' ? false : (col.editable !== undefined ? col.editable : true),
+   suppressHeaderMenuButton: col.suppressHeaderMenuButton !== undefined ? col.suppressHeaderMenuButton : false,
+ }));

-    const withSelection = ensureSingleSelectionColumn(processedColumns);
+ const withSelection = ensureSingleSelectionColumn(processedColumns);
+ 
+ const actionIndex = withSelection.findIndex(col => col.field === 'action');
+ 
+ if (actionIndex !== -1) {
+   const actionColumn = withSelection.splice(actionIndex, 1)[0];
+   withSelection.push(actionColumn);
+ } else {
+   withSelection.push({
+     headerName: "ACTION",
+     field: "action",
+     sortable: false,
+     filter: false,
+     flex: 1,
+     minWidth: 100,
+     hide: false,
+     editable: false,
+     cellRenderer: actionButtonsRenderer,
+     suppressHeaderMenuButton: true,
+   });
+ }

-    const hasActionColumn = processedColumns.some(col => col.field === 'action');
-    
-    if (!hasActionColumn) {
-      withSelection.push({
-        headerName: "ACTION",
-        field: "action",
-        sortable: false,
-        filter: false,
-        flex: 1,
-        minWidth: 100,
-        hide: false,
-        editable: false,
-        cellRenderer: actionButtonsRenderer,
-        suppressHeaderMenuButton: true,
-      });
-    }
-
-    return withSelection;
-  };
+ return withSelection;
+};

  const columnDefs = computed(() => {
    const cols = resolveColumns()
@@ -529,6 +531,7 @@ export function useDataTableGrid(
    suppressHeaderMenuButton: false,
  }));

+  // 🔥 FIX: Improved gridOptions with better pagination settings
  const gridOptions = computed(() => ({
    theme: "legacy",
    headerHeight: isMobile.value ? 48 : 56,
@@ -541,9 +544,14 @@ export function useDataTableGrid(
    rowSelection: 'multiple',
    rowMultiSelectWithClick: true,
    suppressRowClickSelection: false,
+    
+    // 🔥 FIXED PAGINATION SETTINGS
    pagination: true,
-    paginationPageSize: isMobile.value ? 5 : 10,
-    paginationPageSizeSelector: isMobile.value ? [5, 10, 20] : [5, 10, 20, 50],
+    paginationPageSize: isMobile.value ? 10 : 20,
+    paginationPageSizeSelector: [5, 10, 20, 50, 100],
+    paginationAutoPageSize: false, // 🔥 KEY: Disable auto page sizing
+    suppressPaginationPanel: false, // 🔥 KEY: Show pagination controls
+    
    enableCellTextSelection: true,
    suppressHorizontalScroll: false,
    alwaysShowHorizontalScroll: false,
@@ -597,29 +605,18 @@ export function useDataTableGrid(
    }
  };

+  // 🔥 SIMPLIFIED UPDATE PAGINATION - Only for responsive page sizes
  const updatePagination = () => {
    if (!gridApi.value) return;

    try {
-      const gui = gridApi.value.getGui && gridApi.value.getGui();
-      const containerHeight = gui ? gui.clientHeight : 0;
-
-      const headerH = Number(gridOptions.value.headerHeight || (isMobile.value ? 48 : 56));
-      // Estimate footer height based on overrides (mobile/desktop)
-      const footerH = isMobile.value ? 48 : 56;
-      const rowH = Number(gridOptions.value.rowHeight || (isMobile.value ? 44 : 52));
-      const padding = 8;
-
-      let available = containerHeight - headerH - footerH - padding;
-      if (!Number.isFinite(available) || available <= 0) {
-        available = (isMobile.value ? 360 : 520) - headerH - footerH - padding;
-      }
-
-      let rowsPerPage = Math.floor(available / rowH);
-      rowsPerPage = Math.max(3, Math.min(rowsPerPage, 100));
-
+      // Simple responsive pagination size adjustment
+      const newPageSize = isMobile.value ? 10 : 20;
+      
      if (typeof gridApi.value.paginationSetPageSize === 'function') {
-        gridApi.value.paginationSetPageSize(rowsPerPage);
+        gridApi.value.paginationSetPageSize(newPageSize);
+      } else if (typeof gridApi.value.setGridOption === 'function') {
+        gridApi.value.setGridOption('paginationPageSize', newPageSize);
      }
    } catch (error) {
      console.warn('Error updating pagination:', error);
@@ -632,7 +629,7 @@ export function useDataTableGrid(
    console.log('Grid API set:', gridApi.value)

    updateColumnVisibility();
-    updatePagination();
+    // 🔥 FIX: Don't call updatePagination immediately - let AG Grid handle it
    
    setTimeout(() => {
      if (gridApi.value && gridApi.value.sizeColumnsToFit) {
@@ -664,7 +661,7 @@ export function useDataTableGrid(

  watch([isMobile, isTablet], () => {
    updateColumnVisibility();
-    updatePagination();
+    updatePagination(); // Only for responsive size changes
  });

  watch(data, (newData) => {
@@ -687,7 +684,6 @@ export function useDataTableGrid(
 }

 // Helpers
-
 function ensureSingleSelectionColumn(columns) {
  if (!Array.isArray(columns)) return columns;

@@ -714,6 +710,4 @@ function ensureSingleSelectionColumn(columns) {
  }

  return unique;
-}
-
-// removed selection column injection
+}