@object-ui/plugin-grid 2.0.0 → 3.0.1

package/src/ObjectGrid.EdgeCases.stories.tsx

@@ -0,0 +1,147 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
+import type { BaseSchema } from '@object-ui/types';
+import { createStorybookDataSource } from '@storybook-config/datasource';
+
+const meta = {
+  title: 'Plugins/ObjectGrid/Edge Cases',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const dataSource = createStorybookDataSource();
+
+const renderStory = (args: any) => (
+  <SchemaRendererProvider dataSource={dataSource}>
+    <SchemaRenderer schema={args as unknown as BaseSchema} />
+  </SchemaRendererProvider>
+);
+
+// ── Empty Data ────────────────────────────────────────────────
+
+export const EmptyData: Story = {
+  name: 'Empty – No Rows',
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'Employee',
+    columns: [
+      { field: 'id', header: 'ID', width: 80 },
+      { field: 'name', header: 'Name' },
+      { field: 'email', header: 'Email' },
+      { field: 'department', header: 'Department' },
+    ],
+    data: [],
+    pagination: false,
+    className: 'w-full',
+  } as any,
+};
+
+// ── Single Row ────────────────────────────────────────────────
+
+export const SingleRow: Story = {
+  name: 'Single Row',
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'Employee',
+    columns: [
+      { field: 'id', header: 'ID', width: 80 },
+      { field: 'name', header: 'Name', sortable: true },
+      { field: 'email', header: 'Email' },
+      { field: 'department', header: 'Department' },
+    ],
+    data: [
+      { id: 1, name: 'Alice Johnson', email: 'alice@example.com', department: 'Engineering' },
+    ],
+    pagination: false,
+    className: 'w-full',
+  } as any,
+};
+
+// ── Many Columns ──────────────────────────────────────────────
+
+export const ManyColumns: Story = {
+  name: 'Many Columns (15+)',
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'WideTable',
+    columns: Array.from({ length: 18 }, (_, i) => ({
+      field: `col${i + 1}`,
+      header: `Column ${i + 1}`,
+      sortable: i < 5,
+    })),
+    data: Array.from({ length: 5 }, (_, row) => {
+      const record: Record<string, any> = {};
+      for (let c = 1; c <= 18; c++) {
+        record[`col${c}`] = `R${row + 1}-C${c}`;
+      }
+      return record;
+    }),
+    pagination: false,
+    className: 'w-full',
+  } as any,
+};
+
+// ── Very Long Cell Values ─────────────────────────────────────
+
+const LONG_VALUE =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
+
+export const LongCellValues: Story = {
+  name: 'Very Long Cell Values',
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'Article',
+    columns: [
+      { field: 'id', header: 'ID', width: 60 },
+      { field: 'title', header: 'Title' },
+      { field: 'abstract', header: 'Abstract' },
+      { field: 'author', header: 'Author' },
+    ],
+    data: [
+      { id: 1, title: LONG_VALUE, abstract: LONG_VALUE + ' ' + LONG_VALUE, author: 'Dr. Extremely Long Author Name The Third Junior' },
+      { id: 2, title: 'Short', abstract: 'Brief.', author: 'Bob' },
+      { id: 3, title: LONG_VALUE, abstract: LONG_VALUE, author: LONG_VALUE },
+    ],
+    pagination: false,
+    className: 'w-full',
+  } as any,
+};
+
+// ── Null / Undefined Values ───────────────────────────────────
+
+export const NullAndUndefinedValues: Story = {
+  name: 'Null / Undefined Cell Values',
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'Sparse',
+    columns: [
+      { field: 'id', header: 'ID', width: 60 },
+      { field: 'name', header: 'Name' },
+      { field: 'email', header: 'Email' },
+      { field: 'phone', header: 'Phone' },
+      { field: 'notes', header: 'Notes' },
+    ],
+    data: [
+      { id: 1, name: 'Alice', email: null, phone: undefined, notes: '' },
+      { id: 2, name: null, email: 'bob@example.com', phone: null, notes: undefined },
+      { id: 3, name: undefined, email: undefined, phone: undefined, notes: null },
+      { id: 4, name: 'Dave', email: 'dave@example.com', phone: '+1-555-0100', notes: 'Complete record' },
+    ],
+    pagination: false,
+    className: 'w-full',
+  } as any,
+};

package/src/ObjectGrid.stories.tsx

