Add documentation and examples for row editing feature

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

content/docs/plugins/plugin-grid.mdx

@@ -228,6 +228,41 @@ Add action buttons to each row:
 }
 ```
 
+### Inline Editing
+
+Enable inline cell editing for quick data updates:
+
+```json
+{
+  "type": "object-grid",
+  "objectName": "users",
+  "columns": [
+    { "header": "ID", "accessorKey": "id", "editable": false },
+    { "header": "Name", "accessorKey": "name" },
+    { "header": "Email", "accessorKey": "email" },
+    { "header": "Status", "accessorKey": "status" }
+  ],
+  "editable": true,
+  "onCellChange": "handleCellChange"
+}
+```
+
+**Features:**
+- Double-click or press Enter on a cell to start editing
+- Press Enter to save changes
+- Press Escape to cancel editing
+- Column-level control: Set `editable: false` on specific columns to prevent editing
+- Callback support: Use `onCellChange` to handle cell value updates
+
+**Example Handler:**
+```javascript
+function handleCellChange(rowIndex, columnKey, newValue, row) {
+  console.log(`Cell at row ${rowIndex}, column ${columnKey} changed to:`, newValue);
+  console.log('Full row data:', row);
+  // Update your data source here
+}
+```
+
 ## TypeScript Support
 
 ```plaintext

packages/components/src/stories-json/data-table.stories.tsx

@@ -58,3 +58,31 @@ export const FullFeatures: Story = {
     },
     render: (args) => <SchemaRenderer schema={args} />
   };
+
+export const EditableTable: Story = {
+    args: {
+      type: 'data-table',
+      caption: 'Editable Product Inventory',
+      searchable: false,
+      pagination: false,
+      editable: true,
+      columns: [
+          { header: 'SKU', accessorKey: 'sku', width: '100px', editable: false },
+          { header: 'Product Name', accessorKey: 'name' },
+          { header: 'Price', accessorKey: 'price' },
+          { header: 'Stock', accessorKey: 'stock' }
+      ],
+      data: [
+          { sku: 'PROD-001', name: 'Laptop', price: '$1299.99', stock: 15 },
+          { sku: 'PROD-002', name: 'Mouse', price: '$29.99', stock: 120 },
+          { sku: 'PROD-003', name: 'Keyboard', price: '$79.99', stock: 45 },
+          { sku: 'PROD-004', name: 'Monitor', price: '$399.99', stock: 22 }
+      ],
+      onCellChange: (rowIndex: number, columnKey: string, newValue: any, row: any) => {
+        console.log('Cell edited:', { rowIndex, columnKey, newValue, row });
+        alert(`Updated ${columnKey} to "${newValue}" for ${row.name}`);
+      }
+    },
+    render: (args) => <SchemaRenderer schema={args} />
+  };
+

packages/components/src/stories-json/object-grid.stories.tsx

@@ -155,3 +155,40 @@ export const OpportunitiesGrid: Story = {
     className: 'w-full'
   } as any,
 };
+
+/**
+ * Editable Grid - Inline cell editing example
+ * 
+ * This story demonstrates inline editing capabilities:
+ * - Double-click or press Enter to edit a cell
+ * - Press Enter to save, Escape to cancel
+ * - ID column is read-only (editable: false)
+ */
+export const EditableGrid: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'User',
+    columns: [
+      { field: 'id', header: 'ID', width: 80, editable: false },
+      { field: 'name', header: 'Name', sortable: true },
+      { field: 'email', header: 'Email', sortable: true },
+      { field: 'role', header: 'Role', sortable: true },
+      { field: 'status', header: 'Status', sortable: true }
+    ],
+    data: [
+      { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'Active' },
+      { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'Active' },
+      { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'Inactive' }
+    ],
+    editable: true,
+    pagination: false,
+    className: 'w-full',
+    onCellChange: (rowIndex: number, columnKey: string, newValue: any, row: any) => {
+      console.log('Cell changed:', { rowIndex, columnKey, newValue, row });
+      // In a real application, you would update your data source here
+      // Example: await dataSource.update(row.id, { [columnKey]: newValue });
+    }
+  } as any,
+};
+

packages/plugin-grid/README.md

@@ -244,6 +244,46 @@ const schema = {
 };
 ```
 
+### Inline Editing
+
+Enable inline cell editing for quick updates:
+
+```typescript
+const schema = {
+  type: 'object-grid',
+  objectName: 'users',
+  columns: [
+    { header: 'ID', accessorKey: 'id', editable: false },  // Read-only column
+    { header: 'Name', accessorKey: 'name' },  // Editable
+    { header: 'Email', accessorKey: 'email' },  // Editable
+    { header: 'Status', accessorKey: 'status' }  // Editable
+  ],
+  editable: true,  // Enable editing globally
+  onCellChange: (rowIndex, columnKey, newValue, row) => {
+    console.log(`Cell at row ${rowIndex}, column ${columnKey} changed to:`, newValue);
+    console.log('Full row data:', row);
+    // Update your data source here
+    // Example: await dataSource.update(row.id, { [columnKey]: newValue });
+  }
+};
+```
+
+**Inline Editing Features:**
+- **Double-click to edit**: Double-click any editable cell to enter edit mode
+- **Keyboard shortcuts**: 
+  - Press `Enter` on a focused cell to start editing
+  - Press `Enter` while editing to save changes
+  - Press `Escape` to cancel editing
+- **Column-level control**: Set `editable: false` on specific columns to prevent editing
+- **Visual feedback**: Editable cells show hover state to indicate they can be edited
+- **Automatic focus**: Input field is automatically focused and selected when entering edit mode
+
+**Use Cases:**
+- Quick data corrections
+- Batch data entry
+- Spreadsheet-like editing experience
+- Real-time updates with backend synchronization
+
 ## TypeScript Support
 
 ```typescript