fix: i18n compliance, row selection auto-enable, column width, border contrast improvements

- Replace all hardcoded UI strings in data-table.tsx with t() calls
- Replace hardcoded strings in ListView.tsx with t() calls
- Add missing i18n keys to en.ts and zh.ts locale files
- Auto-enable multi-select when bulk actions are defined in ObjectGrid
- Reduce index/selection column widths from w-12 to w-10
- Increase row border contrast from border-border/50 to border-border
- Fix filler row colSpan to include showRowNumbers

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

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

@@ -68,6 +68,20 @@ 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(s) modified',
+  'table.selected': '{{count}} selected',
+  'common.actions': 'Actions',
 };
 
 /**
@@ -650,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);
@@ -666,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"
@@ -675,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"
@@ -684,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>
               </>
             )}
@@ -697,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>
@@ -717,15 +731,15 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
           <TableHeader className="sticky top-0 bg-muted/30 z-10">
             <TableRow>
               {selectable && (
-                <TableHead className={cn("w-12 bg-muted/30", frozenColumns > 0 && "sticky left-0 z-20")}>
+                <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-12 bg-muted/30 text-center", frozenColumns > 0 && "sticky z-20")} style={frozenColumns > 0 ? { left: selectable ? 48 : 0 } : undefined}>
+                <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>
               )}
@@ -741,7 +755,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                         return sum + (typeof w === 'number' ? w : w ? parseInt(String(w), 10) || 150 : 150);
                       }
                       return sum;
-                    }, (selectable ? 48 : 0) + (showRowNumbers ? 48 : 0))
+                    }, (selectable ? 40 : 0) + (showRowNumbers ? 40 : 0))
                   : undefined;
 
                 return (
@@ -797,7 +811,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                 );
               })}
               {rowActions && (
-                <TableHead className="w-24 text-right bg-muted/30">Actions</TableHead>
+                <TableHead className="w-24 text-right bg-muted/30">{t('common.actions')}</TableHead>
               )}
             </TableRow>
           </TableHeader>
@@ -811,8 +825,8 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                   >
                     <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>
+                      <p>{t('table.noResults')}</p>
+                      <p className="text-xs text-muted-foreground/50">{t('table.noResultsHint')}</p>
                     </div>
                   </TableCell>
                 </TableRow>
@@ -844,7 +858,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                       key={rowId} 
                       data-state={isSelected ? 'selected' : undefined}
                       className={cn(
-                        "bg-background border-b border-border/50 hover:bg-muted/30 group/row",
+                        "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)
@@ -879,7 +893,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                         </TableCell>
                       )}
                       {showRowNumbers && (
-                        <TableCell className={cn("text-center w-12 relative", frozenColumns > 0 && "sticky z-10 bg-background")} style={frozenColumns > 0 ? { left: selectable ? 48 : 0 } : undefined}>
+                        <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>
@@ -902,7 +916,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                               }}
                               title="Open record"
                             >
-                              <span>Open</span>
+                              <span>{t('table.open')}</span>
                               <ChevronRight className="h-3 w-3" />
                             </button>
                           )}
@@ -923,7 +937,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                                 return sum + (typeof w === 'number' ? w : w ? parseInt(String(w), 10) || 150 : 150);
                               }
                               return sum;
-                            }, (selectable ? 48 : 0) + (showRowNumbers ? 48 : 0))
+                            }, (selectable ? 40 : 0) + (showRowNumbers ? 40 : 0))
                           : undefined;
 
                         return (
@@ -1016,7 +1030,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                 {/* Add record row (Airtable-style) */}
                 {showAddRow && (
                   <TableRow
-                    className="hover:bg-muted/30 cursor-pointer border-b border-border/50"
+                    className="hover:bg-muted/30 cursor-pointer border-b border-border"
                     data-testid="add-record-row"
                     onClick={() => schema.onAddRecord?.()}
                   >
@@ -1026,15 +1040,15 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                     >
                       <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" />
-                        Add record
+                        {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>
                 ))}
               </>
@@ -1130,7 +1144,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                 }}
               >
                 <ChevronUp className="h-3.5 w-3.5" />
-                Sort ascending
+                {t('table.sortAsc')}
               </button>
               <button
                 type="button"
@@ -1142,7 +1156,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                 }}
               >
                 <ChevronDown className="h-3.5 w-3.5" />
-                Sort descending
+                {t('table.sortDesc')}
               </button>
               <div className="my-1 h-px bg-border" />
             </>
@@ -1153,7 +1167,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
             onClick={() => hideColumn(contextMenu.columnKey)}
           >
             <X className="h-3.5 w-3.5" />
-            Hide column
+            {t('table.hideColumn')}
           </button>
         </div>
       )}

packages/i18n/src/locales/en.ts

