Enhance ObjectView and DataTableRenderer to support customizable onRowClick behavior

Author: hotlong

apps/console/src/components/ObjectView.tsx

@@ -10,7 +10,7 @@ import { Button, Empty, EmptyTitle, EmptyDescription } from '@object-ui/componen
 import { Plus, Calendar as CalendarIcon, Kanban as KanbanIcon, Table as TableIcon, AlignLeft } from 'lucide-react';
 import type { ListViewSchema } from '@object-ui/types';
 
-export function ObjectView({ dataSource, objects, onEdit }: any) {
+export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
     const { objectName } = useParams();
     const [searchParams, setSearchParams] = useSearchParams();
 
@@ -63,8 +63,8 @@ export function ObjectView({ dataSource, objects, onEdit }: any) {
         // Helper to pass dataSource if component needs it
         const interactionProps = {
             onEdit,
-            onRowClick: (record: any) => onEdit(record), // Default to edit on click
-            dataSource // Ensure ListView gets dataSource if it needs to pass it down
+            onRowClick: onRowClick || ((record: any) => onEdit(record)), 
+            dataSource
         };
 
         if (activeView.type === 'chart') {

packages/components/src/renderers/complex/data-table.tsx

@@ -8,6 +8,7 @@
 
 // Enterprise-level DataTable Component (Airtable-like)
 import React, { useState, useMemo, useRef, useEffect } from 'react';
+import { cn } from '../../lib/utils';
 import { ComponentRegistry } from '@object-ui/core';
 import type { DataTableSchema } from '@object-ui/types';
 import { 
@@ -486,7 +487,26 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                   const isSelected = selectedRowIds.has(rowId);
 
                   return (
-                    <TableRow key={rowId} data-state={isSelected ? 'selected' : undefined}>
+                    <TableRow 
+                      key={rowId} 
+                      data-state={isSelected ? 'selected' : undefined}
+                      className={cn(
+                        // @ts-ignore
+                        schema.onRowClick && "cursor-pointer"
+                      )}
+                      onClick={(e) => {
+                        // @ts-ignore
+                        if (schema.onRowClick && !e.defaultPrevented) {
+                           // Simple heuristic to avoid triggering on interactive elements if they didn't stop propagation
+                           const target = e.target as HTMLElement;
+                           if (target.closest('button') || target.closest('[role="checkbox"]') || target.closest('a')) {
+                             return;
+                           }
+                           // @ts-ignore
+                           schema.onRowClick(row);
+                        }
+                      }}
+                    >
                       {selectable && (
                         <TableCell>
                           <Checkbox

packages/plugin-grid/src/ObjectGrid.tsx

@@ -429,6 +429,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     reorderableColumns: schema.reorderableColumns ?? false,
     className: schema.className,
     onSelectionChange: onRowSelect,
+    onRowClick: onRowClick,
   };
 
   return <SchemaRenderer schema={dataTableSchema} />;