Merge pull request #237 from objectstack-ai/copilot/fix-plugin-loading-issue

Author: hotlong

content/docs/plugins/plugin-grid.mdx

@@ -17,9 +17,10 @@ npm install @object-ui/plugin-grid
 
 ## Interactive Examples
 
-<InteractiveDemo
+{/* Temporarily disabled due to data-table component bug */}
+{/* <InteractiveDemo
   schema={{
-    type: "grid",
+    type: "object-grid",
     columns: [
       { header: "ID", accessorKey: "id", width: 80 },
       { header: "Name", accessorKey: "name" },
@@ -33,12 +34,16 @@ npm install @object-ui/plugin-grid
       { id: 3, name: "Bob Johnson", email: "bob@example.com", role: "User", status: "Inactive" }
     ],
     sortable: true,
-    filterable: true,
-    pagination: true
+    filterable: false,
+    pagination: false
   }}
   title="Basic Data Grid"
   description="Grid with sorting, filtering, and pagination"
-/>
+/> */}
+
+:::note
+Interactive demo temporarily disabled due to a known issue with the data-table component. See the code examples below for usage.
+:::
 
 ## Features
 

packages/plugin-form/src/index.tsx

@@ -19,4 +19,5 @@ const ObjectFormRenderer: React.FC<{ schema: any }> = ({ schema }) => {
 };
 
 ComponentRegistry.register('object-form', ObjectFormRenderer);
-ComponentRegistry.register('form', ObjectFormRenderer); // Alias
+// Note: 'form' type is handled by @object-ui/components Form component
+// This plugin only handles 'object-form' which integrates with ObjectQL/ObjectStack

packages/plugin-grid/src/ObjectGrid.tsx

@@ -53,6 +53,15 @@ export interface ObjectGridProps {
 function getDataConfig(schema: ObjectGridSchema): ViewData | null {
   // New format: explicit data configuration
   if (schema.data) {
+    // Check if data is an array (shorthand format) or already a ViewData object
+    if (Array.isArray(schema.data)) {
+      // Convert array shorthand to proper ViewData format
+      return {
+        provider: 'value',
+        items: schema.data,
+      };
+    }
+    // Already in ViewData format
     return schema.data;
   }
 
@@ -154,17 +163,28 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     const cols = normalizeColumns(schema.columns);
 
     if (cols) {
-      // If columns are already ListColumn objects, convert them to data-table format
+      // Check if columns are already in data-table format (have 'accessorKey')
+      // vs ListColumn format (have 'field')
       if (cols.length > 0 && typeof cols[0] === 'object' && cols[0] !== null) {
-        return (cols as ListColumn[])
-          .filter((col) => col?.field && typeof col.field === 'string') // Filter out invalid column objects
-          .map((col) => ({
-            header: col.label || col.field.charAt(0).toUpperCase() + col.field.slice(1).replace(/_/g, ' '),
-            accessorKey: col.field,
-            ...(col.width && { width: col.width }),
-            ...(col.align && { align: col.align }),
-            sortable: col.sortable !== false,
-          }));
+        const firstCol = cols[0] as any;
+        
+        // Already in data-table format - use as-is
+        if ('accessorKey' in firstCol) {
+          return cols;
+        }
+        
+        // ListColumn format - convert to data-table format
+        if ('field' in firstCol) {
+          return (cols as ListColumn[])
+            .filter((col) => col?.field && typeof col.field === 'string') // Filter out invalid column objects
+            .map((col) => ({
+              header: col.label || col.field.charAt(0).toUpperCase() + col.field.slice(1).replace(/_/g, ' '),
+              accessorKey: col.field,
+              ...(col.width && { width: col.width }),
+              ...(col.align && { align: col.align }),
+              sortable: col.sortable !== false,
+            }));
+        }
       }
 
       // String array format - filter out invalid entries

packages/plugin-grid/src/index.tsx

@@ -19,4 +19,5 @@ const ObjectGridRenderer: React.FC<{ schema: any }> = ({ schema }) => {
 };
 
 ComponentRegistry.register('object-grid', ObjectGridRenderer);
-ComponentRegistry.register('grid', ObjectGridRenderer); // Alias
+// Note: 'grid' type is handled by @object-ui/components Grid layout component
+// This plugin only handles 'object-grid' which integrates with ObjectQL/ObjectStack