@jmruthers/pace-core 0.5.106 → 0.5.108

package/src/components/DataTable/components/EditableRow.tsx

@@ -10,6 +10,9 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
+  SelectGroup,
+  SelectLabel,
+  SelectSeparator,
 } from '../../Select/Select';
 import type { CellValue, DataRecord, DataTableAction, EditableColumnDef } from '../types';
 
@@ -25,6 +28,170 @@ interface EditableRowProps<TData extends DataRecord> {
   hierarchical?: boolean;
 }
 
+// Component for select fields with searchable and creatable support
+function SelectEditField<TData extends DataRecord>({
+  columnDef,
+  accessorKey,
+  currentValue,
+  placeholder,
+  onChange,
+  className,
+}: {
+  columnDef: EditableColumnDef<TData>;
+  accessorKey: string;
+  currentValue: CellValue;
+  placeholder?: string;
+  onChange: (value: CellValue) => void;
+  className?: string;
+}) {
+  // Determine if searchable - explicitly check for true to ensure visible search input appears
+  // When selectSearchable is true or undefined, show the visible search input box
+  // When selectSearchable is false, hide the search input (type-to-search still works via SelectContent internals)
+  const isSearchable = columnDef.selectSearchable !== false;
+  const isCreatable = columnDef.creatable === true;
+  const selectRef = React.useRef<HTMLFormElement>(null);
+  const [searchTerm, setSearchTerm] = React.useState('');
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [showCreateOption, setShowCreateOption] = React.useState(false);
+
+  // Monitor search input value via DOM events to detect when user types
+  React.useEffect(() => {
+    if (!isOpen || !isSearchable || !isCreatable || !selectRef.current) return;
+    
+    const searchInput = selectRef.current.querySelector<HTMLInputElement>('[data-testid="select-search-input"]');
+    if (!searchInput) return;
+
+    const handleInput = (e: Event) => {
+      const target = e.target as HTMLInputElement;
+      const currentSearch = target.value;
+      setSearchTerm(currentSearch);
+      
+      // Check if search doesn't match any option (including items in groups)
+      if (currentSearch.trim()) {
+        const searchLower = currentSearch.toLowerCase().trim();
+        
+        // Helper to check if an option matches
+        // Use explicit union type instead of typeof to avoid Babel parsing issues
+        type FieldOption = 
+          | { value: string | number; label: string }
+          | { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> }
+          | { type: 'separator' };
+        
+        const checkMatch = (opt: FieldOption): boolean => {
+          // Simple option
+          if ('value' in opt && !('type' in opt)) {
+            return opt.label.toLowerCase().includes(searchLower);
+          }
+          // Group - check items within the group
+          if ('type' in opt && opt.type === 'group') {
+            return (opt as { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> }).items.some((item: { value: string | number; label: string }) => item.label.toLowerCase().includes(searchLower));
+          }
+          // Separator - doesn't match
+          return false;
+        };
+        
+        const hasMatch = (columnDef.fieldOptions || []).some(checkMatch);
+        setShowCreateOption(!hasMatch);
+      } else {
+        setShowCreateOption(false);
+      }
+    };
+
+    searchInput.addEventListener('input', handleInput);
+    
+    return () => {
+      searchInput.removeEventListener('input', handleInput);
+    };
+  }, [isOpen, isSearchable, isCreatable, columnDef.fieldOptions]);
+
+  const handleCreateNew = React.useCallback(async () => {
+    if (!isCreatable || !columnDef.onCreateNew || !searchTerm.trim()) return;
+    
+    try {
+      const newValue = await columnDef.onCreateNew(searchTerm.trim());
+      onChange(newValue);
+      setSearchTerm('');
+      setShowCreateOption(false);
+    } catch (error) {
+      console.error('Error creating new item:', error);
+    }
+  }, [isCreatable, columnDef.onCreateNew, searchTerm, onChange]);
+
+  return (
+    <Select
+      ref={selectRef}
+      value={String(currentValue)}
+      onValueChange={(newValue) => {
+        if (newValue.startsWith('__create_new__')) {
+          handleCreateNew();
+        } else {
+          onChange(newValue as CellValue);
+        }
+      }}
+      onOpenChange={(open) => {
+        setIsOpen(open);
+        if (!open) {
+          setSearchTerm('');
+          setShowCreateOption(false);
+        }
+      }}
+    >
+      <SelectTrigger className={className || "w-full h-7"}>
+        <SelectValue placeholder={placeholder || `Select ${columnDef.header || 'option'}...`} />
+      </SelectTrigger>
+      <SelectContent 
+        searchable={Boolean(isSearchable)}
+        searchPlaceholder={`Search ${columnDef.header || 'options'}...`}
+        maxHeight={columnDef.selectMaxHeight}
+        className={columnDef.selectContentClassName}
+        style={columnDef.selectContentStyle}
+      >
+        {columnDef.fieldOptions?.map((option, index) => {
+          // Simple option item
+          if ('value' in option && !('type' in option)) {
+            return (
+              <SelectItem key={`${option.value}-${index}`} value={String(option.value)}>
+                {option.label}
+              </SelectItem>
+            );
+          }
+          
+          // Separator
+          if ('type' in option && option.type === 'separator') {
+            return <SelectSeparator key={`separator-${index}`} />;
+          }
+          
+          // Group with label
+          if ('type' in option && option.type === 'group') {
+            const groupOption = option as { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> };
+            return (
+              <SelectGroup key={`group-${groupOption.label}-${index}`}>
+                <SelectLabel>{groupOption.label}</SelectLabel>
+                {groupOption.items.map((item: { value: string | number; label: string }) => (
+                  <SelectItem key={`${item.value}-${index}`} value={String(item.value)}>
+                    {item.label}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            );
+          }
+          
+          return null;
+        })}
+        {showCreateOption && isCreatable && searchTerm.trim() && (
+          <SelectItem 
+            key="__create_new__" 
+            value={`__create_new__${searchTerm}`}
+            className="bg-main-100 font-medium border-t border-main-200"
+          >
+            Create "{searchTerm}"
+          </SelectItem>
+        )}
+      </SelectContent>
+    </Select>
+  );
+}
+
 const renderEditField = <TData extends DataRecord>(
   column: Column<TData, unknown>,
   value: CellValue,
@@ -44,21 +211,14 @@ const renderEditField = <TData extends DataRecord>(
     const currentValue = editingData[accessorKey] ?? value ?? '';
 
     return (
-      <Select
-        value={String(currentValue)}
-        onValueChange={(newValue) => onChange({ [accessorKey]: newValue as CellValue })}
-      >
-        <SelectTrigger className="w-full h-7">
-          <SelectValue placeholder={`Select ${column.id}`} />
-        </SelectTrigger>
-        <SelectContent>
-          {columnDef.fieldOptions.map(option => (
-            <SelectItem key={option.value} value={String(option.value)}>
-              {option.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
+      <SelectEditField
+        columnDef={columnDef}
+        accessorKey={accessorKey}
+        currentValue={currentValue}
+        placeholder={placeholder}
+        onChange={(newValue) => onChange({ [accessorKey]: newValue })}
+        className="w-full h-7"
+      />
     );
   }
 
@@ -75,13 +235,16 @@ const renderEditField = <TData extends DataRecord>(
   }
 
   if (columnDef.fieldType === 'number') {
+    // Hide spinner arrows by default for number, currency, and percentage fields
+    // Only show spinners if explicitly set to false
+    const hideSpinners = columnDef.hideNumberSpinners !== false; // Default to true
     return (
       <Input
         ref={inputRef}
         type="number"
         value={String(value ?? '')}
         onChange={(e) => onChange(e.target.value as unknown as CellValue)}
-        className="w-full h-7"
+        className={`w-full h-7 ${hideSpinners ? 'datatable-number-no-spinners' : ''}`}
       />
     );
   }

package/src/components/DataTable/components/FilterRow.tsx

@@ -12,7 +12,7 @@ export function FilterRow<TData>({ table, visibleColumns }: FilterRowProps<TData
   const { columnFilters } = getState();
 
   // Get unique values for select filters
-  const getColumnOptions = (columnId: string) => {
+  const getColumnOptions = React.useCallback((columnId: string) => {
     const column = table.getColumn(columnId);
     if (!column) return [];
 
@@ -40,44 +40,55 @@ export function FilterRow<TData>({ table, visibleColumns }: FilterRowProps<TData
     return Array.from(uniqueValues)
       .sort()
       .map((value) => ({ value, label: value }));
-  };
+  }, [table]);
 
   // Determine filter type based on column data
-  const getFilterType = (columnId: string) => {
+  // IMPORTANT: Explicit filterType always takes priority - auto-detection only runs if filterType is not set
+  const getFilterType = React.useCallback((columnId: string) => {
     const column = table.getColumn(columnId);
     if (!column) return 'text';
 
     const columnDef = column.columnDef as any;
     
-    // Check if column has explicit filter type configuration
-    if (columnDef.filterType) {
-      return columnDef.filterType;
+    // PRIORITY 1: Check if column has explicit filter type configuration
+    // This MUST be checked first and must respect any explicit value, including 'text'
+    // Use explicit !== undefined && !== null check to ensure 'text' is not treated as falsy
+    // This prevents auto-detection from overriding explicit filterType settings
+    const explicitFilterType = columnDef.filterType;
+    if (explicitFilterType !== undefined && explicitFilterType !== null && explicitFilterType !== '') {
+      // Explicit filterType set - return it immediately (no auto-detection)
+      // This ensures filterType: 'text' is always respected, even for columns with ≤10 unique values
+      return explicitFilterType as 'text' | 'select' | 'number' | 'date';
     }
     
-    // Auto-detect select filter if filterSelectOptions is provided
+    // Only proceed with auto-detection if filterType was NOT explicitly set
+    
+    // PRIORITY 2: Auto-detect select filter if filterSelectOptions is explicitly provided
     if (columnDef.filterSelectOptions && Array.isArray(columnDef.filterSelectOptions)) {
       return 'select';
     }
 
-    // Check if it's a date column
+    // PRIORITY 3: Check if it's a date column (by column ID pattern)
     if (columnId.toLowerCase().includes('date') || columnId.toLowerCase().includes('time')) {
       return 'date';
     }
 
-    // Check if it's a number column
+    // PRIORITY 4: Check if it's a number column (by data type)
     const firstValue = table.getRowModel().rows[0]?.getValue(columnId);
     if (typeof firstValue === 'number') {
       return 'number';
     }
 
-    // Check if it has limited unique values (good for select)
+    // PRIORITY 5: Auto-detect select filter if limited unique values (≤10)
+    // Only runs if filterType was NOT explicitly set (checked above)
     const uniqueValues = getColumnOptions(columnId);
     if (uniqueValues.length <= 10 && uniqueValues.length > 1) {
       return 'select';
     }
 
+    // Default to text filter
     return 'text';
-  };
+  }, [table, getColumnOptions]);
 
   return (
     <tr className="border-b bg-sec-50/50">

package/src/components/DataTable/components/PaginationControls.tsx

@@ -259,7 +259,7 @@ export function EnhancedPaginationControls<TData extends DataRecord>({
               max={pageCount}
               value={jumpToPage}
               onChange={(e) => setJumpToPage(e.target.value)}
-              className="w-16 h-6 px-2 border rounded text-xs"
+              className="w-16 h-6 px-2 border rounded text-xs datatable-number-no-spinners"
               placeholder="1"
             />
             <Button type="submit" size="sm" variant="outline" className="h-6 px-2 text-xs">

package/src/components/DataTable/components/UnifiedTableBody.tsx

@@ -21,7 +21,7 @@ import { ActionButtons } from './ActionButtons';
 import { EditableRow } from './EditableRow';
 import { getTableCellClasses, getTableHeadClasses, getTableRowClasses } from '../styles';
 import { Input } from '../../Input/Input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../Select/Select';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, SelectGroup, SelectLabel, SelectSeparator } from '../../Select/Select';
 import type {
   AggregateConfig,
   DataRecord,
@@ -120,6 +120,168 @@ interface UnifiedTableBodyProps<TData extends DataRecord> {
   };
 }
 
+// Component for select fields with searchable and creatable support
+function SelectEditField<TData extends DataRecord>({
+  columnDef,
+  accessorKey,
+  currentValue,
+  placeholder,
+  onChange,
+}: {
+  columnDef: EditableColumnDef<TData>;
+  accessorKey: string;
+  currentValue: CellValue;
+  placeholder?: string;
+  onChange: (value: CellValue) => void;
+}) {
+  // Determine if searchable - explicitly check for true to ensure visible search input appears
+  // When selectSearchable is true or undefined, show the visible search input box
+  // When selectSearchable is false, hide the search input (type-to-search still works via SelectContent internals)
+  const isSearchable = columnDef.selectSearchable !== false;
+  const isCreatable = columnDef.creatable === true;
+  const selectRef = React.useRef<HTMLFormElement>(null);
+  const [searchTerm, setSearchTerm] = React.useState('');
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [showCreateOption, setShowCreateOption] = React.useState(false);
+
+  // Monitor search input value via DOM events to detect when user types
+  React.useEffect(() => {
+    if (!isOpen || !isSearchable || !isCreatable || !selectRef.current) return;
+    
+    const searchInput = selectRef.current.querySelector<HTMLInputElement>('[data-testid="select-search-input"]');
+    if (!searchInput) return;
+
+    const handleInput = (e: Event) => {
+      const target = e.target as HTMLInputElement;
+      const currentSearch = target.value;
+      setSearchTerm(currentSearch);
+      
+      // Check if search doesn't match any option (including items in groups)
+      if (currentSearch.trim()) {
+        const searchLower = currentSearch.toLowerCase().trim();
+        
+        // Helper to check if an option matches
+        // Use explicit union type instead of typeof to avoid Babel parsing issues
+        type FieldOption = 
+          | { value: string | number; label: string }
+          | { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> }
+          | { type: 'separator' };
+        
+        const checkMatch = (opt: FieldOption): boolean => {
+          // Simple option
+          if ('value' in opt && !('type' in opt)) {
+            return opt.label.toLowerCase().includes(searchLower);
+          }
+          // Group - check items within the group
+          if ('type' in opt && opt.type === 'group') {
+            return (opt as { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> }).items.some((item: { value: string | number; label: string }) => item.label.toLowerCase().includes(searchLower));
+          }
+          // Separator - doesn't match
+          return false;
+        };
+        
+        const hasMatch = (columnDef.fieldOptions || []).some(checkMatch);
+        setShowCreateOption(!hasMatch);
+      } else {
+        setShowCreateOption(false);
+      }
+    };
+
+    searchInput.addEventListener('input', handleInput);
+    
+    return () => {
+      searchInput.removeEventListener('input', handleInput);
+    };
+  }, [isOpen, isSearchable, isCreatable, columnDef.fieldOptions]);
+
+  const handleCreateNew = React.useCallback(async () => {
+    if (!isCreatable || !columnDef.onCreateNew || !searchTerm.trim()) return;
+    
+    try {
+      const newValue = await columnDef.onCreateNew(searchTerm.trim());
+      onChange(newValue);
+      setSearchTerm('');
+      setShowCreateOption(false);
+    } catch (error) {
+      console.error('Error creating new item:', error);
+    }
+  }, [isCreatable, columnDef.onCreateNew, searchTerm, onChange]);
+
+  return (
+    <Select
+      ref={selectRef}
+      value={String(currentValue)}
+      onValueChange={(newValue) => {
+        if (newValue.startsWith('__create_new__')) {
+          handleCreateNew();
+        } else {
+          onChange(newValue as CellValue);
+        }
+      }}
+      onOpenChange={(open) => {
+        setIsOpen(open);
+        if (!open) {
+          setSearchTerm('');
+          setShowCreateOption(false);
+        }
+      }}
+    >
+      <SelectTrigger className="h-8">
+        <SelectValue placeholder={placeholder || `Select ${columnDef.header || 'option'}...`} />
+      </SelectTrigger>
+      <SelectContent 
+        searchable={Boolean(isSearchable)}
+        searchPlaceholder={`Search ${columnDef.header || 'options'}...`}
+        maxHeight={columnDef.selectMaxHeight}
+        className={columnDef.selectContentClassName}
+        style={columnDef.selectContentStyle}
+      >
+        {columnDef.fieldOptions?.map((option, index) => {
+          // Simple option item
+          if ('value' in option && !('type' in option)) {
+            return (
+              <SelectItem key={`${option.value}-${index}`} value={String(option.value)}>
+                {option.label}
+              </SelectItem>
+            );
+          }
+          
+          // Separator
+          if ('type' in option && option.type === 'separator') {
+            return <SelectSeparator key={`separator-${index}`} />;
+          }
+          
+          // Group with label
+          if ('type' in option && option.type === 'group') {
+            const groupOption = option as { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> };
+            return (
+              <SelectGroup key={`group-${groupOption.label}-${index}`}>
+                <SelectLabel>{groupOption.label}</SelectLabel>
+                {groupOption.items.map((item: { value: string | number; label: string }) => (
+                  <SelectItem key={`${item.value}-${index}`} value={String(item.value)}>
+                    {item.label}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            );
+          }
+          
+          return null;
+        })}
+        {showCreateOption && isCreatable && searchTerm.trim() && (
+          <SelectItem 
+            key="__create_new__" 
+            value={`__create_new__${searchTerm}`}
+            className="bg-main-100 font-medium border-t border-main-200"
+          >
+            Create "{searchTerm}"
+          </SelectItem>
+        )}
+      </SelectContent>
+    </Select>
+  );
+}
+
 // Helper function to render the appropriate input type based on column configuration
 const renderEditField = <TData extends DataRecord>(
   column: Column<TData, unknown>,
@@ -143,33 +305,29 @@ const renderEditField = <TData extends DataRecord>(
     const currentValue = editingData[accessorKey] ?? value ?? '';
 
     return (
-      <Select
-        value={String(currentValue)}
-        onValueChange={(newValue) => onChange({ [accessorKey]: newValue as CellValue })}
-      >
-        <SelectTrigger className="h-8">
-          <SelectValue placeholder={placeholder || `Select ${columnDef.header || column.id}...`} />
-        </SelectTrigger>
-        <SelectContent>
-          {columnDef.fieldOptions.map(option => (
-            <SelectItem key={option.value} value={String(option.value)}>
-              {option.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
+      <SelectEditField
+        columnDef={columnDef}
+        accessorKey={accessorKey}
+        currentValue={currentValue}
+        placeholder={placeholder}
+        onChange={(newValue) => onChange({ [accessorKey]: newValue })}
+      />
     );
   }
   
-  // Check for number type
+  // Check for number type (applies to number, currency, and percentage fields)
   if (columnDef.fieldType === 'number') {
+    // Hide spinner arrows by default for all number-related fields
+    // Currency and percentage columns use fieldType: 'number' with formatting in cell renderer
+    // Only show spinners if explicitly set to false
+    const hideSpinners = columnDef.hideNumberSpinners !== false; // Default to true
     return (
       <Input
         type="number"
         value={String(value ?? '')}
         onChange={(e) => onChange(e.target.value as unknown as CellValue)}
         placeholder={placeholder || `Enter ${columnDef.header || column.id}...`}
-        className="h-8"
+        className={`h-8 ${hideSpinners ? 'datatable-number-no-spinners' : ''}`}
       />
     );
   }
@@ -709,24 +867,65 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
                 ? header.column.getIsVisible() 
                 : true;
             })
-            ?.filter(header => header.column.id !== 'actions' && header.column.id !== 'select')
-            ?.map((header) => (
-              <td 
-                key={header.column.id} 
-                className={getTableCellClasses({
-                  isCompact: true,
-                  className: "px-3 py-2"
-                })}
-              >
-                {renderEditField(header.column, creationData[header.column.id], (value) => {
+            ?.filter(header => header.column.id !== 'actions') // Only exclude actions column
+            ?.map((header) => {
+              // Handle select column separately - render empty checkbox cell for alignment
+              if (header.column.id === 'select') {
+                return (
+                  <td 
+                    key={header.column.id} 
+                    className={getTableCellClasses({
+                      isCompact: true,
+                      className: "px-3 py-2"
+                    })}
+                  >
+                    {/* Empty cell for selection checkbox to maintain alignment */}
+                  </td>
+                );
+              }
+              
+              // Render edit fields for data columns
+              // Determine the correct key to use for creationData
+              // Priority: editAccessorKey > accessorKey > column.id
+              const columnDef = header.column.columnDef as EditableColumnDef<TData>;
+              const dataKey = columnDef.editAccessorKey || columnDef.accessorKey || header.column.id;
+              
+              // Always render a cell to maintain alignment - renderEditField always returns something
+              const editField = renderEditField(
+                header.column, 
+                creationData[dataKey] ?? creationData[header.column.id] ?? '', 
+                (value) => {
                   if (typeof value === 'object' && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
                     onCreationDataChange({ ...creationData, ...(value as Record<string, CellValue>) });
                   } else {
-                    onCreationDataChange({ ...creationData, [header.column.id]: value as CellValue });
+                    // Use the determined dataKey for consistent data access
+                    onCreationDataChange({ ...creationData, [dataKey]: value as CellValue });
                   }
-                }, creationData)}
-              </td>
-            ))}
+                }, 
+                creationData
+              );
+              
+              return (
+                <td 
+                  key={header.column.id} 
+                  className={getTableCellClasses({
+                    isCompact: true,
+                    className: "px-3 py-2"
+                  })}
+                >
+                  {editField || (
+                    // Fallback: render a text input if renderEditField somehow returns nothing
+                    <Input
+                      type="text"
+                      value={String(creationData[dataKey] ?? creationData[header.column.id] ?? '')}
+                      onChange={(e) => onCreationDataChange({ ...creationData, [dataKey]: e.target.value as CellValue })}
+                      placeholder={`Enter ${columnDef.header || header.column.id}...`}
+                      className="h-8"
+                    />
+                  )}
+                </td>
+              );
+            })}
           <td 
             className={getTableCellClasses({
               isCompact: true,

package/src/components/DataTable/types.ts

@@ -292,8 +292,26 @@ export interface DataTableColumn<TData extends DataRecord = DataRecord> extends
   memoizedCell?: React.ComponentType<{ row: TData }>;
   /** Field type for editing (text, select, date, etc.) */
   fieldType?: 'text' | 'select' | 'date' | 'number' | 'boolean';
-  /** Options for select fields */
-  fieldOptions?: Array<{ value: string | number; label: string }>;
+  /** Options for select fields - can be simple items or grouped with labels and separators */
+  fieldOptions?: Array<
+    | { value: string | number; label: string } // Simple option
+    | { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> } // Group with label
+    | { type: 'separator' } // Visual separator
+  >;
+  /** Enable keyboard search/filtering in select dropdowns within editable columns (default: true). When fieldType is 'select', this controls dropdown searchability, not global search. */
+  selectSearchable?: boolean;
+  /** Enable creating new items in select dropdowns (default: false) */
+  creatable?: boolean;
+  /** Callback to create a new item when user types non-matching text in select dropdown */
+  onCreateNew?: (inputValue: string) => Promise<string | number> | string | number;
+  /** Maximum height for select dropdown content (default: "20rem") */
+  selectMaxHeight?: string;
+  /** Custom className for select content dropdown */
+  selectContentClassName?: string;
+  /** Custom style for select content dropdown */
+  selectContentStyle?: React.CSSProperties;
+  /** Hide spinner arrows on number input fields (default: true for DataTable) */
+  hideNumberSpinners?: boolean;
   /** Filter type for column filtering (text, select, number, date) */
   filterType?: 'text' | 'select' | 'number' | 'date';
   /** Options for select filters (alternative to fieldOptions) */
@@ -320,8 +338,20 @@ export interface EditableColumnDef<TData extends DataRecord = DataRecord> extend
   editable?: boolean;
   /** Field type used to determine edit control */
   fieldType?: 'text' | 'select' | 'date' | 'number' | 'boolean';
-  /** Options for select based editors */
-  fieldOptions?: Array<{ value: string | number; label: string }>;
+  /** Options for select based editors - can be simple items or grouped with labels and separators */
+  fieldOptions?: Array<
+    | { value: string | number; label: string } // Simple option
+    | { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> } // Group with label
+    | { type: 'separator' } // Visual separator
+  >;
+  /** Enable keyboard search/filtering in select dropdowns (inherits from DataTableColumn.selectSearchable) */
+  selectSearchable?: boolean;
+  /** Enable creating new items in select dropdowns */
+  creatable?: boolean;
+  /** Callback to create a new item when user types non-matching text */
+  onCreateNew?: (inputValue: string) => Promise<string | number> | string | number;
+  /** Hide spinner arrows on number input fields */
+  hideNumberSpinners?: boolean;
 }
 
 /**