@object-ui/plugin-grid 3.0.3 → 3.1.1

package/src/ObjectGrid.tsx

@@ -21,21 +21,82 @@
  * - Inline editing support
  */
 
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import type { ObjectGridSchema, DataSource, ListColumn, ViewData } from '@object-ui/types';
-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 type { I18nLabel } from '@objectstack/spec/ui';
+import { SchemaRenderer, useDataScope, useNavigationOverlay, useAction, useObjectTranslation, useSafeFieldLabel } from '@object-ui/react';
+import { getCellRenderer, formatCurrency, formatCompactCurrency, formatDate, formatPercent, humanizeLabel } from '@object-ui/fields';
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
+  Badge, Button, NavigationOverlay,
+  Popover, PopoverContent, PopoverTrigger,
 } from '@object-ui/components';
-import { Edit, Trash2, MoreVertical, ChevronRight, ChevronDown } from 'lucide-react';
+import { usePullToRefresh } from '@object-ui/mobile';
+import { evaluatePlainCondition, buildExpandFields } from '@object-ui/core';
+import { ChevronRight, ChevronDown, Download, Rows2, Rows3, Rows4, AlignJustify, Type, Hash, Calendar, CheckSquare, User, Tag, Clock } from 'lucide-react';
 import { useRowColor } from './useRowColor';
 import { useGroupedData } from './useGroupedData';
