pagination

src_generic/components/ResourceView.tsx

@@ -11,6 +11,8 @@ interface ResourceViewProps {
   onNavigateToResource?: (resourceName: string, id: string) => void;
 }
 
+import { GridPaginationModel } from '@mui/x-data-grid';
+
 export default function ResourceView({ config, onNavigateToResource }: ResourceViewProps) {
   const { id } = useParams();
   const location = useLocation();
@@ -21,11 +23,26 @@ export default function ResourceView({ config, onNavigateToResource }: ResourceV
   const isView = !!id && !isEdit;
   const isList = !id && !isCreate;
 
+  const [paginationModel, setPaginationModel] = React.useState<GridPaginationModel>({
+    page: 0,
+    pageSize: 10,
+  });
+
   const { useList, useRead, useCreate, useUpdate, useDelete } = useResource(config);
 
-  const listQuery = useList();
+  // Determine query parameters based on pagination config
+  const queryParams = React.useMemo(() => {
+    if (!config.pagination) return {};
+    return {
+      skip: paginationModel.page * paginationModel.pageSize,
+      limit: paginationModel.pageSize,
+    };
+  }, [config.pagination, paginationModel]);
+
+  const listQuery = useList(queryParams);
   const itemQuery = useRead(id || "");
   
+  const paginatedData = listQuery.data || { data: [], total: undefined };
   const createMutation = useCreate();
   const updateMutation = useUpdate();
   const deleteMutation = useDelete();
@@ -65,7 +82,11 @@ export default function ResourceView({ config, onNavigateToResource }: ResourceV
       {isList ? (
         <EnhancedTable
           config={config}
-          data={listQuery.data || []}
+          data={paginatedData.data || []}
+          total={paginatedData.total}
+          paginationModel={paginationModel}
+          onPaginationModelChange={setPaginationModel}
+          loading={listQuery.isFetching}
           onEdit={handleEdit}
           onDelete={handleDelete}
           onCreate={handleCreate}