Add AgGridView component and integrate with ObjectListView

hotlong · hotlong · commit b9e490bea0b6 · 2026-01-09T20:33:12.000+08:00
Introduces a new AgGridView component using ag-grid-react and ag-grid-community, updates dependencies, and replaces GridView with AgGridView in ObjectListView for enhanced table features. Also updates package scripts and exports AgGridView from the UI package.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,11 +6,11 @@
     "examples/*"
   ],
   "scripts": {
-    "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\" --kill-others --names \"SERVER,CLIENT\" -c \"magenta,blue\"",
-    "start": "npm run start --workspace=@objectql/server",
-    "dev:server": "npm run dev --workspace=@objectql/server",
-    "dev:client": "npm run dev --workspace=@objectql/client",
+    "dev": "concurrently \"npm run server\" \"npm run client\" --kill-others --names \"SERVER,CLIENT\" -c \"magenta,blue\"",
+    "server": "npm run dev --workspace=@objectql/server",
+    "client": "npm run dev --workspace=@objectql/client",
     "build": "tsc -b && npm run build --workspaces",
+    "start": "npm run start --workspace=@objectql/server",
     "test": "npm run test --workspaces",
     "changeset": "changeset",
     "version": "changeset version",
diff --git a/packages/client/src/components/dashboard/ObjectListView.tsx b/packages/client/src/components/dashboard/ObjectListView.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Button, Badge, Modal, Spinner, GridView, Input } from '@objectql/ui';
+import { Button, Badge, Modal, Spinner, AgGridView, Input } from '@objectql/ui';
 import { ObjectForm } from './ObjectForm';
 import { cn } from '../../lib/utils';
 // import { useRouter } from ... passed as prop
