fix:gantt chart styles

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
+}