@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
+import type { BaseSchema } from '@object-ui/types';
+import { createStorybookDataSource } from '@storybook-config/datasource';
+
+const meta = {
+  title: 'Plugins/ObjectGrid',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const dataSource = createStorybookDataSource();
+
+const renderStory = (args: any) => (
+  <SchemaRendererProvider dataSource={dataSource}>
+    <SchemaRenderer schema={args as unknown as BaseSchema} />
+  </SchemaRendererProvider>
+);
+
+export const Default: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'Employee',
+    columns: [
+      { field: 'id', header: 'ID', width: 80 },
+      { field: 'name', header: 'Name', sortable: true, filterable: true },
+      { field: 'email', header: 'Email', sortable: true, filterable: true },
+      { field: 'department', header: 'Department', sortable: true },
+      { field: 'status', header: 'Status', sortable: true },
+    ],
+    data: [
+      { id: 1, name: 'Alice Johnson', email: 'alice@example.com', department: 'Engineering', status: 'Active' },
+      { id: 2, name: 'Bob Smith', email: 'bob@example.com', department: 'Marketing', status: 'Active' },
+      { id: 3, name: 'Carol White', email: 'carol@example.com', department: 'Sales', status: 'Inactive' },
+      { id: 4, name: 'Dave Brown', email: 'dave@example.com', department: 'Engineering', status: 'Active' },
+      { id: 5, name: 'Eve Davis', email: 'eve@example.com', department: 'HR', status: 'Active' },
+    ],
+    pagination: true,
+    pageSize: 10,
+    className: 'w-full',
+  } as any,
+};
+
+export const WithRowActions: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'Task',
+    columns: [
+      { field: 'id', header: 'ID', width: 80 },
+      { field: 'title', header: 'Title', sortable: true, filterable: true },
+      { field: 'assignee', header: 'Assignee', sortable: true },
+      { field: 'priority', header: 'Priority', sortable: true },
+      { field: 'status', header: 'Status', sortable: true },
+    ],
+    actions: [
+      { label: 'View', action: 'view' },
+      { label: 'Edit', action: 'edit' },
+      { label: 'Delete', action: 'delete', variant: 'destructive' },
+    ],
+    data: [
+      { id: 1, title: 'Fix login bug', assignee: 'Alice', priority: 'High', status: 'In Progress' },
+      { id: 2, title: 'Add dark mode', assignee: 'Bob', priority: 'Medium', status: 'To Do' },
+      { id: 3, title: 'Update docs', assignee: 'Carol', priority: 'Low', status: 'Done' },
+    ],
+    pagination: true,
+    pageSize: 10,
+    className: 'w-full',
+  } as any,
+};
+
+/**
+ * CRM Deals Pipeline — demonstrates professional data formatting:
+ * - Currency with thousand separators (Amount column, right-aligned)
+ * - Percentage with progress bar (Probability column, right-aligned)
+ * - Formatted dates (Close Date column)
+ * - Colored badges for stage/status (Stage column)
+ * - Bold clickable name as primary link (Name column)
+ * - Empty value placeholder (Account column)
+ */
+export const CRMDeals: Story = {
+  name: 'CRM Deals Pipeline',
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'Deal',
+    columns: [
+      { field: 'name', label: 'Name', link: true, sortable: true },
+      { field: 'account', label: 'Account' },
+      { field: 'stage', label: 'Stage', type: 'select', sortable: true },
+      { field: 'amount', label: 'Amount', type: 'currency', sortable: true },
+      { field: 'probability', label: 'Probability', type: 'percent', sortable: true },
+      { field: 'close_date', label: 'Close Date', type: 'date', sortable: true },
+    ],
+    data: [
+      { _id: '1', name: 'ObjectStack Enterprise License', account: '', stage: 'Closed Won', amount: 150000, probability: 100, close_date: '2024-01-15T00:00:00.000Z' },
+      { _id: '2', name: 'Cloud Migration Project', account: 'Acme Corp', stage: 'Negotiation', amount: 85000, probability: 60, close_date: '2024-03-20T00:00:00.000Z' },
+      { _id: '3', name: 'Annual Support Renewal', account: '', stage: 'Proposal', amount: 42000, probability: 80, close_date: '2024-02-28T00:00:00.000Z' },
+      { _id: '4', name: 'Custom Integration Development', account: 'TechFlow Inc', stage: 'Qualification', amount: 230000, probability: 30, close_date: '2024-06-15T00:00:00.000Z' },
+      { _id: '5', name: 'Data Analytics Platform', account: '', stage: 'Closed Lost', amount: 95000, probability: 0, close_date: '2024-01-10T00:00:00.000Z' },
+      { _id: '6', name: 'Security Audit Contract', account: 'SecureNet', stage: 'Closed Won', amount: 67500, probability: 100, close_date: '2024-02-01T00:00:00.000Z' },
+      { _id: '7', name: 'Mobile App Development', account: '', stage: 'Discovery', amount: 180000, probability: 15, close_date: '2024-08-30T00:00:00.000Z' },
+    ],
+    pagination: false,
+    className: 'w-full',
+  } as any,
+};
+
+export const EditableGrid: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'Product',
+    columns: [
+      { field: 'sku', header: 'SKU', width: 100, editable: false },
+      { field: 'name', header: 'Name', sortable: true },
+      { field: 'price', header: 'Price', sortable: true },
+      { field: 'stock', header: 'Stock', sortable: true },
+    ],
+    data: [
+      { sku: 'SKU-001', name: 'Widget A', price: '$19.99', stock: 50 },
+      { sku: 'SKU-002', name: 'Widget B', price: '$29.99', stock: 30 },
+      { sku: 'SKU-003', name: 'Widget C', price: '$9.99', stock: 120 },
+    ],
+    editable: true,
+    pagination: false,
+    className: 'w-full',
+  } as any,
+};