@@ -22,7 +22,7 @@ export function ObjectListView({ objectName, user, isCreating, navigate, objectS
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
     const [viewMode, setViewMode] = useState<'table' | 'grid'>('table');
-    const [sortConfig, setSortConfig] = useState<SortConfig[]>([]);
+    const [sortConfig] = useState<SortConfig[]>([]);
     const [searchTerm, setSearchTerm] = useState('');
     const [showFilter, setShowFilter] = useState(false); // New state for filter visibility
     
@@ -173,41 +173,35 @@ export function ObjectListView({ objectName, user, isCreating, navigate, objectS
         .catch(err => alert(err.message));
     }
 
-    const generateColumns = () => {
-        // Prefer schema for columns, fallback to data inspection
-        let fields: string[] = [];
-        
-        if (objectSchema && objectSchema.fields) {
-            fields = Object.keys(objectSchema.fields);
-            if (!fields.includes('createdAt')) fields.push('createdAt');
-            if (!fields.includes('updatedAt')) fields.push('updatedAt');
-        } else if (data && data.length > 0) {
-            fields = Object.keys(data[0]).filter(key => !['_id', '__v'].includes(key));
-        }
+    const getAgGridColumns = () => {
+         // AgGrid Column Definitions
+         // Prefer schema for columns, fallback to data inspection
+         let fields: string[] = [];
+         if (objectSchema && objectSchema.fields) {
+             fields = Object.keys(objectSchema.fields);
+             if (!fields.includes('createdAt')) fields.push('createdAt');
+             if (!fields.includes('updatedAt')) fields.push('updatedAt');
+         } else if (data && data.length > 0) {
+             fields = Object.keys(data[0]).filter(key => !['_id', '__v'].includes(key));
+         }
 
-        return fields.map(key => {
-            const field = objectSchema?.fields?.[key];
-            const type = getFieldType(key) as 'text' | 'number' | 'boolean' | 'date' | 'select' | 'badge';
-            
-            return {
-                id: key,
-                label: getFieldLabel(key),
-                type: type,
-                width: type === 'boolean' ? 80 : type === 'date' ? 150 : type === 'number' ? 120 : 200,
-                editable: !['id', 'createdBy', 'updatedBy', 'createdAt', 'updatedAt'].includes(key),
-                sortable: true,
-                ...(type === 'badge' && field?.options ? {
-                    options: field.options.map((opt: string) => ({
-                        value: opt,
-                        label: opt,
-                        variant: 'default'
-                    }))
-                } : {})
-            };
-        });
+         return fields.map(key => {
+             const type = getFieldType(key);
+             
+             return {
+                 field: key, // AgGrid uses 'field' instead of 'id'
+                 headerName: getFieldLabel(key),
+                 editable: !['id', 'createdBy', 'updatedBy', 'createdAt', 'updatedAt'].includes(key),
+                 sortable: true,
+                 filter: true,
+                 resizable: true,
+                 width: type === 'boolean' ? 100 : type === 'date' ? 180 : type === 'number' ? 120 : 200,
+                 // Optional: Custom cell renderers can be added here if needed
+             };
+         });
     };
 
-    const columns = generateColumns();
+    const columns = getAgGridColumns();
 
     return (
         <div className="flex flex-col h-full bg-stone-50">
@@ -303,16 +297,17 @@ export function ObjectListView({ objectName, user, isCreating, navigate, objectS
                         </Button>
                     </div>
                 ) : (
-                    <GridView
-                        columns={columns}
-                        data={data}
-                        onRowClick={(row: any) => navigate(`/object/${objectName}/${row.id || row._id}`)}
-                        onCellEdit={handleCellEdit}
-                        onDelete={handleDelete}
-                        emptyMessage={`No ${label.toLowerCase()} found`}
-                        enableSorting={true}
-                        onSortChange={setSortConfig}
-                    />
+                    <div className="h-full w-full">
+                        <AgGridView
+                            columns={columns}
+                            data={data}
+                            onRowClick={(row: any) => navigate(`/object/${objectName}/${row.id || row._id}`)}
+                            onCellEdit={handleCellEdit}
+                            onDelete={handleDelete}
+                            enableSorting={true}
+                            className="h-full w-full"
+                        />
+                    </div>
                 )}
             </div>
 
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -35,6 +35,8 @@
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@tanstack/react-table": "^8.21.3",
+    "ag-grid-community": "^35.0.0",
+    "ag-grid-react": "^35.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.562.0",
diff --git a/packages/ui/src/components/grid/AgGridView.tsx b/packages/ui/src/components/grid/AgGridView.tsx
@@ -0,0 +1,119 @@
+import { AgGridReact } from 'ag-grid-react';
+import { AllCommunityModule, ModuleRegistry, ColDef,  themeQuartz } from 'ag-grid-community'; 
+import { useMemo, useEffect, useState, useRef } from 'react';
+import { cn } from '../../lib/utils'; // Assuming you have a utils file
+
+// Register all Community features
+ModuleRegistry.registerModules([AllCommunityModule]);
+
+interface AgGridViewProps {
+    data: any[];
+    columns: ColDef[]; // Use AgGrid's ColDef
+    onRowClick?: (row: any) => void;
+    onCellEdit?: (rowIndex: number, columnId: string, value: any) => void;
+    onDelete?: (row: any) => void; // Add onDelete prop
+    enableSorting?: boolean;
+    className?: string; // Allow custom class names
+    style?: React.CSSProperties; // Allow custom styles
+    theme?: string; // Allow theme override
+}
+
+export const AgGridView = ({
+    data,
+    columns,
+    onRowClick,
+    onCellEdit,
+    onDelete,
+    enableSorting = true,
+    className,
+    style,
+    theme = "ag-theme-quartz" // Default theme
+}: AgGridViewProps) => {
+
+    const gridRef = useRef<AgGridReact>(null);
+
+    // Default column definitions
+    const defaultColDef = useMemo<ColDef>(() => {
+        return {
+            flex: 1,
+            minWidth: 100,
+            sortable: enableSorting,
+            filter: true, // Enable filtering by default for AgGrid
+            resizable: true,
+            editable: !!onCellEdit, // Enable editing if handler provided (can be overridden per column)
+        };
+    }, [enableSorting, onCellEdit]);
+
+    // augment columns with actions if onDelete provided
+    const gridColumns = useMemo(() => {
+        if (!onDelete) return columns;
+        return [
+            ...columns,
+            {
+                headerName: '',
+                field: 'actions',
+                width: 80,
+                minWidth: 80,
+                maxWidth: 80,
+                sortable: false,
+                filter: false,
+                editable: false,
+                cellRenderer: (params: any) => (
+                    <button 
+                        onClick={(e) => {
+                            e.stopPropagation(); // Prevent row click
+                            onDelete(params.data);
+                        }}
+                        className="text-red-600 hover:text-red-800 p-1"
+                    >
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path></svg>
+                    </button>
+                )
+            }
+        ];
+    }, [columns, onDelete]);
+
+
+    // Handle cell editing
+    const onCellValueChanged = (event: any) => {
+        if (onCellEdit && event.data) {
+             // AgGrid uses rowNode.rowIndex to identify rows. 
+             // Be mindful if you use sorting/filtering in AgGrid, rowIndex refers to the view index.
+             // If you need the original data index, you might need to manage IDs.
+             // Here we assume data order matches or we pass ID if needed.
+             // But simpler: just pass the row data ID if available, or index.
+             const rowIndex = event.rowIndex;
+             const colId = event.column.getColId();
+             const newValue = event.newValue;
+             onCellEdit(rowIndex, colId, newValue);
+        }
+    };
+
+    // Handle row click
+    const onRowClicked = (event: any) => {
+        if (onRowClick) {
+            onRowClick(event.data);
+        }
+    };
+
+
+    return (
+        <div 
+             className={cn( theme, className)} // Apply theme class
+             style={{ height: '100%', width: '100%', ...style }} // Ensure container has height
+        >
+            <AgGridReact
+                ref={gridRef}
+                rowData={data}
+                columnDefs={gridColumns}
+                defaultColDef={defaultColDef}
+                onCellValueChanged={onCellValueChanged}
+                onRowClicked={onRowClicked}
+                rowSelection="multiple" // Optional: Enable row selection
+                pagination={true} // Optional: Enable pagination
+                paginationPageSize={20}
+                paginationPageSizeSelector={[20, 50, 100]}
+            />
+        </div>
+    );
+};
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
@@ -23,6 +23,7 @@ export * from './components/Table';
 export * from './components/grid/DataTable';
 export * from './components/grid/DataTableFilter';
 export * from './components/grid/GridView';
+export * from './components/grid/AgGridView'; // Export updated wrapper
 export * from './components/AutoForm';
 
 export * from './components/Modal';
