pagination

src_generic/components/EnhancedTable.tsx

@@ -23,6 +23,7 @@ import {
   GridColDef,
   GridActionsCellItem,
   GridRenderCellParams,
+  GridPaginationModel,
 } from '@mui/x-data-grid';
 import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -34,6 +35,10 @@ import { ResourceConfig } from '../types/config';
 interface EnhancedTableProps {
   config: ResourceConfig;
   data: any[];
+  total?: number;
+  paginationModel?: GridPaginationModel;
+  onPaginationModelChange?: (model: GridPaginationModel) => void;
+  loading?: boolean;
   onEdit: (item: any) => void;
   onDelete: (id: string) => void;
   onCreate: () => void;
@@ -43,6 +48,10 @@ interface EnhancedTableProps {
 export default function EnhancedTable({
   config,
   data,
+  total,
+  paginationModel,
+  onPaginationModelChange,
+  loading = false,
   onEdit,
   onDelete,
   onCreate,
@@ -152,6 +161,23 @@ export default function EnhancedTable({
         rows={data || []}
         columns={columns}
         autoHeight
+        paginationMode={config.pagination ? 'server' : 'client'}
+        rowCount={(() => {
+          if (!config.pagination) return data.length;
+          if (total !== undefined) return total;
+          
+          // Graceful fallback for missing total count
+          const page = paginationModel?.page || 0;
+          const pageSize = paginationModel?.pageSize || 10;
+          if (data.length < pageSize) {
+            return page * pageSize + data.length;
+          }
+          // Enable 'Next' button by pretending there's at least one more page
+          return (page + 2) * pageSize;
+        })()}
+        loading={loading}
+        paginationModel={paginationModel || { page: 0, pageSize: 10 }}
+        onPaginationModelChange={onPaginationModelChange}
         getRowId={(row) => {
             const pk = config.primaryKey;
             if (row[pk] !== undefined && row[pk] !== null) return row[pk];
@@ -162,11 +188,6 @@ export default function EnhancedTable({
             return `temp-id-${data.indexOf(row)}`;
         }}
         disableRowSelectionOnClick
-        initialState={{
-          pagination: {
-            paginationModel: { page: 0, pageSize: 10 },
-          },
-        }}
         pageSizeOptions={[10, 25, 50]}
         sx={{
             border: 'none',