+import { GroupRow } from './GroupRow';
+import { useColumnSummary } from './useColumnSummary';
+import { RowActionMenu, formatActionLabel } from './components/RowActionMenu';
+import { BulkActionBar } from './components/BulkActionBar';
+
+// Default English fallback translations for the grid
+const GRID_DEFAULT_TRANSLATIONS: Record<string, string> = {
+  'grid.actions': 'Actions',
+  'grid.edit': 'Edit',
+  'grid.delete': 'Delete',
+  'grid.export': 'Export',
+  'grid.exportAs': 'Export as {{format}}',
+  'grid.loading': 'Loading grid...',
+  'grid.errorLoading': 'Error loading grid',
+  'grid.pullToRefresh': 'Pull to refresh',
+  'grid.refreshing': 'Refreshing…',
+  'grid.openRecord': 'Open record',
+};
+
+/**
+ * Safe wrapper for useObjectTranslation that falls back to English defaults
+ * when I18nProvider is not available (e.g., standalone usage).
+ */
+function useGridTranslation() {
+  try {
+    const result = useObjectTranslation();
+    const testValue = result.t('grid.actions');
+    if (testValue === 'grid.actions') {
+      return {
+        t: (key: string, options?: Record<string, unknown>) => {
+          let value = GRID_DEFAULT_TRANSLATIONS[key] || key;
+          if (options) {
+            for (const [k, v] of Object.entries(options)) {
+              value = value.replace(`{{${k}}}`, String(v));
+            }
+          }
+          return value;
+        },
+      };
+    }
+    return { t: result.t };
+  } catch {
+    return {
+      t: (key: string, options?: Record<string, unknown>) => {
+        let value = GRID_DEFAULT_TRANSLATIONS[key] || key;
+        if (options) {
+          for (const [k, v] of Object.entries(options)) {
+            value = value.replace(`{{${k}}}`, String(v));
+          }
+        }
+        return value;
+      },
+    };
+  }
+}
+
+/** Resolve an I18nLabel (string | {key, defaultValue}) to a plain string. */
+function resolveColumnLabel(label: string | I18nLabel | undefined): string | undefined {
+  if (label == null) return undefined;
+  if (typeof label === 'string') return label;
+  return label.defaultValue || label.key;
+}
 
 export interface ObjectGridProps {
   schema: ObjectGridSchema;
@@ -49,6 +110,7 @@ export interface ObjectGridProps {
   onRowSave?: (rowIndex: number, changes: Record<string, any>, row: any) => void | Promise<void>;
   onBatchSave?: (changes: Array<{ rowIndex: number; changes: Record<string, any>; row: any }>) => void | Promise<void>;
   onRowSelect?: (selectedRows: any[]) => void;
+  onAddRecord?: () => void;
 }
 
 /**
@@ -117,14 +179,48 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
   onCellChange,
   onRowSave,
   onBatchSave,
+  onAddRecord,
   ...rest
 }) => {
   const [data, setData] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
+  const { t } = useGridTranslation();
+  const { fieldLabel: resolveFieldLabel } = useSafeFieldLabel();
   const [objectSchema, setObjectSchema] = useState<any>(null);
   const [useCardView, setUseCardView] = useState(false);
   const [refreshKey, setRefreshKey] = useState(0);
+  const [showExport, setShowExport] = useState(false);
+  const [rowHeightMode, setRowHeightMode] = useState<'compact' | 'short' | 'medium' | 'tall' | 'extra_tall'>(schema.rowHeight ?? 'compact');
+  const [selectedRows, setSelectedRows] = useState<any[]>([]);
+
+  // Column state persistence (order and widths)
+  const columnStorageKey = React.useMemo(() => {
+    return schema.id
+      ? `grid-columns-${schema.objectName}-${schema.id}`
+      : `grid-columns-${schema.objectName}`;
+  }, [schema.objectName, schema.id]);
+
+  const [columnState, setColumnState] = useState<{
+    order?: string[];
+    widths?: Record<string, number>;
+  }>(() => {
+    try {
+      const saved = localStorage.getItem(columnStorageKey);
+      return saved ? JSON.parse(saved) : {};
+    } catch {
+      return {};
+    }
+  });
+
+  const saveColumnState = useCallback((state: typeof columnState) => {
+    setColumnState(state);
+    try {
+      localStorage.setItem(columnStorageKey, JSON.stringify(state));
+    } catch (e) {
+      console.warn('Failed to persist column state:', e);
+    }
+  }, [columnStorageKey]);
 
   const handlePullRefresh = useCallback(async () => {
     setRefreshKey(k => k + 1);
@@ -200,6 +296,34 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     }
   }, [hasInlineData, dataConfig]);
 
+  // --- Inline data: still fetch objectSchema for type-aware rendering ---
+  // When data is inline (provider: 'value'), we skip the data fetch but still need
+  // the object schema to resolve field types (lookup, select, currency, etc.) and
+  // enable proper CellRenderer selection.
+  useEffect(() => {
+    if (!hasInlineData) return;
+    if (!objectName || !dataSource) return;
+
+    let cancelled = false;
+
+    const fetchSchema = async () => {
+      try {
+        const schemaData = await dataSource.getObjectSchema(objectName);
+        if (!cancelled) {
+          setObjectSchema(schemaData);
+        }
+      } catch (err) {
+        // Schema fetch failure for inline data is non-fatal; columns will
+        // still fall back to heuristic inference.
+        console.warn(`[ObjectGrid] Failed to fetch objectSchema for inline data (objectName: ${objectName}):`, err);
+      }
+    };
+
+    fetchSchema();
+
+    return () => { cancelled = true; };
+  }, [hasInlineData, objectName, dataSource]);
+
   // --- Unified async data loading effect ---
   // Combines schema fetch + data fetch into a single async flow with AbortController.
   // This avoids the fragile "chained effects" pattern where Effect 1 sets objectSchema,
@@ -218,14 +342,14 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
         let resolvedSchema: any = null;
         const cols = normalizeColumns(schemaColumns) || schemaFields;
 
-        if (cols && objectName) {
-          // We have explicit columns — use a minimal schema stub
-          resolvedSchema = { name: objectName, fields: {} };
-        } else if (objectName && dataSource) {
-          // Fetch full schema from DataSource
+        if (objectName && dataSource) {
+          // Always fetch full schema for field type metadata (enables rich type-aware rendering)
           const schemaData = await dataSource.getObjectSchema(objectName);
           if (cancelled) return;
           resolvedSchema = schemaData;
+        } else if (cols && objectName) {
+          // Fallback: minimal schema stub when no dataSource available
+          resolvedSchema = { name: objectName, fields: {} };
         } else if (!objectName) {
           throw new Error('Object name required for data fetching');
         } else {
@@ -273,6 +397,12 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
             params.$orderby = `${(schema.defaultSort as any).field} ${(schema.defaultSort as any).order}`;
           }
 
+          // Auto-inject $expand for lookup/master_detail fields
+          const expand = buildExpandFields(resolvedSchema?.fields, schemaColumns ?? schemaFields);
+          if (expand.length > 0) {
+            params.$expand = expand;
+          }
+
           const result = await dataSource.find(objectName, params);
           if (cancelled) return;
           setData(result.data || []);
@@ -310,10 +440,154 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
   // --- Row color support ---
   const getRowClassName = useRowColor(schema.rowColor);
 
+  // --- Conditional formatting support ---
+  const getRowStyle = useCallback((row: Record<string, unknown>): React.CSSProperties | undefined => {
+    const rules = schema.conditionalFormatting;
+    if (!rules || rules.length === 0) return undefined;
+    for (const rule of rules) {
+      let match = false;
+      const expression =
+        ('condition' in rule ? (rule as any).condition : undefined)
+        || ('expression' in rule ? (rule as any).expression : undefined)
+        || undefined;
+      if (expression) {
+        match = evaluatePlainCondition(expression, row as Record<string, any>);
+      } else if ('field' in rule && 'operator' in rule && (rule as any).field && (rule as any).operator) {
+        const r = rule as any;
+        const fieldValue = row[r.field];
+        switch (r.operator) {
+          case 'equals': match = fieldValue === r.value; break;
+          case 'not_equals': match = fieldValue !== r.value; break;
+          case 'contains': match = typeof fieldValue === 'string' && typeof r.value === 'string' && fieldValue.includes(r.value); break;
+          case 'greater_than': match = typeof fieldValue === 'number' && typeof r.value === 'number' && fieldValue > r.value; break;
+          case 'less_than': match = typeof fieldValue === 'number' && typeof r.value === 'number' && fieldValue < r.value; break;
+          case 'in': match = Array.isArray(r.value) && r.value.includes(fieldValue); break;
+        }
+      }
+      if (match) {
+        const style: React.CSSProperties = {};
+        if ('style' in rule && (rule as any).style) Object.assign(style, (rule as any).style);
+        if ('backgroundColor' in rule && (rule as any).backgroundColor) style.backgroundColor = (rule as any).backgroundColor;
+        if ('textColor' in rule && (rule as any).textColor) style.color = (rule as any).textColor;
+        if ('borderColor' in rule && (rule as any).borderColor) style.borderColor = (rule as any).borderColor;
+        return style;
+      }
+    }
+    return undefined;
+  }, [schema.conditionalFormatting]);
+
   // --- Grouping support ---
   const { groups, isGrouped, toggleGroup } = useGroupedData(schema.grouping, data);
 
+  // --- Column summary support ---
+  const summaryColumns = React.useMemo(() => {
+    const cols = normalizeColumns(schema.columns);
+    if (cols && cols.length > 0 && typeof cols[0] === 'object') {
+      return cols as ListColumn[];
+    }
+    return undefined;
+  }, [schema.columns]);
+  const { summaries, hasSummary } = useColumnSummary(summaryColumns, data);
+
   const generateColumns = useCallback(() => {
+    // Map field type to column header icon (Airtable-style)
+    const getTypeIcon = (fieldType: string | null): React.ReactNode => {
+      if (!fieldType) return <Type className="h-3.5 w-3.5" />;
+      const iconMap: Record<string, React.ReactNode> = {
+        text: <Type className="h-3.5 w-3.5" />,
+        number: <Hash className="h-3.5 w-3.5" />,
+        currency: <Hash className="h-3.5 w-3.5" />,
+        percent: <Hash className="h-3.5 w-3.5" />,
+        date: <Calendar className="h-3.5 w-3.5" />,
+        datetime: <Clock className="h-3.5 w-3.5" />,
+        boolean: <CheckSquare className="h-3.5 w-3.5" />,
+        user: <User className="h-3.5 w-3.5" />,
+        select: <Tag className="h-3.5 w-3.5" />,
+      };
+      return iconMap[fieldType] || <Type className="h-3.5 w-3.5" />;
+    };
+
+    // Auto-infer column type from field name and data values (Airtable-style)
+    const inferColumnType = (col: ListColumn): string | null => {
+      if (col.type) return col.type; // Explicit type takes priority
+
+      const fieldLower = col.field.toLowerCase();
+
+      // Infer boolean fields
+      const booleanFields = ['completed', 'is_completed', 'done', 'active', 'enabled', 'archived'];
+      if (booleanFields.some(f => fieldLower === f || fieldLower === `is_${f}`)) {
+        return 'boolean';
+      }
+
+      // Infer datetime fields (fields with time component: created_time, modified_time, *_at patterns)
+      const datetimePatterns = ['created_time', 'modified_time', 'updated_time', 'created_at', 'updated_at', 'modified_at', 'last_login', 'logged_at'];
+      if (datetimePatterns.some(p => fieldLower === p || fieldLower.endsWith(`_${p}`))) {
+        return 'datetime';
+      }
+
+      // Infer date fields from name patterns
+      const datePatterns = ['date', 'due', 'created', 'updated', 'deadline', 'start', 'end', 'expires'];
+      if (datePatterns.some(p => fieldLower.includes(p))) {
+        // Verify with data: check if sample values look like dates
+        if (data.length > 0) {
+          const sample = data.find(row => row[col.field] != null)?.[col.field];
+          if (typeof sample === 'string' && !isNaN(Date.parse(sample))) {
+            return 'date';
+          }
+        }
+        return 'date';
+      }
+
+      // Infer percent fields from name patterns
+      const percentFields = ['probability', 'percent', 'percentage', 'completion', 'progress', 'rate'];
+      if (percentFields.some(f => fieldLower.includes(f))) {
+        if (data.length > 0) {
+          const sample = data.find(row => row[col.field] != null)?.[col.field];
+          if (typeof sample === 'number') {
+            return 'percent';
+          }
+        }
+      }
+
+      // Infer select/badge fields (status, priority, category, etc.)
+      const selectFields = ['status', 'priority', 'category', 'stage', 'type', 'severity', 'level'];
+      if (selectFields.some(f => fieldLower.includes(f))) {
+        if (data.length > 0) {
+          const uniqueValues = new Set(data.map(row => row[col.field]).filter(Boolean));
+          if (uniqueValues.size > 0 && uniqueValues.size <= 10) {
+            return 'select';
+          }
+        }
+      }
+
+      // Infer user/assignee fields
+      const userFields = ['assignee', 'owner', 'author', 'reporter', 'creator', 'user'];
+      if (userFields.some(f => fieldLower.includes(f))) {
+        return 'user';
+      }
+
+      // Infer currency/amount fields
+      const currencyFields = ['amount', 'price', 'total', 'revenue', 'cost', 'budget', 'salary'];
+      if (currencyFields.some(f => fieldLower.includes(f))) {
+        if (data.length > 0) {
+          const sample = data.find(row => row[col.field] != null)?.[col.field];
+          if (typeof sample === 'number') {
+            return 'currency';
+          }
+        }
+      }
+
+      // Fallback: detect ISO date strings in data values (catch-all for unmatched field names)
+      if (data.length > 0) {
+        const sample = data.find(row => row[col.field] != null)?.[col.field];
+        if (typeof sample === 'string' && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/.test(sample)) {
+          return 'datetime';
+        }
+      }
+
+      return null;
+    };
+
     // Use normalized columns (support both new and legacy)
     const cols = normalizeColumns(schemaColumns);
     
@@ -323,9 +597,29 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
       if (cols.length > 0 && typeof cols[0] === 'object' && cols[0] !== null) {
         const firstCol = cols[0] as any;
         
-        // Already in data-table format - use as-is
+        // Already in data-table format - apply type inference for columns without custom cell renderers
         if ('accessorKey' in firstCol) {
-          return cols;
+          return (cols as any[]).map((col) => {
+            if (col.cell) return col; // already has custom renderer
+
+            const syntheticCol: ListColumn = { field: col.accessorKey, label: col.header, type: col.type };
+            const inferredType = inferColumnType(syntheticCol);
+            if (!inferredType) return col;
+
+            const CellRenderer = getCellRenderer(inferredType);
+            const fieldMeta: Record<string, any> = { name: col.accessorKey, type: inferredType };
+
+            if (inferredType === 'select') {
+              const uniqueValues = Array.from(new Set(data.map(row => row[col.accessorKey]).filter(Boolean)));
+              fieldMeta.options = uniqueValues.map((v: any) => ({ value: v, label: humanizeLabel(String(v)) }));
+            }
+
+            return {
+              ...col,
+              headerIcon: getTypeIcon(inferredType),
+              cell: (value: any) => <CellRenderer value={value} field={fieldMeta as any} />,
+            };
+          });
         }
         
         // ListColumn format - convert to data-table format with full feature support
@@ -333,24 +627,51 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
           return (cols as ListColumn[])
             .filter((col) => col?.field && typeof col.field === 'string' && !col.hidden)
             .map((col, colIndex) => {
-              const header = col.label || col.field.charAt(0).toUpperCase() + col.field.slice(1).replace(/_/g, ' ');
+              const rawHeader = resolveColumnLabel(col.label) || col.field.charAt(0).toUpperCase() + col.field.slice(1).replace(/_/g, ' ');
+              const header = schema.objectName ? resolveFieldLabel(schema.objectName, col.field, rawHeader) : rawHeader;
 
               // Build custom cell renderer based on column configuration
               let cellRenderer: ((value: any, row: any) => React.ReactNode) | undefined;
 
-              // Type-based cell renderer (e.g., "currency", "date", "boolean")
-              const CellRenderer = col.type ? getCellRenderer(col.type) : null;
+              // Type-based cell renderer: explicit col type > objectDef type > heuristic inference
+              const objectDefField = objectSchema?.fields?.[col.field];
+              const inferredType = col.type || objectDefField?.type || inferColumnType({ field: col.field }) || null;
+              const CellRenderer = inferredType ? getCellRenderer(inferredType) : null;
 
-              if (col.link && col.action) {
+              // Build field metadata for cell renderers with objectDef enrichment
+              const fieldMeta: Record<string, any> = { name: col.field, type: inferredType || 'text' };
+              // Merge objectDef field properties (options with colors, currency, precision, etc.)
+              if (objectDefField) {
+                if (objectDefField.label) fieldMeta.label = objectDefField.label;
+                if (objectDefField.currency) fieldMeta.currency = objectDefField.currency;
+                if (objectDefField.precision !== undefined) fieldMeta.precision = objectDefField.precision;
+                if (objectDefField.format) fieldMeta.format = objectDefField.format;
+                if (objectDefField.options) fieldMeta.options = objectDefField.options;
+              }
+              // Auto-generate options from data for inferred select without existing options
+              if (inferredType === 'select' && !fieldMeta.options) {
+                const uniqueValues = Array.from(new Set(data.map(row => row[col.field]).filter(Boolean)));
+                fieldMeta.options = uniqueValues.map(v => ({ value: v, label: humanizeLabel(String(v)) }));
+              }
+              if ((col as any).options) {
+                fieldMeta.options = (col as any).options;
+              }
+
+              // Auto-link primary field (first column) to record detail (Airtable-style)
+              const isPrimaryField = colIndex === 0 && !col.link && !col.action;
+              const isLinked = col.link || isPrimaryField;
+
+              if ((col.link && col.action) || (isPrimaryField && col.action)) {
                 // Both link and action: link takes priority for navigation, action executes on secondary interaction
                 cellRenderer = (value: any, row: any) => {
                   const displayContent = CellRenderer
-                    ? <CellRenderer value={value} field={{ name: col.field, type: col.type || 'text' } as any} />
-                    : (value != null && value !== '' ? String(value) : <span className="text-muted-foreground">-</span>);
+                    ? <CellRenderer value={value} field={fieldMeta as any} />
+                    : (value != null && value !== '' ? String(value) : <span className="text-muted-foreground/50 text-xs italic">—</span>);
                   return (
                     <button
                       type="button"
                       className="text-primary font-medium underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
+                      data-testid={isPrimaryField ? 'primary-field-link' : 'link-cell'}
                       onClick={(e) => {
                         e.stopPropagation();
                         navigation.handleClick(row);
@@ -360,16 +681,17 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
                     </button>
                   );
                 };
-              } else if (col.link) {
+              } else if (isLinked) {
                 // Link column: clicking navigates to the record detail
                 cellRenderer = (value: any, row: any) => {
                   const displayContent = CellRenderer
-                    ? <CellRenderer value={value} field={{ name: col.field, type: col.type || 'text' } as any} />
-                    : (value != null && value !== '' ? String(value) : <span className="text-muted-foreground">-</span>);
+                    ? <CellRenderer value={value} field={fieldMeta as any} />
+                    : (value != null && value !== '' ? String(value) : <span className="text-muted-foreground/50 text-xs italic">—</span>);
                   return (
                     <button
                       type="button"
                       className="text-primary font-medium underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
+                      data-testid={isPrimaryField ? 'primary-field-link' : 'link-cell'}
                       onClick={(e) => {
                         e.stopPropagation();
                         navigation.handleClick(row);
@@ -380,15 +702,14 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
                   );
                 };
               } else if (col.action) {
-                // Action column: clicking executes the registered action
+                // Action column: render as action button
                 cellRenderer = (value: any, row: any) => {
-                  const displayContent = CellRenderer
-                    ? <CellRenderer value={value} field={{ name: col.field, type: col.type || 'text' } as any} />
-                    : (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"
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 text-xs"
+                      data-testid="action-cell"
                       onClick={(e) => {
                         e.stopPropagation();
                         executeAction({
@@ -397,27 +718,49 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
                         });
                       }}
                     >
-                      {displayContent}
-                    </button>
+                      {formatActionLabel(col.action!)}
+                    </Button>
                   );
                 };
               } else if (CellRenderer) {
                 // Type-only cell renderer (no link/action)
                 cellRenderer = (value: any) => (
-                  <CellRenderer value={value} field={{ name: col.field, type: col.type || 'text' } as any} />
+                  <CellRenderer value={value} field={fieldMeta 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>
+                    : <span className="text-muted-foreground/50 text-xs italic">—</span>
                 );
               }
 
+              // Wrap with prefix compound cell renderer (Airtable-style: [Badge] Text in same cell)
+              const prefixConfig = (col as any).prefix;
+              if (prefixConfig?.field) {
+                const baseCellRenderer = cellRenderer;
+                const PrefixRenderer = prefixConfig.type === 'badge' ? getCellRenderer('select') : null;
+                cellRenderer = (value: any, row: any) => {
+                  const prefixValue = row[prefixConfig.field];
+                  const prefixEl = prefixValue != null && prefixValue !== ''
+                    ? PrefixRenderer
+                      ? <PrefixRenderer value={prefixValue} field={{ name: prefixConfig.field, type: 'select' } as any} />
+                      : <span className="text-muted-foreground text-xs mr-1.5">{String(prefixValue)}</span>
+                    : null;
+                  return (
+                    <span className="flex items-center gap-1.5">
+                      {prefixEl}
+                      {baseCellRenderer(value, row)}
+                    </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);
+              const effectiveType = inferredType || col.type;
+              const inferredAlign = col.align || (effectiveType && numericTypes.includes(effectiveType) ? 'right' as const : undefined);
 
               // Determine if column should be hidden on mobile
               const isEssential = colIndex === 0 || (col as any).essential === true;
@@ -425,6 +768,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
               return {
                 header,
                 accessorKey: col.field,
+                headerIcon: getTypeIcon(inferredType),
                 ...(!isEssential && { className: 'hidden sm:table-cell' }),
                 ...(col.width && { width: col.width }),
                 ...(inferredAlign && { align: inferredAlign }),
@@ -432,19 +776,83 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
                 ...(col.resizable !== undefined && { resizable: col.resizable }),
                 ...(col.wrap !== undefined && { wrap: col.wrap }),
                 ...(cellRenderer && { cell: cellRenderer }),
+                ...(col.pinned && { pinned: col.pinned }),
               };
             });
         }
       }
       
-      // String array format - filter out invalid entries
+      // String array format - enrich with objectDef field metadata for type-aware rendering
       return (cols as string[])
         .filter((fieldName) => typeof fieldName === 'string' && fieldName.trim().length > 0)
-        .map((fieldName) => {
-          const fieldLabel = objectSchema?.fields?.[fieldName]?.label;
+        .map((fieldName, colIndex) => {
+          const fieldDef = objectSchema?.fields?.[fieldName];
+          const rawFieldLabel = fieldDef?.label;
+          const rawHeader = rawFieldLabel || fieldName.charAt(0).toUpperCase() + fieldName.slice(1).replace(/_/g, ' ');
+          const header = schema.objectName ? resolveFieldLabel(schema.objectName, fieldName, rawHeader) : rawHeader;
+
+          // Resolve type: objectDef type > heuristic inference (consistent with ListColumn path)
+          const resolvedType = fieldDef?.type || inferColumnType({ field: fieldName }) || null;
+          const CellRenderer = resolvedType ? getCellRenderer(resolvedType) : null;
+
+          // Build field metadata with objectDef enrichment
+          const fieldMeta: Record<string, any> = { name: fieldName, type: resolvedType || 'text' };
+          if (fieldDef) {
+            if (fieldDef.label) fieldMeta.label = fieldDef.label;
+            if (fieldDef.currency) fieldMeta.currency = fieldDef.currency;
+            if (fieldDef.precision !== undefined) fieldMeta.precision = fieldDef.precision;
+            if (fieldDef.format) fieldMeta.format = fieldDef.format;
+            if (fieldDef.options) fieldMeta.options = fieldDef.options;
+          }
+          // Auto-generate select options from data when no options defined
+          if (resolvedType === 'select' && !fieldMeta.options) {
+            const uniqueValues = Array.from(new Set(data.map(row => row[fieldName]).filter(Boolean)));
+            fieldMeta.options = uniqueValues.map((v: any) => ({ value: v, label: humanizeLabel(String(v)) }));
+          }
+
+          const numericTypes = ['number', 'currency', 'percent'];
+          const inferredAlign = resolvedType && numericTypes.includes(resolvedType) ? 'right' as const : undefined;
+
+          // Auto-link primary field (first column) to record detail
+          const isPrimaryField = colIndex === 0;
+          let cellRenderer: ((value: any, row?: any) => React.ReactNode) | undefined;
+
+          if (isPrimaryField && CellRenderer) {
+            cellRenderer = (value: any, row: any) => {
+              const displayContent = <CellRenderer value={value} field={fieldMeta as any} />;
+              return (
+                <button
+                  type="button"
+                  className="text-primary font-medium underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
+                  data-testid="primary-field-link"
+                  onClick={(e) => { e.stopPropagation(); navigation.handleClick(row); }}
+                >
+                  {displayContent}
+                </button>
+              );
+            };
+          } else if (isPrimaryField) {
+            cellRenderer = (value: any, row: any) => (
+              <button
+                type="button"
+                className="text-primary font-medium underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
+                data-testid="primary-field-link"
+                onClick={(e) => { e.stopPropagation(); navigation.handleClick(row); }}
+              >
+                {value != null && value !== '' ? String(value) : <span className="text-muted-foreground/50 text-xs italic">—</span>}
+              </button>
+            );
+          } else if (CellRenderer) {
+            cellRenderer = (value: any) => <CellRenderer value={value} field={fieldMeta as any} />;
+          }
+
           return {
-            header: fieldLabel || fieldName.charAt(0).toUpperCase() + fieldName.slice(1).replace(/_/g, ' '),
+            header,
             accessorKey: fieldName,
+            ...(resolvedType && { headerIcon: getTypeIcon(resolvedType) }),
+            ...(inferredAlign && { align: inferredAlign }),
+            ...(cellRenderer && { cell: cellRenderer }),
+            sortable: fieldDef?.sortable !== false,
           };
         });
     }
@@ -454,10 +862,39 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
       const inlineData = dataConfig?.provider === 'value' ? dataConfig.items as any[] : [];
       if (inlineData.length > 0) {
         const fieldsToShow = schemaFields || Object.keys(inlineData[0]);
-        return fieldsToShow.map((fieldName) => ({
-          header: fieldName.charAt(0).toUpperCase() + fieldName.slice(1).replace(/_/g, ' '),
-          accessorKey: fieldName,
-        }));
+        return fieldsToShow.map((fieldName) => {
+          const fieldDef = objectSchema?.fields?.[fieldName];
+          const resolvedType = fieldDef?.type || inferColumnType({ field: fieldName }) || null;
+          const CellRenderer = resolvedType ? getCellRenderer(resolvedType) : null;
+          const header = fieldDef?.label || fieldName.charAt(0).toUpperCase() + fieldName.slice(1).replace(/_/g, ' ');
+
+          // Build field metadata with objectDef enrichment
+          const fieldMeta: Record<string, any> = { name: fieldName, type: resolvedType || 'text' };
+          if (fieldDef) {
+            if (fieldDef.label) fieldMeta.label = fieldDef.label;
+            if (fieldDef.currency) fieldMeta.currency = fieldDef.currency;
+            if (fieldDef.precision !== undefined) fieldMeta.precision = fieldDef.precision;
+            if (fieldDef.format) fieldMeta.format = fieldDef.format;
+            if (fieldDef.options) fieldMeta.options = fieldDef.options;
+          }
+          // Auto-generate select options from data when no options defined
+          if (resolvedType === 'select' && !fieldMeta.options) {
+            const uniqueValues = Array.from(new Set(data.map(row => row[fieldName]).filter(Boolean)));
+            fieldMeta.options = uniqueValues.map((v: any) => ({ value: v, label: humanizeLabel(String(v)) }));
+          }
+
+          const numericTypes = ['number', 'currency', 'percent'];
+          const inferredAlign = resolvedType && numericTypes.includes(resolvedType) ? 'right' as const : undefined;
+
+          return {
+            header,
+            accessorKey: fieldName,
+            ...(resolvedType && { headerIcon: getTypeIcon(resolvedType) }),
+            ...(inferredAlign && { align: inferredAlign }),
+            ...(CellRenderer && { cell: (value: any) => <CellRenderer value={value} field={fieldMeta as any} /> }),
+            sortable: fieldDef?.sortable !== false,
+          };
+        });
       }
     }
 
@@ -475,7 +912,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
       const CellRenderer = getCellRenderer(field.type);
       const numericTypes = ['number', 'currency', 'percent'];
       generatedColumns.push({
-        header: field.label || fieldName,
+        header: schema.objectName ? resolveFieldLabel(schema.objectName, fieldName, field.label || fieldName) : field.label || fieldName,
         accessorKey: fieldName,
         ...(numericTypes.includes(field.type) && { align: 'right' }),
         cell: (value: any) => <CellRenderer value={value} field={field} />,
@@ -484,70 +921,170 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     });
 
     return generatedColumns;
-  }, [objectSchema, schemaFields, schemaColumns, dataConfig, hasInlineData, navigation.handleClick, executeAction]);
+  }, [objectSchema, schemaFields, schemaColumns, dataConfig, hasInlineData, navigation.handleClick, executeAction, data, resolveFieldLabel, schema.objectName]);
+
+  const handleExport = useCallback((format: 'csv' | 'xlsx' | 'json' | 'pdf') => {
+    const exportConfig = schema.exportOptions;
+    const maxRecords = exportConfig?.maxRecords || 0;
+    const includeHeaders = exportConfig?.includeHeaders !== false;
+    const prefix = exportConfig?.fileNamePrefix || schema.objectName || 'export';
+    const exportData = maxRecords > 0 ? data.slice(0, maxRecords) : data;
+
+    const downloadFile = (blob: Blob, filename: string) => {
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      a.click();
+      URL.revokeObjectURL(url);
+    };
+
+    const escapeCsvValue = (val: any): string => {
+      const str = val == null ? '' : String(val);
+      return str.includes(',') || str.includes('"') || str.includes('\n') || str.includes('\r')
+        ? `"${str.replace(/"/g, '""')}"`
+        : str;
+    };
+
+    if (format === 'csv') {
+      const cols = generateColumns().filter((c: any) => c.accessorKey !== '_actions');
+      const fields = cols.map((c: any) => c.accessorKey);
+      const headers = cols.map((c: any) => c.header);
+      const rows: string[] = [];
+      if (includeHeaders) {
+        rows.push(headers.join(','));
+      }
+      exportData.forEach(record => {
+        rows.push(fields.map((f: string) => escapeCsvValue(record[f])).join(','));
+      });
+      downloadFile(new Blob([rows.join('\n')], { type: 'text/csv;charset=utf-8;' }), `${prefix}.csv`);
+    } else if (format === 'json') {
+      downloadFile(new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' }), `${prefix}.json`);
+    }
+    setShowExport(false);
+  }, [data, schema.exportOptions, schema.objectName, generateColumns]);
 
   if (error) {
     return (
       <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>
+        <h3 className="text-red-800 font-semibold">{t('grid.errorLoading')}</h3>
         <p className="text-red-600 text-sm mt-1">{error.message}</p>
       </div>
     );
   }
 
   if (loading && data.length === 0) {
+    if (useCardView) {
+      return (
+        <div className="space-y-2 p-2">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="border rounded-lg p-3 bg-card animate-pulse">
+              <div className="h-5 bg-muted rounded w-3/4 mb-3" />
+              <div className="flex items-center justify-between mb-2">
+                <div className="h-4 bg-muted rounded w-1/4" />
+                <div className="h-5 bg-muted rounded-full w-20" />
+              </div>
+              <div className="h-3 bg-muted rounded w-1/3" />
+            </div>
+          ))}
+        </div>
+      );
+    }
     return (
       <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 className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-foreground"></div>
+        <p className="mt-2 text-sm text-muted-foreground">{t('grid.loading')}</p>
       </div>
     );
   }
 
   const columns = generateColumns();
+
+  // Apply persisted column order and widths
+  let persistedColumns = [...columns];
+  
+  // Apply saved widths
+  if (columnState.widths) {
+    persistedColumns = persistedColumns.map((col: any) => {
+      const savedWidth = columnState.widths?.[col.accessorKey];
+      if (savedWidth) {
+        return { ...col, size: savedWidth };
+      }
+      return col;
+    });
+  }
+  
+  // Apply saved order
+  if (columnState.order && columnState.order.length > 0) {
+    const orderMap = new Map(columnState.order.map((key: string, i: number) => [key, i]));
+    persistedColumns.sort((a: any, b: any) => {
+      const orderA = orderMap.get(a.accessorKey) ?? Infinity;
+      const orderB = orderMap.get(b.accessorKey) ?? Infinity;
+      return orderA - orderB;
+    });
+  }
+
   const operations = 'operations' in schema ? schema.operations : undefined;
   const hasActions = operations && (operations.update || operations.delete);
+  const hasRowActions = schema.rowActions && schema.rowActions.length > 0;
 
-  const columnsWithActions = hasActions ? [
-    ...columns,
+  const columnsWithActions = (hasActions || hasRowActions) ? [
+    ...persistedColumns,
     {
-      header: 'Actions',
+      header: t('grid.actions'),
       accessorKey: '_actions',
       cell: (_value: any, row: any) => (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <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>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            {operations?.update && onEdit && (
-              <DropdownMenuItem onClick={() => onEdit(row)}>
-                <Edit className="mr-2 h-4 w-4" />
-                Edit
-              </DropdownMenuItem>
-            )}
-            {operations?.delete && onDelete && (
-              <DropdownMenuItem onClick={() => onDelete(row)}>
-                <Trash2 className="mr-2 h-4 w-4" />
-                Delete
-              </DropdownMenuItem>
-            )}
-          </DropdownMenuContent>
-        </DropdownMenu>
+        <RowActionMenu
+          row={row}
+          rowActions={schema.rowActions}
+          canEdit={!!(operations?.update && onEdit)}
+          canDelete={!!(operations?.delete && onDelete)}
+          onEdit={onEdit}
+          onDelete={onDelete}
+          onAction={(action, r) => executeAction({ type: action, params: { record: r } })}
+        />
       ),
       sortable: false,
     },
-  ] : columns;
+  ] : persistedColumns;
+
+  // --- Pinned column reordering ---
+  // Reorder: pinned:'left' first, unpinned middle, pinned:'right' last
+  const pinnedLeftCols = columnsWithActions.filter((c: any) => c.pinned === 'left');
+  const pinnedRightCols = columnsWithActions.filter((c: any) => c.pinned === 'right');
+  const unpinnedCols = columnsWithActions.filter((c: any) => !c.pinned);
+  const hasPinnedColumns = pinnedLeftCols.length > 0 || pinnedRightCols.length > 0;
+  const rightPinnedClasses = 'sticky right-0 z-10 bg-background border-l border-border';
+  const orderedColumns = hasPinnedColumns
+    ? [
+        ...pinnedLeftCols,
+        ...unpinnedCols,
+        ...pinnedRightCols.map((col: any) => ({
+          ...col,
+          className: [col.className, rightPinnedClasses].filter(Boolean).join(' '),
+          cellClassName: [col.cellClassName, rightPinnedClasses].filter(Boolean).join(' '),
+        })),
+      ]
+    : columnsWithActions;
+
+  // Calculate frozenColumns: if pinned columns exist, use left-pinned count; otherwise use schema default
+  const effectiveFrozenColumns = hasPinnedColumns
+    ? pinnedLeftCols.length
+    : (schema.frozenColumns ?? 1);
 
   // Determine selection mode (support both new and legacy formats)
+  // Auto-enable 'multiple' selection when bulk actions are defined
+  const effectiveBulkActions = schema.batchActions ?? (schema as any).bulkActions;
+  const hasBulkActions = effectiveBulkActions && effectiveBulkActions.length > 0;
   let selectionMode: 'none' | 'single' | 'multiple' | boolean = false;
   if (schema.selection?.type) {
     selectionMode = schema.selection.type === 'none' ? false : schema.selection.type;
   } else if (schema.selectable !== undefined) {
     // Legacy support
     selectionMode = schema.selectable;
+  } else if (hasBulkActions) {
+    // Auto-enable multi-select when bulk actions exist
+    selectionMode = 'multiple';
   }
 
   // Determine pagination settings (support both new and legacy formats)
@@ -567,7 +1104,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
   const dataTableSchema: any = {
     type: 'data-table',
     caption: schema.label || schema.title,
-    columns: columnsWithActions,
+    columns: orderedColumns,
     data,
     pagination: paginationEnabled,
     pageSize: pageSize,
@@ -579,14 +1116,43 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     resizableColumns: schema.resizable ?? schema.resizableColumns ?? true,
     reorderableColumns: schema.reorderableColumns ?? false,
     editable: schema.editable ?? false,
+    singleClickEdit: schema.singleClickEdit ?? true,
     className: schema.className,
-    cellClassName: 'px-2 py-1.5 sm:px-3 sm:py-2 md:px-4 md:py-2.5',
+    cellClassName: rowHeightMode === 'compact'
+      ? 'px-3 py-1 text-[13px] leading-tight'
+      : rowHeightMode === 'short'
+        ? 'px-3 py-1 text-[13px] leading-normal'
+        : rowHeightMode === 'tall'
+          ? 'px-3 py-2.5 text-sm'
+          : rowHeightMode === 'extra_tall'
+            ? 'px-3 py-3.5 text-sm leading-relaxed'
+            : 'px-3 py-1.5 text-[13px] leading-normal',
+    showRowNumbers: true,
+    showAddRow: !!operations?.create,
+    onAddRecord: onAddRecord,
     rowClassName: schema.rowColor ? (row: any, _idx: number) => getRowClassName(row) : undefined,
-    onSelectionChange: onRowSelect,
+    rowStyle: schema.conditionalFormatting?.length ? (row: any, _idx: number) => getRowStyle(row) : undefined,
+    frozenColumns: effectiveFrozenColumns,
+    onSelectionChange: (rows: any[]) => {
+      setSelectedRows(rows);
+      onRowSelect?.(rows);
+    },
     onRowClick: navigation.handleClick,
     onCellChange: onCellChange,
     onRowSave: onRowSave,
     onBatchSave: onBatchSave,
+    onColumnResize: (columnKey: string, width: number) => {
+      saveColumnState({
+        ...columnState,
+        widths: { ...columnState.widths, [columnKey]: width },
+      });
+    },
+    onColumnReorder: (newOrder: string[]) => {
+      saveColumnState({
+        ...columnState,
+        order: newOrder,
+      });
+    },
   };
 
   /** Build a per-group data-table schema (inherits everything except data & pagination). */
@@ -608,25 +1174,163 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
   // Mobile card-view fallback for screens below 480px
   if (useCardView && data.length > 0 && !isGrouped) {
     const displayColumns = generateColumns().filter((c: any) => c.accessorKey !== '_actions');
+
+    // Build a lookup of column metadata for smart rendering
+    const colMap = new Map<string, any>();
+    displayColumns.forEach((col: any) => colMap.set(col.accessorKey, col));
+
+    // Identify special columns by inferred type for visual hierarchy
+    const titleCol = displayColumns[0]; // First column is always the title
+    const amountKeys = ['amount', 'price', 'total', 'revenue', 'cost', 'value', 'budget', 'salary'];
+    const stageKeys = ['stage', 'status', 'priority', 'category', 'severity', 'level'];
+    const dateKeys = ['date', 'due', 'created', 'updated', 'deadline', 'start', 'end', 'expires'];
+    const percentKeys = ['probability', 'percent', 'rate', 'ratio', 'confidence', 'score'];
+
+    // Stage badge color mapping for common pipeline stages
+    const stageBadgeColor = (value: string): string => {
+      const v = (value || '').toLowerCase();
+      if (v.includes('won') || v.includes('completed') || v.includes('done') || v.includes('active'))
+        return 'bg-green-100 text-green-800 border-green-300';
+      if (v.includes('lost') || v.includes('cancelled') || v.includes('rejected') || v.includes('closed lost'))
+        return 'bg-red-100 text-red-800 border-red-300';
+      if (v.includes('negotiation') || v.includes('review') || v.includes('in progress'))
+        return 'bg-yellow-100 text-yellow-800 border-yellow-300';
+      if (v.includes('proposal') || v.includes('pending'))
+        return 'bg-blue-100 text-blue-800 border-blue-300';
+      if (v.includes('qualification') || v.includes('qualified'))
+        return 'bg-indigo-100 text-indigo-800 border-indigo-300';
+      if (v.includes('prospecting') || v.includes('new') || v.includes('open'))
+        return 'bg-purple-100 text-purple-800 border-purple-300';
+      return 'bg-muted text-muted-foreground border-border';
+    };
+
+    // Left border color for card accent based on stage
+    const stageBorderLeft = (value: string): string => {
+      const v = (value || '').toLowerCase();
+      if (v.includes('won') || v.includes('completed') || v.includes('done') || v.includes('active'))
+        return 'border-l-green-500';
+      if (v.includes('lost') || v.includes('cancelled') || v.includes('rejected'))
+        return 'border-l-red-500';
+      if (v.includes('negotiation') || v.includes('review') || v.includes('in progress'))
+        return 'border-l-yellow-500';
+      if (v.includes('proposal') || v.includes('pending'))
+        return 'border-l-blue-500';
+      if (v.includes('qualification') || v.includes('qualified'))
+        return 'border-l-indigo-500';
+      if (v.includes('prospecting') || v.includes('new') || v.includes('open'))
+        return 'border-l-purple-500';
+      return 'border-l-gray-300';
+    };
+
+    const classify = (key: string): 'amount' | 'stage' | 'date' | 'percent' | 'other' => {
+      const k = key.toLowerCase();
+      if (amountKeys.some(p => k.includes(p))) return 'amount';
+      if (stageKeys.some(p => k.includes(p))) return 'stage';
+      if (dateKeys.some(p => k.includes(p))) return 'date';
+      if (percentKeys.some(p => k.includes(p))) return 'percent';
+      return 'other';
+    };
+
     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>
-          ))}
+          {data.map((row, idx) => {
+            // Collect secondary fields (skip the title column)
+            const secondaryCols = displayColumns.slice(1, 5);
+            const amountCol = secondaryCols.find((c: any) => classify(c.accessorKey) === 'amount');
+            const stageCol = secondaryCols.find((c: any) => classify(c.accessorKey) === 'stage');
+            const dateCols = secondaryCols.filter((c: any) => classify(c.accessorKey) === 'date');
+            const percentCols = secondaryCols.filter((c: any) => classify(c.accessorKey) === 'percent');
+            const otherCols = secondaryCols.filter(
+              (c: any) => c !== amountCol && c !== stageCol && !dateCols.includes(c) && !percentCols.includes(c)
+            );
+
+            // Determine left border accent color from stage value
+            const stageValue = stageCol ? String(row[stageCol.accessorKey] ?? '') : '';
+            const leftBorderClass = stageValue ? stageBorderLeft(stageValue) : '';
+            const cardClassName = [
+              'border rounded-lg p-2.5 bg-card hover:bg-accent/50 cursor-pointer transition-colors touch-manipulation',
+              leftBorderClass ? `border-l-[3px] ${leftBorderClass}` : '',
+            ].filter(Boolean).join(' ');
+
+            return (
+              <div
+                key={row.id || row._id || idx}
+                className={cardClassName}
+                onClick={() => navigation.handleClick(row)}
+              >
+                {/* Title row - Name as bold prominent title */}
+                {titleCol && (
+                  <div className="font-semibold text-sm truncate mb-1">
+                    {row[titleCol.accessorKey] ?? '—'}
+                  </div>
+                )}
+
+                {/* Amount + Stage row - side by side for compact display */}
+                {(amountCol || stageCol) && (
+                  <div className="flex items-center justify-between gap-2 mb-1">
+                    {amountCol && (
+                      <span className="text-sm tabular-nums font-medium">
+                        {typeof row[amountCol.accessorKey] === 'number'
+                          ? formatCompactCurrency(row[amountCol.accessorKey])
+                          : row[amountCol.accessorKey] ?? '—'}
+                      </span>
+                    )}
+                    {stageCol && row[stageCol.accessorKey] && (
+                      <Badge
+                        variant="outline"
+                        className={`text-xs shrink-0 max-w-[140px] truncate ${stageBadgeColor(String(row[stageCol.accessorKey]))}`}
+                      >
+                        {row[stageCol.accessorKey]}
+                      </Badge>
+                    )}
+                  </div>
+                )}
+
+                {/* Date + Percent combined row for density */}
+                {(dateCols.length > 0 || percentCols.length > 0) && (
+                  <div className="flex items-center justify-between py-0.5 text-xs text-muted-foreground">
+                    {dateCols[0] && (
+                      <span className="tabular-nums">
+                        {row[dateCols[0].accessorKey]
+                          ? formatDate(row[dateCols[0].accessorKey], 'short')
+                          : '—'}
+                      </span>
+                    )}
+                    {percentCols[0] && row[percentCols[0].accessorKey] != null && (
+                      <span className="tabular-nums">
+                        {formatPercent(Number(row[percentCols[0].accessorKey]))}
+                      </span>
+                    )}
+                  </div>
+                )}
+
+                {/* Additional date fields beyond the first */}
+                {dateCols.slice(1).map((col: any) => (
+                  <div key={col.accessorKey} className="flex justify-between items-center py-0.5">
+                    <span className="text-xs text-muted-foreground">{col.header}</span>
+                    <span className="text-xs text-muted-foreground tabular-nums">
+                      {row[col.accessorKey] ? formatDate(row[col.accessorKey], 'short') : '—'}
+                    </span>
+                  </div>
+                ))}
+
+                {/* Other fields - hide empty values on mobile */}
+                {otherCols.map((col: any) => {
+                  const val = row[col.accessorKey];
+                  if (val == null || val === '') return null;
+                  return (
+                    <div key={col.accessorKey} className="flex justify-between items-center py-0.5">
+                      <span className="text-xs text-muted-foreground">{col.header}</span>
+                      <span className="text-xs font-medium truncate ml-2 text-right">
+                        {col.cell ? col.cell(val, row) : String(val)}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            );
+          })}
         </div>
         {navigation.isOverlay && (
           <NavigationOverlay {...navigation} title={detailTitle}>
@@ -648,30 +1352,193 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     );
   }
 
+  // Row height cycle handler (plain function, not hook — after early returns)
+  const cycleRowHeight = () => {
+    setRowHeightMode(prev => {
+      if (prev === 'compact') return 'short';
+      if (prev === 'short') return 'medium';
+      if (prev === 'medium') return 'tall';
+      if (prev === 'tall') return 'extra_tall';
+      return 'compact';
+    });
+  };
+
+  const rowHeightIcons = { compact: Rows4, short: Rows3, medium: Rows2, tall: AlignJustify, extra_tall: AlignJustify };
+  const RowHeightIcon = rowHeightIcons[rowHeightMode];
+
+  // Grid toolbar (row height toggle + export)
+  const showRowHeightToggle = schema.rowHeight !== undefined;
+  const hasToolbar = schema.exportOptions || showRowHeightToggle;
+  const gridToolbar = hasToolbar ? (
+    <div className="flex items-center justify-end gap-1 px-2 py-1">
+      {/* Row height toggle */}
+      {showRowHeightToggle && (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 px-2 text-muted-foreground hover:text-primary text-xs"
+          onClick={cycleRowHeight}
+          title={`Row height: ${rowHeightMode}`}
+        >
+          <RowHeightIcon className="h-3.5 w-3.5 mr-1.5" />
+          <span className="hidden sm:inline capitalize">{rowHeightMode}</span>
+        </Button>
+      )}
+
+      {/* Export */}
+      {schema.exportOptions && (
+        <Popover open={showExport} onOpenChange={setShowExport}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 px-2 text-muted-foreground hover:text-primary text-xs"
+            >
+              <Download className="h-3.5 w-3.5 mr-1.5" />
+              <span className="hidden sm:inline">{t('grid.export')}</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent align="end" className="w-48 p-2">
+            <div className="space-y-1">
+              {(schema.exportOptions.formats || ['csv', 'json']).map(format => (
+                <Button
+                  key={format}
+                  variant="ghost"
+                  size="sm"
+                  className="w-full justify-start h-8 text-xs"
+                  onClick={() => handleExport(format)}
+                >
+                  <Download className="h-3.5 w-3.5 mr-2" />
+                  {t('grid.exportAs', { format: format.toUpperCase() })}
+                </Button>
+              ))}
+            </div>
+          </PopoverContent>
+        </Popover>
+      )}
+    </div>
+  ) : null;
+
+  // Form-based record detail renderer (replaces simple key-value dump)
+  const renderRecordDetail = (record: any) => {
+    const systemFields = ['_id', 'id', 'created_at', 'updated_at', 'created_by', 'updated_by'];
+    const entries = Object.entries(record);
+    const regularFields = entries.filter(([key]) => !systemFields.includes(key));
+    const metaFields = entries.filter(([key]) => systemFields.includes(key) && key !== '_id' && key !== 'id');
+
+    const formatFieldLabel = (key: string): string =>
+      key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, ' ');
+
+    const renderFieldValue = (key: string, value: any): React.ReactNode => {
+      if (value == null || value === '') {
+        return <span className="text-muted-foreground/50 text-sm italic">Empty</span>;
+      }
+
+      // Use objectSchema field type for type-aware rendering
+      const fieldDef = objectSchema?.fields?.[key];
+      if (fieldDef?.type) {
+        const CellRenderer = getCellRenderer(fieldDef.type);
+        if (CellRenderer) {
+          return <CellRenderer value={value} field={fieldDef} />;
+        }
+      }
+
+      // Fallback: infer from value and key name
+      if (typeof value === 'boolean') {
+        return <Badge variant={value ? 'default' : 'outline'}>{value ? 'Yes' : 'No'}</Badge>;
+      }
+      // Detect date-like values
+      if (typeof value === 'string' && !isNaN(Date.parse(value)) && (key.includes('date') || key.includes('_at') || key.includes('time'))) {
+        return <span className="text-sm tabular-nums">{formatDate(value)}</span>;
+      }
+      // Detect currency-like fields by name
+      const currencyFields = ['amount', 'price', 'total', 'revenue', 'cost', 'value', 'budget', 'salary'];
+      if (typeof value === 'number' && currencyFields.some(f => key.toLowerCase().includes(f))) {
+        return <span className="text-sm tabular-nums font-medium">{formatCurrency(value)}</span>;
+      }
+      return <span className="text-sm break-words">{String(value)}</span>;
+    };
+
+    return (
+      <div className="space-y-4" data-testid="record-detail-panel">
+        {/* Regular fields in form-like layout */}
+        <div className="rounded-lg border bg-card">
+          <div className="divide-y">
+            {regularFields.map(([key, value]) => (
+              <div key={key} className="flex flex-col sm:flex-row sm:items-start gap-1 sm:gap-4 px-4 py-3">
+                <span className="text-xs font-medium text-muted-foreground sm:w-1/3 sm:text-right sm:pt-0.5 uppercase tracking-wide shrink-0">
+                  {formatFieldLabel(key)}
+                </span>
+                <div className="flex-1 min-w-0">
+                  {renderFieldValue(key, value)}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* System/meta fields */}
+        {metaFields.length > 0 && (
+          <div className="rounded-lg border bg-muted/30">
+            <div className="px-4 py-2 border-b">
+              <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">System</span>
+            </div>
+            <div className="divide-y divide-border/50">
+              {metaFields.map(([key, value]) => (
+                <div key={key} className="flex items-center gap-4 px-4 py-2">
+                  <span className="text-xs text-muted-foreground w-1/3 text-right shrink-0">
+                    {formatFieldLabel(key)}
+                  </span>
+                  <span className="text-xs text-muted-foreground flex-1 min-w-0 break-words">{String(value ?? '')}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  // Summary footer row
+  const summaryFooter = hasSummary ? (
+    <div className="border-t bg-muted/30 px-2 py-1.5" data-testid="column-summary-footer">
+      <div className="flex gap-4 text-xs text-muted-foreground font-medium">
+        {orderedColumns
+          .filter((col: any) => summaries.has(col.accessorKey))
+          .map((col: any) => {
+            const summary = summaries.get(col.accessorKey)!;
+            return (
+              <span key={col.accessorKey} data-testid={`summary-${col.accessorKey}`}>
+                {col.header}: {summary.label}
+              </span>
+            );
+          })}
+      </div>
+    </div>
+  ) : null;
+
   // 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>
+        <GroupRow
+          key={group.key}
+          groupKey={group.key}
+          label={group.label}
+          count={group.rows.length}
+          collapsed={group.collapsed}
+          aggregations={group.aggregations}
+          onToggle={toggleGroup}
+        >
+          <SchemaRenderer schema={buildGroupTableSchema(group.rows)} />
+        </GroupRow>
       ))}
     </div>
   ) : (
-    <SchemaRenderer schema={dataTableSchema} />
+    <>
+      <SchemaRenderer schema={dataTableSchema} />
+      {summaryFooter}
+    </>
   );
 
   // For split mode, wrap the grid in the ResizablePanelGroup
@@ -680,20 +1547,20 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
       <NavigationOverlay
         {...navigation}
         title={detailTitle}
-        mainContent={gridContent}
+        mainContent={
+          <>
+            {gridToolbar}
+            {gridContent}
+            <BulkActionBar
+              selectedRows={selectedRows}
+              actions={effectiveBulkActions ?? []}
+              onAction={(action, rows) => executeAction({ type: action, params: { records: rows } })}
+              onClearSelection={() => setSelectedRows([])}
+            />
+          </>
+        }
       >
-        {(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>
-        )}
+        {(record) => renderRecordDetail(record)}
       </NavigationOverlay>
     );
   }
@@ -705,27 +1572,23 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
           className="flex items-center justify-center text-xs text-muted-foreground"
           style={{ height: pullDistance }}
         >
-          {isRefreshing ? 'Refreshing…' : 'Pull to refresh'}
+          {isRefreshing ? t('grid.refreshing') : t('grid.pullToRefresh')}
         </div>
       )}
+      {gridToolbar}
       {gridContent}
+      <BulkActionBar
+        selectedRows={selectedRows}
+        actions={effectiveBulkActions ?? []}
+        onAction={(action, rows) => executeAction({ type: action, params: { records: rows } })}
+        onClearSelection={() => setSelectedRows([])}
+      />
       {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>
-          )}
+          {(record) => renderRecordDetail(record)}
         </NavigationOverlay>
       )}
     </div>