@@ -74,6 +74,15 @@ const en = {
     unfreezeColumn: 'Unfreeze column',
     pageInfo: 'Page {{current}} of {{total}}',
     totalRecords: '{{count}} total',
+    noResults: 'No results found',
+    noResultsHint: 'Try adjusting your filters or search query.',
+    cancelAll: 'Cancel All',
+    saveAll: 'Save All ({{count}})',
+    addRecord: 'Add record',
+    open: 'Open',
+    search: 'Search...',
+    modified: '{{count}} row(s) modified',
+    selected: '{{count}} selected',
   },
   grid: {
     actions: 'Actions',
@@ -122,6 +131,13 @@ const en = {
     hideFields: 'Hide fields',
     noItems: 'No items found',
     noItemsMessage: 'There are no records to display. Try adjusting your filters or adding new data.',
+    showAll: 'Show all',
+    pullToRefresh: 'Pull to refresh',
+    refreshing: 'Refreshing…',
+    share: 'Share',
+    print: 'Print',
+    hideFieldsTitle: 'Hide Fields',
+    dataLimitReached: 'Showing first {{limit}} records. More data may be available.',
   },
   kanban: {
     addCard: 'Add card',

packages/i18n/src/locales/zh.ts

@@ -74,6 +74,15 @@ const zh = {
     unfreezeColumn: '取消冻结列',
     pageInfo: '第 {{current}} 页，共 {{total}} 页',
     totalRecords: '共 {{count}} 条',
+    noResults: '未找到结果',
+    noResultsHint: '请尝试调整筛选条件或搜索关键词。',
+    cancelAll: '全部取消',
+    saveAll: '全部保存 ({{count}})',
+    addRecord: '添加记录',
+    open: '打开',
+    search: '搜索...',
+    modified: '{{count}} 行已修改',
+    selected: '已选择 {{count}} 项',
   },
   grid: {
     actions: '操作',
@@ -122,6 +131,13 @@ const zh = {
     hideFields: '隐藏字段',
     noItems: '未找到项目',
     noItemsMessage: '没有可显示的记录。请尝试调整筛选条件或添加新数据。',
+    showAll: '显示全部',
+    pullToRefresh: '下拉刷新',
+    refreshing: '刷新中…',
+    share: '分享',
+    print: '打印',
+    hideFieldsTitle: '隐藏字段',
+    dataLimitReached: '显示前 {{limit}} 条记录。可能有更多数据。',
   },
   kanban: {
     addCard: '添加卡片',

packages/plugin-grid/src/ObjectGrid.tsx

@@ -1065,12 +1065,18 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     : (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)
@@ -1503,9 +1509,6 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     </div>
   ) : null;
 
-  // Bulk actions — support both batchActions (ObjectUI) and bulkActions (spec) names
-  const effectiveBulkActions = schema.batchActions ?? (schema as any).bulkActions;
-
   // Render grid content: grouped (multiple tables with headers) or flat (single table)
   const gridContent = isGrouped ? (
     <div className="space-y-2">

packages/plugin-list/src/ListView.tsx

@@ -216,6 +216,9 @@ const LIST_DEFAULT_TRANSLATIONS: Record<string, string> = {
   'list.addRecord': 'Add record',
   'list.tabs': 'Tabs',
   'list.allRecords': 'All Records',
+  'list.share': 'Share',
+  'list.print': 'Print',
+  'list.hideFieldsTitle': 'Hide Fields',
 };
 
 /**
@@ -1038,7 +1041,7 @@ export const ListView: React.FC<ListViewProps> = ({
           className="flex items-center justify-center text-xs text-muted-foreground"
           style={{ height: pullDistance }}
         >
-          {isRefreshing ? 'Refreshing…' : 'Pull to refresh'}
+          {isRefreshing ? t('list.refreshing') : t('list.pullToRefresh')}
         </div>
       )}
       {/* Airtable-style Toolbar — Row 1: View tabs */}
@@ -1100,7 +1103,7 @@ export const ListView: React.FC<ListViewProps> = ({
                 )}
               >
                 <EyeOff className="h-3.5 w-3.5 mr-1.5" />
-                <span className="hidden sm:inline">Hide fields</span>
+                <span className="hidden sm:inline">{t('list.hideFields')}</span>
                 {hiddenFields.size > 0 && (
                   <span className="ml-1 flex h-4 min-w-[16px] items-center justify-center rounded-full bg-primary/10 text-[10px] font-medium text-primary">
                     {hiddenFields.size}
@@ -1111,10 +1114,10 @@ export const ListView: React.FC<ListViewProps> = ({
             <PopoverContent align="start" className="w-64 p-3">
               <div className="space-y-2">
                 <div className="flex items-center justify-between border-b pb-2">
-                  <h4 className="font-medium text-sm">Hide Fields</h4>
+                  <h4 className="font-medium text-sm">{t('list.hideFieldsTitle')}</h4>
                   {hiddenFields.size > 0 && (
                     <Button variant="ghost" size="sm" className="h-6 px-2 text-xs" onClick={() => setHiddenFields(new Set())}>
-                      Show all
+                      {t('list.showAll')}
                     </Button>
                   )}
                 </div>
@@ -1410,7 +1413,7 @@ export const ListView: React.FC<ListViewProps> = ({
               data-testid="share-button"
             >
               <Share2 className="h-3.5 w-3.5 mr-1.5" />
-              <span className="hidden sm:inline">Share</span>
+              <span className="hidden sm:inline">{t('list.share')}</span>
             </Button>
           )}
 
@@ -1424,7 +1427,7 @@ export const ListView: React.FC<ListViewProps> = ({
               data-testid="print-button"
             >
               <Printer className="h-3.5 w-3.5 mr-1.5" />
-              <span className="hidden sm:inline">Print</span>
+              <span className="hidden sm:inline">{t('list.print')}</span>
             </Button>
           )}