objectstack-ai · huangyiirene · Jan 21, 2026 · Jan 21, 2026 · Jan 21, 2026 · Jan 21, 2026
diff --git a/examples/object-view-demo/README.md b/examples/object-view-demo/README.md
@@ -0,0 +1,88 @@
+# ObjectView Demo
+
+A comprehensive demonstration of the `ObjectView` component, which integrates `ObjectTable` and `ObjectForm` into a complete, ready-to-use CRUD interface.
+
+## Features
+
+- **Integrated Table and Form**: Seamless combination of list view and create/edit forms
+- **Multiple Layout Modes**: Switch between drawer and modal layouts for form display
+- **Search Functionality**: Search across all records
+- **Filter Builder**: Placeholder for advanced filtering capabilities
+- **CRUD Operations**: Complete Create, Read, Update, Delete functionality
+- **Bulk Actions**: Select multiple rows and perform bulk delete
+- **Auto-refresh**: Table automatically refreshes after form submission
+- **Mock Data Source**: Demonstrates with in-memory mock data
+
+## Running the Demo
+
+```bash
+# From the root of the repository
+pnpm install
+pnpm --filter @examples/object-view-demo dev
+```
+
+Then open your browser to `http://localhost:5173`
+
+## Usage
+
+The demo showcases:
+
+1. **Drawer Mode (Default)**: Forms slide in from the right side
+2. **Modal Mode**: Forms appear in a centered modal dialog
+
+### Actions
+
+- **Create**: Click the "Create" button in the toolbar
+- **View**: Click on any row in the table
+- **Edit**: Click the "Edit" button in the actions column
+- **Delete**: Click the "Delete" button (with confirmation)
+- **Bulk Delete**: Select multiple rows using checkboxes and click "Delete Selected"
+- **Search**: Type in the search box to filter records
+- **Filters**: Click the "Filters" button to toggle the filter panel (placeholder)
+- **Refresh**: Click the refresh button to reload the table
+
+## Component Overview
+
+The `ObjectView` component combines:
+
+- **ObjectTable**: Auto-generated table with schema-based columns
+- **ObjectForm**: Auto-generated form with schema-based fields
+- **Drawer/Modal**: Configurable overlay components for form display
+- **Search Bar**: Built-in search functionality
+- **Filter Panel**: Placeholder for future filter builder integration
+- **Toolbar**: Actions bar with create, refresh, and filter buttons
+
+## Schema Configuration
+
+```typescript
+const schema: ObjectViewSchema = {
+  type: 'object-view',
+  objectName: 'users',
+  layout: 'drawer', // or 'modal'
+  showSearch: true,
+  showFilters: true,
+  showCreate: true,
+  operations: {
+    create: true,
+    read: true,
+    update: true,
+    delete: true,
+  },
+  table: {
+    fields: ['name', 'email', 'status', 'role'],
+    selectable: 'multiple',
+  },
+  form: {
+    fields: ['name', 'email', 'status', 'role'],
+    layout: 'vertical',
+  },
+};
+```
+
+## Next Steps
+
+- Integrate real ObjectQL backend
+- Implement advanced filtering with FilterBuilder
+- Add pagination controls
+- Add export/import functionality
+- Add custom actions and bulk operations
diff --git a/examples/object-view-demo/index.html b/examples/object-view-demo/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ObjectView Demo - ObjectUI</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/object-view-demo/package.json b/examples/object-view-demo/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@examples/object-view-demo",
+  "private": true,
+  "license": "MIT",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@object-ui/types": "workspace:*",
+    "@object-ui/core": "workspace:*",
+    "@object-ui/react": "workspace:*",
+    "@object-ui/components": "workspace:*",
+    "@object-ui/plugin-object": "workspace:*",
+    "@object-ui/data-objectql": "workspace:*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "lucide-react": "^0.562.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^25.0.9",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^5.1.2",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.19",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.3.1"
+  }
+}
diff --git a/examples/object-view-demo/postcss.config.js b/examples/object-view-demo/postcss.config.js
@@ -0,0 +1,14 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}