feat(grid): type-aware inline cell editors (select dropdown, boolean checkbox) (#2097)

The data-table's inline editor used a plain text box for every field. Extend it to render the field-type-appropriate control, matching the form's controls:

- ObjectGrid forwards each column's field type + select options (a single enrichment over the finalized columns, read from objectSchema — additive, never overrides a type/options a column already set)
- data-table: select/status -> a <Select> dropdown of the field's options (opens on edit, commits on pick); boolean -> a <Checkbox>
- saveEdit accepts an explicit value so discrete pickers commit the chosen value without waiting for setEditValue to flush

(date / datetime / number editors already existed.) Verified live: the Studio grid's 行业 select cell opens a dropdown of its options; type-check + lint clean on both packages.

Co-authored-by: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: os-zhuang

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

@@ -26,7 +26,7 @@ import {
 import { Button } from '../../ui/button';
 import { Input } from '../../ui/input';
 import { Checkbox } from '../../ui/checkbox';
-import { 
+import {
   Select,
   SelectContent,
   SelectItem,
@@ -624,30 +624,34 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     setEditValue(valueToEdit);
   };
 
-  const saveEdit = (force: boolean = false) => {
+  const saveEdit = (force: boolean = false, explicitValue?: any) => {
     if (!editingCell) return;
-    
+
     // Don't save if we're in cancelled state (unless forced)
     if (!force && editingCell === null) return;
-    
+
     const { rowIndex, columnKey } = editingCell;
     const globalIndex = (effectivePage - 1) * pageSize + rowIndex;
     // Under manual pagination `sortedData` IS the current page, so address it
     // page-locally; otherwise it's the full in-memory set indexed absolutely.
     const row = sortedData[manualPagination ? rowIndex : globalIndex];
-    
+
+    // Discrete editors (select / checkbox) commit the chosen value synchronously
+    // via `explicitValue` — their `setEditValue` hasn't flushed to state yet.
+    const valueToStage = explicitValue !== undefined ? explicitValue : editValue;
+
     // Update pending changes
     const newPendingChanges = new Map(pendingChanges);
     const rowChanges = newPendingChanges.get(rowIndex) || {};
-    rowChanges[columnKey] = editValue;
+    rowChanges[columnKey] = valueToStage;
     newPendingChanges.set(rowIndex, rowChanges);
     setPendingChanges(newPendingChanges);
-    
+
     // Call the legacy onCellChange callback if provided
     if (schema.onCellChange) {
-      schema.onCellChange(globalIndex, columnKey, editValue, row);
+      schema.onCellChange(globalIndex, columnKey, valueToStage, row);
     }
-    
+
     setEditingCell(null);
     setEditValue('');
   };
@@ -1237,10 +1241,48 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                                   );
                                 }
 
-                                // NOTE: `select`/`boolean` editors are intentionally not
-                                // wired here — the data-table column does not currently
-                                // carry option metadata. Extension point: when `col.options`
-                                // is forwarded from ObjectGrid, render a <Select>/checkbox.
+                                // Select / single-choice: a dropdown of the field's options
+                                // (forwarded as `col.options` from ObjectGrid), matching the
+                                // form's select control. Opens immediately and commits on pick.
+                                const editOptions = (col as any).options as
+                                  | Array<{ value: unknown; label: string }>
+                                  | undefined;
+                                if (
+                                  (editType === 'select' || editType === 'status') &&
+                                  Array.isArray(editOptions) &&
+                                  editOptions.length > 0
+                                ) {
+                                  return (
+                                    <Select
+                                      defaultOpen
+                                      value={editValue == null ? '' : String(editValue)}
+                                      onValueChange={(v) => saveEdit(true, v)}
+                                    >
+                                      <SelectTrigger className="h-8 px-2 py-1">
+                                        <SelectValue placeholder="—" />
+                                      </SelectTrigger>
+                                      <SelectContent>
+                                        {editOptions.map((o) => (
+                                          <SelectItem key={String(o.value)} value={String(o.value)}>
+                                            {o.label}
+                                          </SelectItem>
+                                        ))}
+                                      </SelectContent>
+                                    </Select>
+                                  );
+                                }
+
+                                // Boolean: a checkbox, like the form's boolean control.
+                                if (editType === 'boolean') {
+                                  return (
+                                    <div className="flex h-8 items-center px-2">
+                                      <Checkbox
+                                        checked={editValue === true || editValue === 'true' || editValue === 1}
+                                        onCheckedChange={(c) => saveEdit(true, !!c)}
+                                      />
+                                    </div>
+                                  );
+                                }
 
                                 // Fallback: plain text input (original behavior).
                                 return (

packages/plugin-grid/src/ObjectGrid.tsx

@@ -1320,7 +1320,21 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     );
   }
 
-  const columns = generateColumns();
+  const columns = generateColumns().map((col: any) => {
+    // Enrich each column with its field type + select options so the
+    // data-table's type-aware inline editor can pick the matching control
+    // (dropdown for select, checkbox for boolean) the form uses, instead of a
+    // plain text box. Additive: never overrides a type/options a path already set.
+    if (!col || col.accessorKey === '_actions') return col;
+    const fieldDef = (objectSchema as any)?.fields?.[col.accessorKey];
+    if (!fieldDef) return col;
+    const next: any = { ...col };
+    if (next.type == null && fieldDef.type) next.type = fieldDef.type;
+    if (next.options == null && fieldDef.options) {
+      next.options = translateOptions(schema.objectName, col.accessorKey, fieldDef.options);
+    }
+    return next;
+  });
 
   // Apply persisted column order and widths
   let persistedColumns = [...columns];