package/src/ObjectGrid.tsx

@@ -26,13 +26,16 @@ import type { ObjectGridSchema, DataSource, ListColumn, ViewData } from '@object
 import { SchemaRenderer, useDataScope, useNavigationOverlay, useAction } from '@object-ui/react';
 import { getCellRenderer } from '@object-ui/fields';
 import { Button, NavigationOverlay } from '@object-ui/components';
+import { usePullToRefresh } from '@object-ui/mobile';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@object-ui/components';
-import { Edit, Trash2, MoreVertical } from 'lucide-react';
+import { Edit, Trash2, MoreVertical, ChevronRight, ChevronDown } from 'lucide-react';
+import { useRowColor } from './useRowColor';
+import { useGroupedData } from './useGroupedData';
 
 export interface ObjectGridProps {
   schema: ObjectGridSchema;
@@ -120,6 +123,24 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
   const [objectSchema, setObjectSchema] = useState<any>(null);
+  const [useCardView, setUseCardView] = useState(false);
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  const handlePullRefresh = useCallback(async () => {
+    setRefreshKey(k => k + 1);
+  }, []);
+
+  const { ref: pullRef, isRefreshing, pullDistance } = usePullToRefresh<HTMLDivElement>({
+    onRefresh: handlePullRefresh,
+    enabled: !!dataSource && !!schema.objectName,
+  });
+
+  useEffect(() => {
+    const checkWidth = () => setUseCardView(window.innerWidth < 480);
+    checkWidth();
+    window.addEventListener('resize', checkWidth);
+    return () => window.removeEventListener('resize', checkWidth);
+  }, []);
 
   // Check if data is passed directly (from ListView)
   const passedData = (rest as any).data;
@@ -272,7 +293,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     return () => {
       cancelled = true;
     };
-  }, [objectName, schemaFields, schemaColumns, schemaFilter, schemaSort, schemaPagination, schemaPageSize, dataSource, hasInlineData, dataConfig]);
+  }, [objectName, schemaFields, schemaColumns, schemaFilter, schemaSort, schemaPagination, schemaPageSize, dataSource, hasInlineData, dataConfig, refreshKey]);
 
   // --- NavigationConfig support ---
   // Must be called before any early returns to satisfy React hooks rules
@@ -286,6 +307,12 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
   // --- Action support for action columns ---
   const { execute: executeAction } = useAction();
 
