@object-ui/components 3.0.2 → 3.1.0

package/src/renderers/complex/data-table.tsx

@@ -11,6 +11,7 @@ import React, { useState, useMemo, useRef, useEffect } from 'react';
 import { cn } from '../../lib/utils';
 import { ComponentRegistry } from '@object-ui/core';
 import type { DataTableSchema } from '@object-ui/types';
+import { useObjectTranslation } from '@object-ui/react';
 import { 
   Table, 
   TableHeader, 
@@ -46,10 +47,80 @@ import {
   GripVertical,
   Save,
   X,
+  Plus,
+  Expand,
 } from 'lucide-react';
 
 type SortDirection = 'asc' | 'desc' | null;
 
+/** Number of skeleton rows shown when the table has no data */
+const GHOST_ROW_COUNT = 3;
+
+/** Returns a Tailwind width class for ghost cell placeholders to create visual variety */
+function ghostCellWidth(columnIndex: number, totalColumns: number): string {
+  if (columnIndex === 0) return 'w-3/4';
+  if (columnIndex === totalColumns - 1) return 'w-1/3';
+  return 'w-1/2';
+}
+
+// Default English fallback translations for the data table
+const TABLE_DEFAULT_TRANSLATIONS: Record<string, string> = {
+  'table.rowsPerPage': 'Rows per page',
+  'table.pageInfo': 'Page {{current}} of {{total}}',
+  'table.totalRecords': '{{count}} total',
+  'table.noResults': 'No results found',
+  'table.noResultsHint': 'Try adjusting your filters or search query.',
+  'table.sortAsc': 'Sort ascending',
+  'table.sortDesc': 'Sort descending',
+  'table.hideColumn': 'Hide column',
+  'table.cancelAll': 'Cancel All',
+  'table.saveAll': 'Save All ({{count}})',
+  'table.exportCSV': 'Export CSV',
+  'table.addRecord': 'Add record',
+  'table.open': 'Open',
+  'table.search': 'Search...',
+  'table.modified': '{{count}} row modified',
+  'table.selected': '{{count}} selected',
+  'common.actions': 'Actions',
+};
+
+/**
+ * Safe wrapper for useObjectTranslation that falls back to English defaults
+ * when I18nProvider is not available (e.g., standalone usage).
+ */
+function useTableTranslation() {
+  try {
+    const result = useObjectTranslation();
+    const testValue = result.t('table.rowsPerPage');
+    if (testValue === 'table.rowsPerPage') {
+      return {
+        t: (key: string, options?: Record<string, unknown>) => {
+          let value = TABLE_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 = TABLE_DEFAULT_TRANSLATIONS[key] || key;
+        if (options) {
+          for (const [k, v] of Object.entries(options)) {
+            value = value.replace(`{{${k}}}`, String(v));
+          }
+        }
+        return value;
+      },
+    };
+  }
+}
+
 /**
  * Enterprise-level data table component with Airtable-like features.
  * 
@@ -89,7 +160,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
   const {
     caption,
     columns: rawColumns = [],
-    data = [],
+    data: rawData = [],
     pagination = true,
     pageSize: initialPageSize = 10,
     searchable = true,
@@ -100,10 +171,23 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     resizableColumns = true,
     reorderableColumns = true,
     editable = false,
+    singleClickEdit = false,
+    selectionStyle = 'always',
     rowClassName,
+    rowStyle,
     className,
+    frozenColumns = 0,
+    showRowNumbers = false,
+    showAddRow = false,
   } = schema;
 
+  // i18n support for pagination labels
+  const { t } = useTableTranslation();
+
+  // Ensure data is always an array – provider config objects or null/undefined
+  // must not reach array operations like .filter() / .some()
+  const data = Array.isArray(rawData) ? rawData : [];
+
   // Normalize columns to support legacy keys (label/name) from existing JSONs
   const initialColumns = useMemo(() => {
     return rawColumns.map((col: any) => ({
@@ -113,6 +197,31 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     }));
   }, [rawColumns]);
 
+  // Auto-size columns: estimate width from header and data content for columns without explicit widths
+  const autoSizedWidths = useMemo(() => {
+    const widths: Record<string, number> = {};
+    const cols = rawColumns.map((col: any) => ({
+      header: col.header || col.label,
+      accessorKey: col.accessorKey || col.name,
+      width: col.width,
+    }));
+    for (const col of cols) {
+      if (col.width) continue; // Skip columns with explicit widths
+      const headerLen = (col.header || '').length;
+      let maxLen = headerLen;
+      // Sample up to 50 rows for content width estimation
+      const sampleRows = data.slice(0, 50);
+      for (const row of sampleRows) {
+        const val = row[col.accessorKey];
+        const len = val != null ? String(val).length : 0;
+        if (len > maxLen) maxLen = len;
+      }
+      // Estimate pixel width: ~8px per character + 48px padding, min 80, max 400
+      widths[col.accessorKey] = Math.min(400, Math.max(80, maxLen * 8 + 48));
+    }
+    return widths;
+  }, [rawColumns, data]);
+
   // State management
   const [searchQuery, setSearchQuery] = useState('');
   const [sortColumn, setSortColumn] = useState<string | null>(null);
@@ -129,6 +238,8 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
   // Track pending changes for multi-cell editing: rowIndex -> { columnKey -> newValue }
   const [pendingChanges, setPendingChanges] = useState<Map<number, Record<string, any>>>(new Map());
   const [isSaving, setIsSaving] = useState(false);
+  // Column header context menu state
+  const [contextMenu, setContextMenu] = useState<{ x: number; y: number; columnKey: string } | null>(null);
   
   // Refs for column resizing
   const resizingColumn = useRef<string | null>(null);
@@ -204,6 +315,25 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     }
   };
 
+  // Column header context menu handler
+  const handleColumnContextMenu = (e: React.MouseEvent, columnKey: string) => {
+    e.preventDefault();
+    setContextMenu({ x: e.clientX, y: e.clientY, columnKey });
+  };
+
+  const hideColumn = (columnKey: string) => {
+    setColumns(prev => prev.filter(c => c.accessorKey !== columnKey));
+    setContextMenu(null);
+  };
+
+  // Close context menu on outside click
+  useEffect(() => {
+    if (!contextMenu) return;
+    const close = () => setContextMenu(null);
+    document.addEventListener('click', close);
+    return () => document.removeEventListener('click', close);
+  }, [contextMenu]);
+
   const handleSelectAll = (checked: boolean) => {
     const newSelected = new Set<any>();
     if (checked) {
@@ -263,12 +393,12 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
 
   const getSortIcon = (columnKey: string) => {
     if (sortColumn !== columnKey) {
-      return <ChevronsUpDown className="h-4 w-4 ml-1 opacity-50" />;
+      return <ChevronsUpDown className="h-3 w-3 ml-0.5 opacity-0 group-hover:opacity-50 transition-opacity" />;
     }
     if (sortDirection === 'asc') {
-      return <ChevronUp className="h-4 w-4 ml-1" />;
+      return <ChevronUp className="h-3 w-3 ml-0.5 text-primary" />;
     }
-    return <ChevronDown className="h-4 w-4 ml-1" />;
+    return <ChevronDown className="h-3 w-3 ml-0.5 text-primary" />;
   };
 
   // Column resizing handlers
@@ -456,6 +586,21 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
   };
 
   const handleCellKeyDown = (e: React.KeyboardEvent, rowIndex: number, columnKey: string) => {
+    // Copy cell value with Ctrl+C / Cmd+C
+    if ((e.ctrlKey || e.metaKey) && e.key === 'c' && !editingCell) {
+      e.preventDefault();
+      const globalIdx = (currentPage - 1) * pageSize + rowIndex;
+      const row = sortedData[globalIdx];
+      if (row) {
+        const value = row[columnKey];
+        const text = value != null ? String(value) : '';
+        navigator.clipboard.writeText(text).catch(() => {
+          // Fallback for environments without clipboard API
+        });
+      }
+      return;
+    }
+
     if (!editable) return;
     
     const column = columns.find(col => col.accessorKey === columnKey);
@@ -519,7 +664,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
               <div className="relative w-full sm:max-w-sm flex-1">
                 <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                 <Input
-                  placeholder="Search..."
+                  placeholder={t('table.search')}
                   value={searchQuery}
                   onChange={(e) => {
                     setSearchQuery(e.target.value);
@@ -535,7 +680,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
             {hasPendingChanges && (
               <>
                 <div className="text-sm text-muted-foreground">
-                  {pendingChanges.size} row{pendingChanges.size > 1 ? 's' : ''} modified
+                  {t('table.modified', { count: pendingChanges.size })}
                 </div>
                 <Button
                   variant="outline"
@@ -544,7 +689,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                   disabled={isSaving}
                 >
                   <X className="h-4 w-4 mr-2" />
-                  Cancel All
+                  {t('table.cancelAll')}
                 </Button>
                 <Button
                   variant="default"
@@ -553,7 +698,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                   disabled={isSaving}
                 >
                   <Save className="h-4 w-4 mr-2" />
-                  Save All ({pendingChanges.size})
+                  {t('table.saveAll', { count: pendingChanges.size })}
                 </Button>
               </>
             )}
@@ -566,13 +711,13 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                 disabled={sortedData.length === 0}
               >
                 <Download className="h-4 w-4 mr-2" />
-                Export CSV
+                {t('table.exportCSV')}
               </Button>
             )}
             
             {selectable && selectedRowIds.size > 0 && (
               <div className="text-sm text-muted-foreground">
-                {selectedRowIds.size} selected
+                {t('table.selected', { count: selectedRowIds.size })}
               </div>
             )}
           </div>
@@ -583,20 +728,35 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
       <div className="rounded-md border flex-1 min-h-0 overflow-auto relative bg-background [-webkit-overflow-scrolling:touch] shadow-[inset_-8px_0_8px_-8px_rgba(0,0,0,0.08)]">
         <Table>
           {caption && <TableCaption>{caption}</TableCaption>}
-          <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
+          <TableHeader className="sticky top-0 bg-muted/30 z-10">
             <TableRow>
               {selectable && (
-                <TableHead className="w-12 bg-background">
+                <TableHead className={cn("w-10 bg-muted/30", frozenColumns > 0 && "sticky left-0 z-20")}>
                   <Checkbox
                     checked={allPageRowsSelected ? true : somePageRowsSelected ? 'indeterminate' : false}
                     onCheckedChange={handleSelectAll}
                   />
                 </TableHead>
               )}
+              {showRowNumbers && (
+                <TableHead className={cn("w-10 bg-muted/30 text-center", frozenColumns > 0 && "sticky z-20")} style={frozenColumns > 0 ? { left: selectable ? 40 : 0 } : undefined}>
+                  <span className="text-xs text-muted-foreground">#</span>
+                </TableHead>
+              )}
               {columns.map((col, index) => {
-                const columnWidth = columnWidths[col.accessorKey] || col.width;
+                const columnWidth = columnWidths[col.accessorKey] || col.width || autoSizedWidths[col.accessorKey];
                 const isDragging = draggedColumn === index;
                 const isDragOver = dragOverColumn === index;
+                const isFrozen = frozenColumns > 0 && index < frozenColumns;
+                const frozenOffset = isFrozen
+                  ? columns.slice(0, index).reduce((sum, c, i) => {
+                      if (i < frozenColumns) {
+                        const w = columnWidths[c.accessorKey] || c.width || autoSizedWidths[c.accessorKey];
+                        return sum + (typeof w === 'number' ? w : w ? parseInt(String(w), 10) || 150 : 150);
+                      }
+                      return sum;
+                    }, (selectable ? 40 : 0) + (showRowNumbers ? 40 : 0))
+                  : undefined;
                 
                 return (
                   <TableHead
@@ -608,11 +768,14 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                       isDragOver && 'border-l-2 border-primary',
                       col.align === 'right' && 'text-right',
                       col.align === 'center' && 'text-center',
-                      'relative group bg-background'
+                      'relative group bg-muted/30',
+                      isFrozen && 'sticky z-20',
+                      isFrozen && index === frozenColumns - 1 && 'border-r-2 border-border shadow-[2px_0_4px_-2px_rgba(0,0,0,0.1)]',
                     )}
                     style={{ 
                       width: columnWidth,
-                      minWidth: columnWidth 
+                      minWidth: columnWidth,
+                      ...(isFrozen && { left: frozenOffset }),
                     }}
                     draggable={reorderableColumns}
                     onDragStart={(e) => handleColumnDragStart(e, index)}
@@ -620,6 +783,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                     onDrop={(e) => handleColumnDrop(e, index)}
                     onDragEnd={handleColumnDragEnd}
                     onClick={() => sortable && col.sortable !== false && handleSort(col.accessorKey)}
+                    onContextMenu={(e) => handleColumnContextMenu(e, col.accessorKey)}
                   >
                     <div className={cn(
                       "flex items-center",
@@ -629,7 +793,10 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                         {reorderableColumns && (
                           <GripVertical className="h-4 w-4 opacity-0 group-hover:opacity-50 cursor-grab active:cursor-grabbing flex-shrink-0" />
                         )}
-                        <span>{col.header}</span>
+                        {col.headerIcon && (
+                          <span className="text-muted-foreground flex-shrink-0">{col.headerIcon}</span>
+                        )}
+                        <span className="text-xs font-normal text-muted-foreground">{col.header}</span>
                         {sortable && col.sortable !== false && getSortIcon(col.accessorKey)}
                       </div>
                       {resizableColumns && col.resizable !== false && (
@@ -644,24 +811,39 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                 );
               })}
               {rowActions && (
-                <TableHead className="w-24 text-right bg-background">Actions</TableHead>
+                <TableHead className="w-24 text-right bg-muted/30">{t('common.actions')}</TableHead>
               )}
             </TableRow>
           </TableHeader>
           <TableBody>
             {paginatedData.length === 0 ? (
-              <TableRow>
-                <TableCell
-                  colSpan={columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0)}
-                  className="h-96 text-center text-muted-foreground"
-                >
-                  <div className="flex flex-col items-center justify-center gap-2">
-                    <Search className="h-8 w-8 text-muted-foreground/50" />
-                    <p>No results found</p>
-                    <p className="text-xs text-muted-foreground/50">Try adjusting your filters or search query.</p>
-                  </div>
-                </TableCell>
-              </TableRow>
+              <>
+                <TableRow>
+                  <TableCell
+                    colSpan={columns.length + (selectable ? 1 : 0) + (showRowNumbers ? 1 : 0) + (rowActions ? 1 : 0)}
+                    className="h-24 text-center text-muted-foreground"
+                  >
+                    <div className="flex flex-col items-center justify-center gap-2">
+                      <Search className="h-8 w-8 text-muted-foreground/50" />
+                      <p>{t('table.noResults')}</p>
+                      <p className="text-xs text-muted-foreground/50">{t('table.noResultsHint')}</p>
+                    </div>
+                  </TableCell>
+                </TableRow>
+                {/* Ghost placeholder rows – visual skeleton to maintain table height when empty */}
+                {Array.from({ length: GHOST_ROW_COUNT }).map((_, i) => (
+                  <TableRow key={`ghost-${i}`} className="hover:bg-transparent opacity-[0.15] pointer-events-none" data-testid="ghost-row">
+                    {selectable && <TableCell className="p-3"><div className="h-4 w-4 rounded border border-muted-foreground/30" /></TableCell>}
+                    {showRowNumbers && <TableCell className="text-center p-3"><div className="h-3 w-6 mx-auto rounded bg-muted-foreground/30" /></TableCell>}
+                    {columns.map((_col, ci) => (
+                      <TableCell key={ci} className="p-3">
+                        <div className={cn("h-3 rounded bg-muted-foreground/30", ghostCellWidth(ci, columns.length))} />
+                      </TableCell>
+                    ))}
+                    {rowActions && <TableCell className="p-3"><div className="h-3 w-8 rounded bg-muted-foreground/30" /></TableCell>}
+                  </TableRow>
+                ))}
+              </>
             ) : (
               <>
                 {paginatedData.map((row, rowIndex) => {
@@ -676,10 +858,12 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                       key={rowId} 
                       data-state={isSelected ? 'selected' : undefined}
                       className={cn(
+                        "bg-background border-b border-border hover:bg-muted/30 group/row",
                         schema.onRowClick && "cursor-pointer",
                         rowHasChanges && "bg-amber-50 dark:bg-amber-950/20",
                         rowClassName && rowClassName(row, rowIndex)
                       )}
+                      style={rowStyle ? rowStyle(row, rowIndex) : undefined}
                       onClick={(e) => {
                         if (schema.onRowClick && !e.defaultPrevented) {
                            // Simple heuristic to avoid triggering on interactive elements if they didn't stop propagation
@@ -692,20 +876,69 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                       }}
                     >
                       {selectable && (
-                        <TableCell>
-                          <Checkbox
-                            checked={isSelected}
-                            onCheckedChange={(checked) => handleSelectRow(rowId, checked as boolean)}
-                          />
+                        <TableCell className={cn(frozenColumns > 0 && "sticky left-0 z-10 bg-background", selectionStyle === 'hover' && "relative")}>
+                          {selectionStyle === 'hover' ? (
+                            <div className={cn("transition-opacity", isSelected ? "opacity-100" : "opacity-0 group-hover/row:opacity-100")}>
+                              <Checkbox
+                                checked={isSelected}
+                                onCheckedChange={(checked) => handleSelectRow(rowId, checked as boolean)}
+                              />
+                            </div>
+                          ) : (
+                            <Checkbox
+                              checked={isSelected}
+                              onCheckedChange={(checked) => handleSelectRow(rowId, checked as boolean)}
+                            />
+                          )}
+                        </TableCell>
+                      )}
+                      {showRowNumbers && (
+                        <TableCell className={cn("text-center w-10 relative", frozenColumns > 0 && "sticky z-10 bg-background")} style={frozenColumns > 0 ? { left: selectable ? 40 : 0 } : undefined}>
+                          <span className={cn("text-xs text-muted-foreground tabular-nums select-none", selectable ? "group-hover/row:hidden" : "group-hover/row:invisible")}>
+                            {globalIndex + 1}
+                          </span>
+                          {selectable ? (
+                            <div className="absolute inset-0 hidden group-hover/row:flex items-center justify-center">
+                              <Checkbox
+                                checked={isSelected}
+                                onCheckedChange={(checked) => handleSelectRow(rowId, checked as boolean)}
+                                data-testid="row-hover-checkbox"
+                              />
+                            </div>
+                          ) : schema.onRowClick && (
+                            <button
+                              type="button"
+                              className="absolute inset-0 hidden group-hover/row:flex items-center justify-center gap-0.5 text-xs font-medium text-primary hover:text-primary/80"
+                              data-testid="row-expand-button"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                schema.onRowClick?.(row);
+                              }}
+                              title="Open record"
+                            >
+                              <span>{t('table.open')}</span>
+                              <ChevronRight className="h-3 w-3" />
+                            </button>
+                          )}
                         </TableCell>
                       )}
                       {columns.map((col, colIndex) => {
-                        const columnWidth = columnWidths[col.accessorKey] || col.width;
+                        const columnWidth = columnWidths[col.accessorKey] || col.width || autoSizedWidths[col.accessorKey];
                         const originalValue = row[col.accessorKey];
                         const hasPendingChange = rowChanges[col.accessorKey] !== undefined;
                         const cellValue = hasPendingChange ? rowChanges[col.accessorKey] : originalValue;
                         const isEditing = editingCell?.rowIndex === rowIndex && editingCell?.columnKey === col.accessorKey;
                         const isEditable = editable && col.editable !== false;
+                        const isFrozen = frozenColumns > 0 && colIndex < frozenColumns;
+                        const frozenOffset = isFrozen
+                          ? columns.slice(0, colIndex).reduce((sum, c, i) => {
+                              if (i < frozenColumns) {
+                                const w = columnWidths[c.accessorKey] || c.width || autoSizedWidths[c.accessorKey];
+                                return sum + (typeof w === 'number' ? w : w ? parseInt(String(w), 10) || 150 : 150);
+                              }
+                              return sum;
+                            }, (selectable ? 40 : 0) + (showRowNumbers ? 40 : 0))
+                          : undefined;
                         
                         return (
                           <TableCell 
@@ -715,14 +948,18 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                               col.align === 'right' && 'text-right',
                               col.align === 'center' && 'text-center',
                               isEditable && !isEditing && "cursor-text hover:bg-muted/50",
-                              hasPendingChange && "font-semibold text-amber-700 dark:text-amber-400"
+                              hasPendingChange && "font-semibold text-amber-700 dark:text-amber-400",
+                              isFrozen && 'sticky z-10 bg-background',
+                              isFrozen && colIndex === frozenColumns - 1 && 'border-r-2 border-border shadow-[2px_0_4px_-2px_rgba(0,0,0,0.1)]',
                             )}
                             style={{
                               width: columnWidth,
                               minWidth: columnWidth,
-                              maxWidth: columnWidth
+                              maxWidth: columnWidth,
+                              ...(isFrozen && { left: frozenOffset }),
                             }}
-                            onDoubleClick={() => isEditable && startEdit(rowIndex, col.accessorKey)}
+                            onDoubleClick={() => isEditable && !singleClickEdit && startEdit(rowIndex, col.accessorKey)}
+                            onClick={() => isEditable && singleClickEdit && startEdit(rowIndex, col.accessorKey)}
                             onKeyDown={(e) => handleCellKeyDown(e, rowIndex, col.accessorKey)}
                             tabIndex={0}
                           >
@@ -790,10 +1027,28 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                     </TableRow>
                   );
                 })}
-                {/* Filler rows to maintain height consistency */}
-                {paginatedData.length > 0 && Array.from({ length: Math.max(0, pageSize - paginatedData.length) }).map((_, i) => (
+                {/* Add record row (Airtable-style) */}
+                {showAddRow && (
+                  <TableRow
+                    className="hover:bg-muted/30 cursor-pointer border-b border-border"
+                    data-testid="add-record-row"
+                    onClick={() => schema.onAddRecord?.()}
+                  >
+                    <TableCell
+                      colSpan={columns.length + (selectable ? 1 : 0) + (showRowNumbers ? 1 : 0) + (rowActions ? 1 : 0)}
+                      className="h-9 px-3 py-1.5"
+                    >
+                      <span className="flex items-center gap-1.5 text-muted-foreground text-sm hover:text-foreground transition-colors">
+                        <Plus className="h-3.5 w-3.5" />
+                        {t('table.addRecord')}
+                      </span>
+                    </TableCell>
+                  </TableRow>
+                )}
+                {/* Filler rows to maintain height consistency (only when pagination is enabled) */}
+                {pagination && paginatedData.length > 0 && Array.from({ length: Math.max(0, pageSize - paginatedData.length) }).map((_, i) => (
                   <TableRow key={`empty-${i}`} className="hover:bg-transparent">
-                    <TableCell colSpan={columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0)} className="h-[52px] p-0" />
+                    <TableCell colSpan={columns.length + (selectable ? 1 : 0) + (showRowNumbers ? 1 : 0) + (rowActions ? 1 : 0)} className="h-[52px] p-0" />
                   </TableRow>
                 ))}
               </>
@@ -806,7 +1061,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
       {pagination && sortedData.length > 0 && (
         <div className="flex flex-col sm:flex-row items-center justify-between gap-2">
           <div className="flex items-center gap-2">
-            <span className="text-xs sm:text-sm text-muted-foreground">Rows per page:</span>
+            <span className="text-xs sm:text-sm text-muted-foreground">{t('table.rowsPerPage')}:</span>
             <Select
               value={pageSize.toString()}
               onValueChange={(value) => {
@@ -829,7 +1084,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
 
           <div className="flex items-center gap-2">
             <span className="text-xs sm:text-sm text-muted-foreground">
-              Page {currentPage} of {totalPages} <span className="hidden sm:inline">({sortedData.length} total)</span>
+              {t('table.pageInfo', { current: currentPage, total: totalPages })} <span className="hidden sm:inline">({t('table.totalRecords', { count: sortedData.length })})</span>
             </span>
             <div className="flex items-center gap-1">
               <Button
@@ -868,6 +1123,54 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
           </div>
         </div>
       )}
+
+      {/* Column header context menu */}
+      {contextMenu && (
+        <div
+          className="fixed z-50 min-w-[160px] rounded-md border bg-popover p-1 shadow-md"
+          style={{ left: contextMenu.x, top: contextMenu.y }}
+          data-testid="column-context-menu"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {sortable && (
+            <>
+              <button
+                type="button"
+                className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground cursor-pointer"
+                onClick={() => {
+                  setSortColumn(contextMenu.columnKey);
+                  setSortDirection('asc');
+                  setContextMenu(null);
+                }}
+              >
+                <ChevronUp className="h-3.5 w-3.5" />
+                {t('table.sortAsc')}
+              </button>
+              <button
+                type="button"
+                className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground cursor-pointer"
+                onClick={() => {
+                  setSortColumn(contextMenu.columnKey);
+                  setSortDirection('desc');
+                  setContextMenu(null);
+                }}
+              >
+                <ChevronDown className="h-3.5 w-3.5" />
+                {t('table.sortDesc')}
+              </button>
+              <div className="my-1 h-px bg-border" />
+            </>
+          )}
+          <button
+            type="button"
+            className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground cursor-pointer"
+            onClick={() => hideColumn(contextMenu.columnKey)}
+          >
+            <X className="h-3.5 w-3.5" />
+            {t('table.hideColumn')}
+          </button>
+        </div>
+      )}
     </div>
   );
 };

package/src/renderers/data-display/breadcrumb.tsx

@@ -10,6 +10,7 @@ import { ComponentRegistry } from '@object-ui/core';
 import type { BreadcrumbSchema } from '@object-ui/types';
 import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from '../../ui/breadcrumb';
 import { renderChildren } from '../../lib/utils';
+import { resolveI18nLabel } from '@object-ui/react';
 
 ComponentRegistry.register('breadcrumb', 
   ({ schema, ...props }: { schema: BreadcrumbSchema; [key: string]: any }) => {
@@ -31,9 +32,9 @@ ComponentRegistry.register('breadcrumb',
             <div key={idx} className="flex items-center">
               <BreadcrumbItem>
                 {idx === (schema.items?.length || 0) - 1 ? (
-                  <BreadcrumbPage>{item.label}</BreadcrumbPage>
+                  <BreadcrumbPage>{resolveI18nLabel(item.label) ?? ''}</BreadcrumbPage>
                 ) : (
-                  <BreadcrumbLink href={item.href}>{item.label}</BreadcrumbLink>
+                  <BreadcrumbLink href={item.href}>{resolveI18nLabel(item.label) ?? ''}</BreadcrumbLink>
                 )}
               </BreadcrumbItem>
               {idx < (schema.items?.length || 0) - 1 && <BreadcrumbSeparator />}

package/src/renderers/form/form.tsx

@@ -161,12 +161,12 @@ ComponentRegistry.register('form',
     };
 
     // Determine grid classes based on columns (explicit classes for Tailwind JIT)
-    // Mobile-first: 1 column on mobile, 2 on sm, then md/lg for larger values
+    // Mobile-first: 1 column on mobile, responsive breakpoints for larger screens
     const gridColsClass = 
       columns === 1 ? '' :
-      columns === 2 ? 'sm:grid-cols-2' :
-      columns === 3 ? 'sm:grid-cols-2 md:grid-cols-3' :
-      'sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4';
+      columns === 2 ? 'md:grid-cols-2' :
+      columns === 3 ? 'md:grid-cols-2 lg:grid-cols-3' :
+      'md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4';
     
     const gridClass = columns > 1 
       ? cn('grid gap-4', gridColsClass)