Unify table and grid modes into single ObjectTableSchema

Merged ObjectGridSchema properties into ObjectTableSchema for a unified schema:
- Single type accepts both 'object-table' and 'object-grid'
- Grid features (editable, keyboardNavigation, frozenColumns, resizableColumns)
  are now optional properties in ObjectTableSchema
- ObjectGridSchema kept as deprecated type for backward compatibility
- Simplified component implementation with single schema type
- Updated documentation to show unified approach

Benefits:
- Simpler API - one schema type instead of two
- Cleaner mental model - same type with optional grid features
- Easier migration - just add editable: true for grid mode
- Backward compatible - object-grid type still works

Example:
```typescript
// Traditional table
{ type: 'object-table', objectName: 'users', ... }

// Grid mode (inline editing)
{ type: 'object-table', objectName: 'products', editable: true, ... }
```

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

Author: Copilot

content/docs/plugins/plugin-object/index.mdx

@@ -20,18 +20,18 @@ The plugin provides three main components for building CRUD interfaces:
 
 ### ObjectTable
 
-Enterprise-grade table component with dual modes: traditional CRUD operations and spreadsheet-like inline editing. Built on data-table foundation with automatic field type rendering.
+Enterprise-grade table component with unified schema supporting both traditional CRUD and spreadsheet-like inline editing. Built on data-table foundation with automatic field type rendering.
 
 **Features:**
 - Auto-generated columns from ObjectQL schema
 - 20+ specialized field renderers (currency, percent, date, select badges, etc.)
 - Multi-column sorting, search, pagination, row selection
 - CSV export, column resizing, column reordering
-- Grid mode: inline editing, keyboard navigation, frozen columns
+- Optional grid mode: inline editing, keyboard navigation, frozen columns (set `editable: true`)
 
-**Modes:**
-- `object-table`: Traditional table with CRUD operations
-- `object-grid`: Spreadsheet-like inline editing
+**Single unified schema:**
+- `type: 'object-table'` - Supports both traditional and grid modes
+- `type: 'object-grid'` - Deprecated, use `object-table` with `editable: true`
 
 [Learn more about ObjectTable →](/docs/plugins/plugin-object/object-table)
 