+  // --- Row color support ---
+  const getRowClassName = useRowColor(schema.rowColor);
+
+  // --- Grouping support ---
+  const { groups, isGrouped, toggleGroup } = useGroupedData(schema.grouping, data);
+
   const generateColumns = useCallback(() => {
     // Use normalized columns (support both new and legacy)
     const cols = normalizeColumns(schemaColumns);
@@ -305,7 +332,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
         if ('field' in firstCol) {
           return (cols as ListColumn[])
             .filter((col) => col?.field && typeof col.field === 'string' && !col.hidden)
-            .map((col) => {
+            .map((col, colIndex) => {
               const header = col.label || col.field.charAt(0).toUpperCase() + col.field.slice(1).replace(/_/g, ' ');
 
               // Build custom cell renderer based on column configuration
@@ -319,11 +346,11 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
                 cellRenderer = (value: any, row: any) => {
                   const displayContent = CellRenderer
                     ? <CellRenderer value={value} field={{ name: col.field, type: col.type || 'text' } as any} />
-                    : String(value ?? '');
+                    : (value != null && value !== '' ? String(value) : <span className="text-muted-foreground">-</span>);
                   return (
                     <button
                       type="button"
-                      className="text-primary underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
+                      className="text-primary font-medium underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
                       onClick={(e) => {
                         e.stopPropagation();
                         navigation.handleClick(row);
@@ -338,11 +365,11 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
                 cellRenderer = (value: any, row: any) => {
                   const displayContent = CellRenderer
                     ? <CellRenderer value={value} field={{ name: col.field, type: col.type || 'text' } as any} />
-                    : String(value ?? '');
+                    : (value != null && value !== '' ? String(value) : <span className="text-muted-foreground">-</span>);
                   return (
                     <button
                       type="button"
-                      className="text-primary underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
+                      className="text-primary font-medium underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
                       onClick={(e) => {
                         e.stopPropagation();
                         navigation.handleClick(row);
@@ -357,7 +384,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
                 cellRenderer = (value: any, row: any) => {
                   const displayContent = CellRenderer
                     ? <CellRenderer value={value} field={{ name: col.field, type: col.type || 'text' } as any} />
-                    : String(value ?? '');
+                    : (value != null && value !== '' ? String(value) : <span className="text-muted-foreground">-</span>);
                   return (
                     <button
                       type="button"
@@ -379,13 +406,28 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
                 cellRenderer = (value: any) => (
                   <CellRenderer value={value} field={{ name: col.field, type: col.type || 'text' } as any} />
                 );
+              } else {
+                // Default renderer with empty value handling
+                cellRenderer = (value: any) => (
+                  value != null && value !== ''
+                    ? <span>{String(value)}</span>
+                    : <span className="text-muted-foreground">-</span>
+                );
               }
 
+              // Auto-infer alignment from field type if not explicitly set
+              const numericTypes = ['number', 'currency', 'percent'];
+              const inferredAlign = col.align || (col.type && numericTypes.includes(col.type) ? 'right' as const : undefined);
+
+              // Determine if column should be hidden on mobile
+              const isEssential = colIndex === 0 || (col as any).essential === true;
+
               return {
                 header,
                 accessorKey: col.field,
+                ...(!isEssential && { className: 'hidden sm:table-cell' }),
                 ...(col.width && { width: col.width }),
-                ...(col.align && { align: col.align }),
+                ...(inferredAlign && { align: inferredAlign }),
                 sortable: col.sortable !== false,
                 ...(col.resizable !== undefined && { resizable: col.resizable }),
                 ...(col.wrap !== undefined && { wrap: col.wrap }),
@@ -431,9 +473,11 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
       if (field.permissions && field.permissions.read === false) return;
 
       const CellRenderer = getCellRenderer(field.type);
+      const numericTypes = ['number', 'currency', 'percent'];
       generatedColumns.push({
         header: field.label || fieldName,
         accessorKey: fieldName,
+        ...(numericTypes.includes(field.type) && { align: 'right' }),
         cell: (value: any) => <CellRenderer value={value} field={field} />,
         sortable: field.sortable !== false,
       });
@@ -444,7 +488,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
 
   if (error) {
     return (
-      <div className="p-4 border border-red-300 bg-red-50 rounded-md">
+      <div className="p-3 sm:p-4 border border-red-300 bg-red-50 rounded-md">
         <h3 className="text-red-800 font-semibold">Error loading grid</h3>
         <p className="text-red-600 text-sm mt-1">{error.message}</p>
       </div>
@@ -453,7 +497,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
 
   if (loading && data.length === 0) {
     return (
-      <div className="p-8 text-center">
+      <div className="p-4 sm:p-8 text-center">
         <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
         <p className="mt-2 text-sm text-gray-600">Loading grid...</p>
       </div>
@@ -472,7 +516,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
       cell: (_value: any, row: any) => (
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="h-8 w-8">
+            <Button variant="ghost" size="icon" className="h-8 w-8 min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0">
               <MoreVertical className="h-4 w-4" />
               <span className="sr-only">Open menu</span>
             </Button>
@@ -536,6 +580,8 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     reorderableColumns: schema.reorderableColumns ?? false,
     editable: schema.editable ?? false,
     className: schema.className,
+    cellClassName: 'px-2 py-1.5 sm:px-3 sm:py-2 md:px-4 md:py-2.5',
+    rowClassName: schema.rowColor ? (row: any, _idx: number) => getRowClassName(row) : undefined,
     onSelectionChange: onRowSelect,
     onRowClick: navigation.handleClick,
     onCellChange: onCellChange,
@@ -543,6 +589,15 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     onBatchSave: onBatchSave,
   };
 
+  /** Build a per-group data-table schema (inherits everything except data & pagination). */
+  const buildGroupTableSchema = (groupRows: any[]) => ({
+    ...dataTableSchema,
+    caption: undefined,
+    data: groupRows,
+    pagination: false,
+    searchable: false,
+  });
+
   // Build record detail title
   const detailTitle = schema.label
     ? `${schema.label} Detail`
@@ -550,13 +605,82 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
       ? `${schema.objectName.charAt(0).toUpperCase() + schema.objectName.slice(1)} Detail`
       : 'Record Detail';
 
+  // Mobile card-view fallback for screens below 480px
+  if (useCardView && data.length > 0 && !isGrouped) {
+    const displayColumns = generateColumns().filter((c: any) => c.accessorKey !== '_actions');
+    return (
+      <>
+        <div className="space-y-2 p-2">
+          {data.map((row, idx) => (
+            <div
+              key={row.id || row._id || idx}
+              className="border rounded-lg p-3 bg-card hover:bg-accent/50 cursor-pointer transition-colors touch-manipulation"
+              onClick={() => navigation.handleClick(row)}
+            >
+              {displayColumns.slice(0, 4).map((col: any) => (
+                <div key={col.accessorKey} className="flex justify-between items-center py-1">
+                  <span className="text-xs text-muted-foreground">{col.header}</span>
+                  <span className="text-sm font-medium truncate ml-2 text-right">
+                    {col.cell ? col.cell(row[col.accessorKey], row) : String(row[col.accessorKey] ?? '—')}
+                  </span>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+        {navigation.isOverlay && (
+          <NavigationOverlay {...navigation} title={detailTitle}>
+            {(record) => (
+              <div className="space-y-3">
+                {Object.entries(record).map(([key, value]) => (
+                  <div key={key} className="flex flex-col">
+                    <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                      {key.replace(/_/g, ' ')}
+                    </span>
+                    <span className="text-sm">{String(value ?? '—')}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </NavigationOverlay>
+        )}
+      </>
+    );
+  }
+
+  // Render grid content: grouped (multiple tables with headers) or flat (single table)
+  const gridContent = isGrouped ? (
+    <div className="space-y-2">
+      {groups.map((group) => (
+        <div key={group.key} className="border rounded-md">
+          <button
+            type="button"
+            className="flex w-full items-center gap-2 px-3 py-2 text-sm font-medium text-left bg-muted/50 hover:bg-muted transition-colors"
+            onClick={() => toggleGroup(group.key)}
+          >
+            {group.collapsed
+              ? <ChevronRight className="h-4 w-4 shrink-0" />
+              : <ChevronDown className="h-4 w-4 shrink-0" />}
+            <span>{group.label}</span>
+            <span className="ml-auto text-xs text-muted-foreground">{group.rows.length}</span>
+          </button>
+          {!group.collapsed && (
+            <SchemaRenderer schema={buildGroupTableSchema(group.rows)} />
+          )}
+        </div>
+      ))}
+    </div>
+  ) : (
+    <SchemaRenderer schema={dataTableSchema} />
+  );
+
   // For split mode, wrap the grid in the ResizablePanelGroup
   if (navigation.isOverlay && navigation.mode === 'split') {
     return (
       <NavigationOverlay
         {...navigation}
         title={detailTitle}
-        mainContent={<SchemaRenderer schema={dataTableSchema} />}
+        mainContent={gridContent}
       >
         {(record) => (
           <div className="space-y-3">
@@ -575,8 +699,16 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
   }
 
   return (
-    <>
-      <SchemaRenderer schema={dataTableSchema} />
+    <div ref={pullRef} className="relative h-full">
+      {pullDistance > 0 && (
+        <div
+          className="flex items-center justify-center text-xs text-muted-foreground"
+          style={{ height: pullDistance }}
+        >
+          {isRefreshing ? 'Refreshing…' : 'Pull to refresh'}
+        </div>
+      )}
+      {gridContent}
       {navigation.isOverlay && (
         <NavigationOverlay
           {...navigation}
@@ -596,6 +728,6 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
           )}
         </NavigationOverlay>
       )}
-    </>
+    </div>
   );
 };