@@ -89,7 +89,6 @@ const dataSource = new ObjectQLDataSource({
 ```typescript
 import type { 
   ObjectTableSchema,
-  ObjectGridSchema,
   ObjectFormSchema,
   ObjectViewSchema 
 } from '@object-ui/plugin-object';
@@ -108,12 +107,12 @@ const tableSchema: ObjectTableSchema = {
   pageSize: 20
 };
 
-// Object Grid (Inline Editing)
-const gridSchema: ObjectGridSchema = {
-  type: 'object-grid',
+// Object Table (Grid Mode with inline editing)
+const gridSchema: ObjectTableSchema = {
+  type: 'object-table',
   objectName: 'inventory',
   fields: ['sku', 'name', 'quantity', 'price'],
-  editable: true,
+  editable: true,              // Enable grid mode
   keyboardNavigation: true,
   frozenColumns: 1
 };

content/docs/plugins/plugin-object/object-table.mdx

@@ -10,11 +10,11 @@ A specialized table component that automatically fetches and displays data from
 
 ## Overview
 
-ObjectTable supports two modes:
-- **Table Mode** (`type: 'object-table'`): Traditional CRUD operations with auto-generated columns
-- **Grid Mode** (`type: 'object-grid'`): Spreadsheet-like inline editing with keyboard navigation
+ObjectTable is a single unified component that supports:
+- **Traditional Table Mode**: CRUD operations with search, filters, and pagination (default)
+- **Grid Mode**: Spreadsheet-like inline editing with keyboard navigation (set `editable: true`)
 
-Both modes inherit all data-table features: sorting, filtering, pagination, row selection, CSV export, column resizing, and reordering.
+Both modes use the same `object-table` schema type and inherit all data-table features: sorting, filtering, pagination, row selection, CSV export, column resizing, and reordering.
 
 ## Interactive Demo
 
@@ -39,11 +39,11 @@ Both modes inherit all data-table features: sorting, filtering, pagination, row
       export: true
     }
   }}
-  title="ObjectTable - Table Mode"
+  title="ObjectTable - Traditional Mode"
   description="Auto-generated columns with type-aware rendering and CRUD operations"
 />
 
-## Table Mode - Basic Usage
+## Traditional Mode - Basic Usage
 
 ```tsx
 import { ObjectTable } from '@object-ui/plugin-object';
@@ -74,17 +74,20 @@ function UsersTable() {
 
 ## Grid Mode - Inline Editing
 
+Enable spreadsheet-like editing by setting `editable: true`:
+
 ```tsx
 function InventoryGrid() {
   return (
     <ObjectTable 
       schema={{
-        type: 'object-grid',
+        type: 'object-table',
         objectName: 'inventory',
         fields: ['sku', 'name', 'quantity', 'price', 'status'],
-        editable: true,
-        keyboardNavigation: true,
-        frozenColumns: 2,
+        // Grid mode features
+        editable: true,              // Enable inline editing
+        keyboardNavigation: true,    // Arrow keys, Tab, Enter
+        frozenColumns: 2,            // Freeze first 2 columns
         resizableColumns: true
       }}
       dataSource={dataSource}
@@ -129,14 +132,16 @@ ObjectTable automatically uses specialized renderers based on field types:
 
 | Property | Type | Default | Description |
 |----------|------|---------|-------------|
-| `type` | `'object-table'` \| `'object-grid'` | Required | Component mode |
+| `type` | `'object-table'` \| `'object-grid'`* | Required | Component type |
 | `objectName` | string | Required | Name of the ObjectQL object |
 | `fields` | string[] | All fields | Fields to display as columns |
 | `data` | any[] | - | Inline data (optional) |
 | `pageSize` | number | `10` | Rows per page |
 | `selectable` | boolean \| `'single'` \| `'multiple'` | `false` | Row selection mode |
 
-### Table Mode Properties
+*Note: Both `object-table` and `object-grid` types are supported for backward compatibility, but they now use the same unified implementation.
+
+### Traditional Table Properties
 
 | Property | Type | Description |
 |----------|------|-------------|
@@ -147,15 +152,19 @@ ObjectTable automatically uses specialized renderers based on field types:
 
 ### Grid Mode Properties
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `editable` | boolean | Enable inline cell editing |
-| `keyboardNavigation` | boolean | Arrow keys, Tab, Enter navigation |
-| `frozenColumns` | number | Number of left-pinned columns |
-| `resizableColumns` | boolean | Enable column resizing |
+Add these properties to enable spreadsheet-like behavior:
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `editable` | boolean | `false` | Enable inline cell editing |
+| `keyboardNavigation` | boolean | `true` | Arrow keys, Tab, Enter navigation |
+| `frozenColumns` | number | `0` | Number of left-pinned columns |
+| `resizableColumns` | boolean | `false` | Enable column resizing |
 
 ## Keyboard Shortcuts (Grid Mode)
 
+When `editable` and `keyboardNavigation` are enabled:
+
 | Shortcut | Action |
 |----------|--------|
 | `↑` `↓` `←` `→` | Navigate between cells |
@@ -164,20 +173,70 @@ ObjectTable automatically uses specialized renderers based on field types:
 | `Enter` | Start editing selected cell |
 | `Escape` | Cancel editing |
 
-## Migration from ObjectGrid
+## Examples
 
-ObjectGrid has been merged into ObjectTable:
+### CRM Contact Table
+
+```tsx
+<ObjectTable
+  schema={{
+    type: 'object-table',
+    objectName: 'contacts',
+    title: 'Contact Management',
+    fields: ['fullName', 'email', 'phone', 'company', 'status', 'owner'],
+    operations: {
+      create: true,
+      update: true,
+      delete: true,
+      export: true
+    },
+    showSearch: true,
+    selectable: 'multiple',
+    pageSize: 25,
+    defaultSort: {
+      field: 'fullName',
+      order: 'asc'
+    }
+  }}
+  dataSource={dataSource}
+/>
+```
+
+### Editable Product Grid
+
+```tsx
+<ObjectTable
+  schema={{
+    type: 'object-table',
+    objectName: 'products',
+    fields: ['sku', 'name', 'category', 'price', 'stock', 'status'],
+    editable: true,
+    keyboardNavigation: true,
+    frozenColumns: 2,
+    resizableColumns: true,
+    pageSize: 50
+  }}
+  dataSource={dataSource}
+  onCellChange={(rowIndex, columnKey, newValue) => {
+    updateProduct(rowIndex, columnKey, newValue);
+  }}
+/>
+```
+
+## Migration
+
+### From ObjectGrid (deprecated type)
+
+The `object-grid` type is still supported but deprecated. For new code, use `object-table` with `editable: true`:
 
 **Before:**
 ```tsx
-import { ObjectGrid } from '@object-ui/plugin-object';
-<ObjectGrid schema={{ type: 'object-grid', ... }} />
+<ObjectTable schema={{ type: 'object-grid', editable: true, ... }} />
 ```
 
-**After:**
+**After (recommended):**
 ```tsx
-import { ObjectTable } from '@object-ui/plugin-object';
-<ObjectTable schema={{ type: 'object-grid', ... }} />
+<ObjectTable schema={{ type: 'object-table', editable: true, ... }} />
 ```
 
 ## Related Components

packages/plugin-object/src/ObjectTable.tsx

@@ -15,14 +15,12 @@
  */
 
 import React, { useEffect, useState, useCallback } from 'react';
-import type { ObjectTableSchema, ObjectGridSchema, DataSource } from '@object-ui/types';
+import type { ObjectTableSchema, DataSource } from '@object-ui/types';
 import { SchemaRenderer } from '@object-ui/react';
 import { getCellRenderer } from './field-renderers';
 
-export type ObjectTableOrGridSchema = ObjectTableSchema | ObjectGridSchema;
-
 export interface ObjectTableProps {
-  schema: ObjectTableOrGridSchema;
+  schema: ObjectTableSchema;
   dataSource?: DataSource;
   className?: string;
   onRowClick?: (record: any) => void;
@@ -198,7 +196,7 @@ export const ObjectTable: React.FC<ObjectTableProps> = ({
     sortable: true,
     exportable: operations?.export,
     rowActions: hasActions,
-    resizableColumns: schema.type === 'object-grid' && 'resizableColumns' in schema ? schema.resizableColumns : true,
+    resizableColumns: schema.resizableColumns !== undefined ? schema.resizableColumns : true,
     className: schema.className,
     onSelectionChange: onRowSelect,
   };

packages/plugin-object/src/index.tsx

@@ -20,7 +20,7 @@ import React from 'react';
 import { ComponentRegistry } from '@object-ui/core';
 
 export { ObjectTable } from './ObjectTable';
-export type { ObjectTableProps, ObjectTableOrGridSchema } from './ObjectTable';
+export type { ObjectTableProps } from './ObjectTable';
 
 export { ObjectForm } from './ObjectForm';
 export type { ObjectFormProps } from './ObjectForm';

packages/types/src/objectql.ts

@@ -24,9 +24,13 @@ import type { FormField } from './form';
  * ObjectTable Schema
  * A specialized table component that automatically fetches and displays data from ObjectQL objects.
  * It reads the object schema from ObjectQL and generates columns automatically.
+ * 
+ * Supports two modes:
+ * - Traditional table mode: CRUD operations with search, filters, pagination
+ * - Grid mode: Spreadsheet-like inline editing with keyboard navigation (set editable: true)
  */
 export interface ObjectTableSchema extends BaseSchema {
-  type: 'object-table';
+  type: 'object-table' | 'object-grid';
 
   /**
    * ObjectQL object name (e.g., 'users', 'accounts', 'contacts')
@@ -157,85 +161,57 @@ export interface ObjectTableSchema extends BaseSchema {
   batchActions?: string[];
 
   /**
-   * Custom CSS class
-   */
-  className?: string;
-}
-
-/**
- * ObjectGrid Schema
- * Enhanced table component with Airtable-like features:
- * - Inline cell editing
- * - Keyboard navigation  
- * - Column resizing
- * - Column freezing
- * - Advanced row selection
- */
-export interface ObjectGridSchema extends BaseSchema {
-  type: 'object-grid';
-  
-  /**
-   * ObjectQL object name
-   */
-  objectName: string;
-  
-  /**
-   * Optional title
-   */
-  title?: string;
-  
-  /**
-   * Fields to display
-   */
-  fields?: string[];
-  
-  /**
-   * Custom column configurations
-   */
-  columns?: TableColumn[];
-  
-  /**
-   * Inline data
-   */
-  data?: any[];
-  
-  /**
-   * Enable inline editing
+   * Enable inline cell editing (Grid mode)
+   * When true, cells become editable on double-click or Enter key
    * @default false
    */
   editable?: boolean;
 
   /**
-   * Enable keyboard navigation (arrow keys, Tab, Enter)
-   * @default true
+   * Enable keyboard navigation (Grid mode)
+   * Arrow keys, Tab, Enter for cell navigation
+   * @default true when editable is true
    */
   keyboardNavigation?: boolean;
 
   /**
    * Enable column resizing
+   * Allows users to drag column borders to resize
    * @default false
    */
   resizableColumns?: boolean;
 
   /**
    * Number of columns to freeze (left-pin)
+   * Useful for keeping certain columns visible while scrolling
    * @default 0
    */
   frozenColumns?: number;
 
   /**
-   * Enable row selection
+   * Custom CSS class
    */
+  className?: string;
+}
+
+/**
+ * ObjectGrid Schema
+ * @deprecated Use ObjectTableSchema with editable: true instead
+ * This type is kept for backward compatibility
+ */
+export interface ObjectGridSchema extends BaseSchema {
+  type: 'object-grid';
+  objectName: string;
+  title?: string;
+  fields?: string[];
+  columns?: TableColumn[];
+  data?: any[];
+  editable?: boolean;
+  keyboardNavigation?: boolean;
+  resizableColumns?: boolean;
+  frozenColumns?: number;
   selectable?: boolean | 'single' | 'multiple';
-  
-  /**
-   * Page size
-   */
   pageSize?: number;
-  
-  /**
-   * Custom CSS class
-   */
   className?: string;
 }