@jmruthers/pace-core 0.6.9 → 0.6.11

package/src/components/DataTable/ui/table/EditableRow.test.tsx

@@ -0,0 +1,1003 @@
+/**
+ * @file Editable Row Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components
+ * @since 0.4.0
+ * 
+ * Comprehensive test suite for EditableRow component following testing guidelines.
+ * Tests cover observable behavior and user interactions.
+ */
+
+import React from 'react';
+import { render, screen, renderHook } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { useReactTable, getCoreRowModel, type ColumnDef } from '@tanstack/react-table';
+import { EditableRow } from './EditableRow';
+import type { DataRecord } from '../../types';
+
+// Mock Button component
+vi.mock('../../Button/Button', () => ({
+  Button: ({ children, onClick, size, variant, 'aria-label': ariaLabel }: any) => (
+    <button
+      onClick={onClick}
+      data-size={size}
+      data-variant={variant}
+      aria-label={ariaLabel}
+    >
+      {children}
+    </button>
+  ),
+}));
+
+// Mock Input component
+vi.mock('../../Input/Input', () => ({
+  Input: React.forwardRef(({ type, value, onChange, className, placeholder }: any, ref: any) => (
+    <input
+      ref={ref}
+      type={type}
+      value={value}
+      onChange={onChange}
+      className={className}
+      placeholder={placeholder}
+    />
+  )),
+}));
+
+// Mock Select components - pass value via context so SelectTrigger can show data-value
+vi.mock('../../Select/Select', async () => {
+  const React = await import('react');
+  const Ctx = React.createContext<string>('');
+  return {
+    Select: ({ children, value, onValueChange, onOpenChange }: any) => (
+      <Ctx.Provider value={value ?? ''}>
+        <div data-testid="select" data-value={value}>
+          {children}
+          <button onClick={() => onOpenChange?.(true)} data-testid="select-open">Open</button>
+          <button onClick={() => onValueChange?.('option1')} data-testid="select-change">Change</button>
+        </div>
+      </Ctx.Provider>
+    ),
+    SelectTrigger: ({ children, className }: any) => {
+      const value = React.useContext(Ctx);
+      return (
+        <div data-testid="select-trigger" data-value={value} className={className}>{children}</div>
+      );
+    },
+    SelectValue: ({ placeholder }: any) => <div data-testid="select-value">{placeholder}</div>,
+    SelectContent: ({ children, searchable, searchPlaceholder }: any) => (
+      <div data-testid="select-content" data-searchable={searchable} data-placeholder={searchPlaceholder}>
+        {children}
+      </div>
+    ),
+    SelectItem: ({ children, value }: any) => (
+      <div data-testid="select-item" data-value={value}>{children}</div>
+    ),
+    SelectGroup: ({ children }: any) => <div data-testid="select-group">{children}</div>,
+    SelectLabel: ({ children }: any) => <div data-testid="select-label">{children}</div>,
+    SelectSeparator: () => <div data-testid="select-separator" />,
+  };
+});
+
+// Mock lucide-react icons - need to include ChevronDown for Select
+vi.mock('lucide-react', async () => {
+  const actual = await vi.importActual('lucide-react');
+  return {
+    ...actual,
+    X: ({ className }: { className?: string }) => (
+      <span data-testid="x-icon" className={className}>X</span>
+    ),
+    Check: ({ className }: { className?: string }) => (
+      <span data-testid="check-icon" className={className}>✓</span>
+    ),
+  };
+});
+
+interface TestData extends DataRecord {
+  id: string;
+  name: string;
+  email: string;
+  age: number;
+  status: string;
+}
+
+describe('[component] EditableRow', () => {
+  const defaultColumns: ColumnDef<TestData>[] = [
+    {
+      id: 'name',
+      accessorKey: 'name',
+      header: 'Name',
+      editable: true,
+      cell: undefined, // Explicitly no cell renderer to force renderEditField
+    },
+    {
+      id: 'email',
+      accessorKey: 'email',
+      header: 'Email',
+      editable: true,
+      cell: undefined,
+    },
+    {
+      id: 'age',
+      accessorKey: 'age',
+      header: 'Age',
+      editable: true,
+      fieldType: 'number' as const,
+      cell: undefined,
+    },
+    {
+      id: 'status',
+      accessorKey: 'status',
+      header: 'Status',
+      editable: true,
+      fieldType: 'select' as const,
+      fieldOptions: [
+        { value: 'active', label: 'Active' },
+        { value: 'inactive', label: 'Inactive' },
+      ],
+      cell: undefined,
+    },
+  ];
+
+  const defaultData: TestData = {
+    id: '1',
+    name: 'John Doe',
+    email: 'john@example.com',
+    age: 30,
+    status: 'active',
+  };
+
+  const createMockRow = (data: TestData = defaultData, columns = defaultColumns) => {
+    // Use renderHook to call useReactTable hook properly
+    // Add actions column for EditableRow (it expects this column for save/cancel buttons)
+    const columnsWithActions: ColumnDef<TestData>[] = [
+      ...columns,
+      {
+        id: 'actions',
+        header: 'Actions',
+        cell: () => null, // Actions are rendered by EditableRow itself
+      },
+    ];
+    
+    const { result } = renderHook(() => {
+      return useReactTable({
+        data: [data],
+        columns: columnsWithActions,
+        getCoreRowModel: getCoreRowModel(),
+      });
+    });
+
+    return result.current.getRowModel().rows[0];
+  };
+
+  const getDefaultProps = () => ({
+    row: createMockRow(),
+    editingData: {},
+    onEditingDataChange: vi.fn(),
+    onSave: vi.fn(),
+    onCancel: vi.fn(),
+    actions: [],
+  });
+  
+  const baseProps = getDefaultProps();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders editable row with table row structure', () => {
+      render(<EditableRow {...baseProps} />);
+
+      const row = screen.getByRole('row');
+      expect(row).toBeInTheDocument();
+    });
+
+    it('renders input fields for editable columns', () => {
+      const props = getDefaultProps();
+      // Provide editingData with the values to trigger input rendering
+      props.editingData = {
+        name: 'John Doe',
+        email: 'john@example.com',
+      };
+      render(<EditableRow {...props} />);
+
+      const nameInput = screen.getByDisplayValue('John Doe');
+      const emailInput = screen.getByDisplayValue('john@example.com');
+      
+      expect(nameInput).toBeInTheDocument();
+      expect(emailInput).toBeInTheDocument();
+    });
+
+    it('renders number input for number field type', () => {
+      const props = getDefaultProps();
+      props.editingData = { age: 30 };
+      render(<EditableRow {...props} />);
+
+      const ageInput = screen.getByDisplayValue('30');
+      expect(ageInput).toHaveAttribute('type', 'number');
+    });
+
+    it('renders select for select field type', () => {
+      const props = getDefaultProps();
+      props.editingData = { status: 'active' };
+      render(<EditableRow {...props} />);
+
+      // Select is rendered as a form with data-testid="select-root" or as select-trigger
+      const selectTrigger = screen.getByTestId('select-trigger');
+      expect(selectTrigger).toBeInTheDocument();
+      expect(selectTrigger).toHaveAttribute('data-value', 'active');
+    });
+
+    it('renders save and cancel buttons', () => {
+      render(<EditableRow {...baseProps} />);
+
+      expect(screen.getByRole('button', { name: /save changes/i })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /cancel editing/i })).toBeInTheDocument();
+    });
+
+    it('auto-focuses first input field', () => {
+      const props = getDefaultProps();
+      props.editingData = { name: 'John Doe' };
+      render(<EditableRow {...props} />);
+
+      const nameInput = screen.getByDisplayValue('John Doe');
+      expect(nameInput).toHaveFocus();
+    });
+  });
+
+  describe('User Interactions', () => {
+    it('updates editing data when text input changes', async () => {
+      const user = userEvent.setup();
+      const onEditingDataChange = vi.fn();
+      const props = getDefaultProps();
+      props.editingData = { name: 'John Doe' };
+      props.onEditingDataChange = onEditingDataChange;
+
+      render(<EditableRow {...props} />);
+
+      const nameInput = screen.getByDisplayValue('John Doe');
+      await user.clear(nameInput);
+      await user.type(nameInput, 'Jane Doe');
+
+      expect(onEditingDataChange).toHaveBeenCalled();
+    });
+
+    it('calls onSave when save button is clicked', async () => {
+      const user = userEvent.setup();
+      const onSave = vi.fn();
+
+      render(<EditableRow {...baseProps} onSave={onSave} />);
+
+      const saveButton = screen.getByRole('button', { name: /save changes/i });
+      await user.click(saveButton);
+
+      expect(onSave).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onCancel when cancel button is clicked', async () => {
+      const user = userEvent.setup();
+      const onCancel = vi.fn();
+      const props = getDefaultProps();
+      props.editingData = {};
+      props.onCancel = onCancel;
+
+      render(<EditableRow {...props} />);
+
+      const cancelButton = screen.getByRole('button', { name: /cancel editing/i });
+      await user.click(cancelButton);
+
+      expect(onCancel).toHaveBeenCalledTimes(1);
+    });
+
+    it('updates editing data when select value changes', async () => {
+      const user = userEvent.setup();
+      const onEditingDataChange = vi.fn();
+      const props = getDefaultProps();
+      props.editingData = { status: 'active' };
+      props.onEditingDataChange = onEditingDataChange;
+
+      render(<EditableRow {...props} />);
+
+      // Select renders with select-trigger
+      const selectTrigger = screen.getByTestId('select-trigger');
+      expect(selectTrigger).toBeInTheDocument();
+      
+      // The real Select component handles value changes internally
+      // We verify the select is rendered correctly with the current value
+      expect(selectTrigger).toHaveAttribute('data-value', 'active');
+      
+      // Note: Testing actual value changes would require opening the select and clicking an item
+      // which is more of an integration test. This test verifies the select is rendered.
+    });
+  });
+
+  describe('Field Types', () => {
+    it('renders date input for date field type', () => {
+      const dateColumn = {
+        id: 'createdAt',
+        accessorKey: 'createdAt',
+        header: 'Created At',
+        editable: true,
+        fieldType: 'date' as const,
+        cell: undefined,
+      };
+
+      const columns = [...defaultColumns, dateColumn];
+      const dateData: TestData = {
+        ...defaultData,
+        createdAt: '2024-01-01' as any,
+      };
+      const row = createMockRow(dateData, columns);
+      const props = getDefaultProps();
+      props.row = row;
+      props.editingData = { createdAt: '2024-01-01' };
+
+      render(<EditableRow {...props} />);
+
+      // Date input should be rendered with type="date"
+      const dateInput = screen.getByDisplayValue('2024-01-01');
+      expect(dateInput).toHaveAttribute('type', 'date');
+    });
+
+    it('renders non-editable field as text when editable is false', () => {
+      const nonEditableColumn: ColumnDef<TestData> = {
+        id: 'id',
+        accessorKey: 'id',
+        header: 'ID',
+        editable: false,
+      };
+
+      const columns = [...defaultColumns, nonEditableColumn];
+      const row = createMockRow(defaultData, columns);
+      const props = getDefaultProps();
+      props.row = row;
+      props.editingData = {};
+
+      render(<EditableRow {...props} />);
+
+      // Should render static text, not input
+      expect(screen.getByText('1')).toBeInTheDocument();
+    });
+
+    // CRITICAL REGRESSION TEST: Ensure editable fields ALWAYS render as input fields
+    // even when custom cell renderers are present. This prevents the bug where custom
+    // renderers (used for display) override the edit mode input fields.
+    it('renders editable fields as input fields even when custom cell renderer exists', () => {
+      // Create a column with a custom cell renderer that only renders static text
+      // This simulates columns that have display-only renderers (e.g., badge, tag components)
+      const columnWithCustomRenderer: ColumnDef<TestData> = {
+        id: 'name',
+        accessorKey: 'name',
+        header: 'Name',
+        editable: true, // Column is editable
+        cell: ({ getValue }) => {
+          // Custom renderer that only shows static text (simulates display-only renderers)
+          return <span data-testid="custom-renderer">{String(getValue())}</span>;
+        },
+      };
+
+      const columns = [columnWithCustomRenderer];
+      const row = createMockRow(defaultData, columns);
+      const props = getDefaultProps();
+      props.row = row;
+      props.editingData = { name: 'John Doe' };
+
+      render(<EditableRow {...props} />);
+
+      // CRITICAL: Even though a custom cell renderer exists, in edit mode we should
+      // see an INPUT field, not the static text from the custom renderer
+      const nameInput = screen.getByDisplayValue('John Doe');
+      expect(nameInput).toBeInTheDocument();
+      expect(nameInput.tagName).toBe('INPUT');
+      
+      // The custom renderer should NOT be used in edit mode
+      expect(screen.queryByTestId('custom-renderer')).not.toBeInTheDocument();
+    });
+
+    it('renders editable fields as input fields when editable is undefined (default editable)', () => {
+      // Column without explicit editable property (should default to editable)
+      const defaultEditableColumn: ColumnDef<TestData> = {
+        id: 'email',
+        accessorKey: 'email',
+        header: 'Email',
+        // editable is undefined - should default to editable
+        cell: ({ getValue }) => {
+          // Custom renderer that only shows static text
+          return <span data-testid="email-custom-renderer">{String(getValue())}</span>;
+        },
+      };
+
+      const columns = [defaultEditableColumn];
+      const row = createMockRow(defaultData, columns);
+      const props = getDefaultProps();
+      props.row = row;
+      props.editingData = { email: 'john@example.com' };
+
+      render(<EditableRow {...props} />);
+
+      // Should render input field, not custom renderer
+      const emailInput = screen.getByDisplayValue('john@example.com');
+      expect(emailInput).toBeInTheDocument();
+      expect(emailInput.tagName).toBe('INPUT');
+      expect(screen.queryByTestId('email-custom-renderer')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Editing Data', () => {
+    it('uses editingData values when provided', () => {
+      const editingData = {
+        name: 'Edited Name',
+        email: 'edited@example.com',
+      };
+
+      render(
+        <EditableRow
+          {...baseProps}
+          editingData={editingData}
+        />
+      );
+
+      expect(screen.getByDisplayValue('Edited Name')).toBeInTheDocument();
+      expect(screen.getByDisplayValue('edited@example.com')).toBeInTheDocument();
+    });
+
+    it('falls back to original row values when editingData is empty', () => {
+      render(<EditableRow {...baseProps} editingData={{}} />);
+
+      expect(screen.getByDisplayValue('John Doe')).toBeInTheDocument();
+      expect(screen.getByDisplayValue('john@example.com')).toBeInTheDocument();
+    });
+  });
+
+  describe('System Columns', () => {
+    it('renders system columns (select, actions) without edit fields', () => {
+      const props = getDefaultProps();
+      props.editingData = {};
+      render(<EditableRow {...props} />);
+
+      // System columns should render their normal content
+      expect(screen.getByRole('button', { name: /save changes/i })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /cancel editing/i })).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('provides proper ARIA attributes for row', () => {
+      render(<EditableRow {...baseProps} />);
+
+      const row = screen.getByRole('row');
+      expect(row).toHaveAttribute('role', 'row');
+    });
+
+    it('provides aria-label for save button', () => {
+      render(<EditableRow {...baseProps} />);
+
+      const saveButton = screen.getByRole('button', { name: /save changes/i });
+      expect(saveButton).toHaveAttribute('aria-label', 'Save changes');
+    });
+
+    it('provides aria-label for cancel button', () => {
+      render(<EditableRow {...baseProps} />);
+
+      const cancelButton = screen.getByRole('button', { name: /cancel editing/i });
+      expect(cancelButton).toHaveAttribute('aria-label', 'Cancel editing');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty editingData gracefully', () => {
+      render(<EditableRow {...baseProps} editingData={{}} />);
+
+      expect(screen.getByRole('row')).toBeInTheDocument();
+    });
+
+    it('handles null values in editingData', () => {
+      const props = getDefaultProps();
+      props.editingData = {
+        name: null,
+        email: null,
+      } as any;
+
+      render(<EditableRow {...props} />);
+
+      expect(screen.getByRole('row')).toBeInTheDocument();
+    });
+
+    it('handles missing column definitions', () => {
+      const row = createMockRow();
+
+      expect(() => {
+        render(<EditableRow {...baseProps} row={row} />);
+      }).not.toThrow();
+    });
+  });
+
+  describe('SelectEditField Component', () => {
+    it('renders searchable select field', () => {
+      const columnsWithSearchable = [
+        {
+          id: 'status',
+          accessorKey: 'status',
+          header: 'Status',
+          editable: true,
+          fieldType: 'select' as const,
+          fieldOptions: [
+            { value: 'active', label: 'Active' },
+            { value: 'inactive', label: 'Inactive' },
+          ],
+          selectSearchable: true,
+          cell: undefined,
+        },
+      ];
+      const row = createMockRow(defaultData, columnsWithSearchable);
+      const props = getDefaultProps();
+      props.row = row;
+      props.editingData = { status: 'active' };
+
+      render(<EditableRow {...props} />);
+
+      // The real Select component is rendered, verify it exists
+      const selectTrigger = screen.getByTestId('select-trigger');
+      expect(selectTrigger).toBeInTheDocument();
+    });
+
+    it('renders non-searchable select field', () => {
+      const columnsWithNonSearchable = [
+        {
+          id: 'status',
+          accessorKey: 'status',
+          header: 'Status',
+          editable: true,
+          fieldType: 'select' as const,
+          fieldOptions: [
+            { value: 'active', label: 'Active' },
+          ],
+          selectSearchable: false,
+          cell: undefined,
+        },
+      ];
+      const row = createMockRow(defaultData, columnsWithNonSearchable);
+      const props = getDefaultProps();
+      props.row = row;
+      props.editingData = { status: 'active' };
+
+      render(<EditableRow {...props} />);
+
+      // The real Select component is rendered, verify it exists
+      const selectTrigger = screen.getByTestId('select-trigger');
+      expect(selectTrigger).toBeInTheDocument();
+    });
+
+    it('renders creatable select with onCreateNew handler', () => {
+      const onCreateNew = vi.fn().mockResolvedValue('new-value');
+      const columnsWithCreatable = [
+        {
+          id: 'status',
+          accessorKey: 'status',
+          header: 'Status',
+          editable: true,
+          fieldType: 'select' as const,
+          fieldOptions: [
+            { value: 'active', label: 'Active' },
+          ],
+          creatable: true,
+          onCreateNew,
+          cell: undefined,
+        },
+      ];
+      const row = createMockRow(defaultData, columnsWithCreatable);
+      const props = getDefaultProps();
+      props.row = row;
+      props.editingData = { status: 'active' };
+
+      render(<EditableRow {...props} />);
+
+      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
+    });
+
+    it('renders select with groups', () => {
+      const columnsWithGroups = [
+        {
+          id: 'category',
+          accessorKey: 'category',
+          header: 'Category',
+          editable: true,
+          fieldType: 'select' as const,
+          fieldOptions: [
+            {
+              type: 'group',
+              label: 'Group 1',
+              items: [
+                { value: 'option1', label: 'Option 1' },
+                { value: 'option2', label: 'Option 2' },
+              ],
+            },
+          ],
+          cell: undefined,
+        },
+      ];
+      const row = createMockRow(defaultData, columnsWithGroups);
+      const props = getDefaultProps();
+      props.row = row;
+      props.editingData = { category: 'option1' };
+
+      render(<EditableRow {...props} />);
+
+      expect(screen.getByTestId('select-group')).toBeInTheDocument();
+      expect(screen.getByTestId('select-label')).toHaveTextContent('Group 1');
+    });
+
+    it('renders select with separators', () => {
+      const columnsWithSeparators = [
+        {
+          id: 'status',
+          accessorKey: 'status',
+          header: 'Status',
+          editable: true,
+          fieldType: 'select' as const,
+          fieldOptions: [
+            { value: 'active', label: 'Active' },
+            { type: 'separator' },
+            { value: 'inactive', label: 'Inactive' },
+          ],
+          cell: undefined,
+        },
+      ];
+      const row = createMockRow(defaultData, columnsWithSeparators);
+      const props = getDefaultProps();
+      props.row = row;
+      props.editingData = { status: 'active' };
+
+      render(<EditableRow {...props} />);
+
+      expect(screen.getByTestId('select-separator')).toBeInTheDocument();
+    });
+
+    it('handles select value change', async () => {
+      const user = userEvent.setup();
+      const onEditingDataChange = vi.fn();
+      const columnsWithSelect = [
+        {
+          id: 'status',
+          accessorKey: 'status',
+          header: 'Status',
+          editable: true,
+          fieldType: 'select' as const,
+          fieldOptions: [
+            { value: 'active', label: 'Active' },
+            { value: 'inactive', label: 'Inactive' },
+          ],
+          cell: undefined,
+        },
+      ];
+      const row = createMockRow(defaultData, columnsWithSelect);
+      const props = getDefaultProps();
+      props.row = row;
+      props.editingData = { status: 'active' };
+      props.onEditingDataChange = onEditingDataChange;
+
+      render(<EditableRow {...props} />);
+
+      // The real Select component is rendered, verify it exists
+      const selectTrigger = screen.getByTestId('select-trigger');
+      expect(selectTrigger).toBeInTheDocument();
+      // Note: Testing actual value changes would require opening the select and clicking an item
+      // which is more of an integration test. This test verifies the select is rendered correctly.
+    });
+  });
+
+  describe('Custom Cell Renderers', () => {
+    // NOTE: Custom cell renderers are NOT used for editable columns in edit mode.
+    // Editable columns (editable !== false) always use renderEditField to ensure
+    // input fields are displayed. This prevents the bug where custom renderers
+    // (used for display) override edit mode input fields.
+    // Custom renderers are only used when editable: false (non-editable columns).
+    it('does NOT use custom cell renderer for editable columns - always uses renderEditField', () => {
+      const customCellRenderer = vi.fn(({ getValue, getIsEditing, setValue }) => {
+        if (getIsEditing()) {
+          return (
+            <input
+              data-testid="custom-editor"
+              value={getValue() as string}
+              onChange={(e) => setValue(e.target.value)}
+            />
+          );
+        }
+        return <span>{getValue() as string}</span>;
+      });
+
+      const columnsWithCustomRenderer = [
+        {
+          id: 'name',
+          accessorKey: 'name',
+          header: 'Name',
+          editable: true, // Column is editable
+          cell: customCellRenderer,
+        },
+      ];
+      const row = createMockRow(defaultData, columnsWithCustomRenderer);
+      const props = getDefaultProps();
+      props.row = row;
+      props.editingData = { name: 'Custom Name' };
+
+      render(<EditableRow {...props} />);
+
+      // CRITICAL: Custom renderer should NOT be called for editable columns
+      // We always use renderEditField instead to ensure input fields are shown
+      expect(customCellRenderer).not.toHaveBeenCalled();
+      
+      // Should see the standard input field from renderEditField, not custom editor
+      const nameInput = screen.getByDisplayValue('Custom Name');
+      expect(nameInput).toBeInTheDocument();
+      expect(nameInput.tagName).toBe('INPUT');
+      expect(screen.queryByTestId('custom-editor')).not.toBeInTheDocument();
+    });
+
+    it('uses custom cell renderer for non-editable column', () => {
+      const customCellRenderer = vi.fn(({ getValue }) => (
+        <span data-testid="custom-display">{getValue() as string}</span>
+      ));
+
+      const columnsWithCustomRenderer = [
+        {
+          id: 'id',
+          accessorKey: 'id',
+          header: 'ID',
+          editable: false,
+          cell: customCellRenderer,
+        },
+      ];
+      const row = createMockRow(defaultData, columnsWithCustomRenderer);
+      const props = getDefaultProps();
+      props.row = row;
+      props.editingData = {};
+
+      render(<EditableRow {...props} />);
+
+      expect(customCellRenderer).toHaveBeenCalled();
+      expect(screen.getByTestId('custom-display')).toBeInTheDocument();
+    });
+
+    // NOTE: For editable columns, custom renderers with setValue are NOT used.
+    // Editable columns always use renderEditField. Custom renderers are only for
+    // non-editable columns (editable: false).
+    it('handles setValue with object value using renderEditField for editable columns', async () => {
+      const user = userEvent.setup();
+      const onEditingDataChange = vi.fn();
+
+      const columnsWithCustomRenderer = [
+        {
+          id: 'name',
+          accessorKey: 'name',
+          header: 'Name',
+          editable: true, // Column is editable - will use renderEditField
+          // Custom renderer is ignored for editable columns
+          cell: ({ getValue }) => <span>{getValue() as string}</span>,
+        },
+      ];
+      const row = createMockRow(defaultData, columnsWithCustomRenderer);
+      const props = getDefaultProps();
+      props.row = row;
+      props.editingData = { name: 'Test' };
+      props.onEditingDataChange = onEditingDataChange;
+
+      render(<EditableRow {...props} />);
+
+      // Should see standard input from renderEditField, not custom renderer
+      const nameInput = screen.getByDisplayValue('Test');
+      expect(nameInput).toBeInTheDocument();
+      expect(nameInput.tagName).toBe('INPUT');
+      
+      await user.type(nameInput, 'New');
+
+      // Should update via renderEditField's onChange handler
+      expect(onEditingDataChange).toHaveBeenCalled();
+    });
+  });
+
+
+  describe('Field Type Handling', () => {
+    it('renders date input with correct value format', () => {
+      const dateColumn = {
+        id: 'createdAt',
+        accessorKey: 'createdAt',
+        header: 'Created At',
+        editable: true,
+        fieldType: 'date' as const,
+        cell: undefined,
+      };
+      const dateData = {
+        ...defaultData,
+        createdAt: '2024-01-01',
+      };
+      const row = createMockRow(dateData, [dateColumn]);
+      const props = getDefaultProps();
+      props.row = row;
+      props.editingData = { createdAt: '2024-01-01' };
+
+      render(<EditableRow {...props} />);
+
+      // Find by value and type since the actual Input component is rendered
+      const dateInput = screen.getByDisplayValue('2024-01-01');
+      expect(dateInput).toHaveAttribute('type', 'date');
+      expect(dateInput).toHaveAttribute('value', '2024-01-01');
+    });
+
+    it('renders number input with hideNumberSpinners by default', () => {
+      const numberColumn = {
+        id: 'age',
+        accessorKey: 'age',
+        header: 'Age',
+        editable: true,
+        fieldType: 'number' as const,
+        cell: undefined,
+      };
+      const row = createMockRow(defaultData, [numberColumn]);
+      const props = getDefaultProps();
+      props.row = row;
+      props.editingData = { age: '30' };
+
+      render(<EditableRow {...props} />);
+
+      // Find by value and type since the actual Input component is rendered
+      const numberInput = screen.getByDisplayValue('30');
+      expect(numberInput).toHaveAttribute('type', 'number');
+      expect(numberInput).toHaveClass('datatable-number-no-spinners');
+    });
+
+    it('renders number input with spinners when hideNumberSpinners is false', () => {
+      const numberColumn = {
+        id: 'age',
+        accessorKey: 'age',
+        header: 'Age',
+        editable: true,
+        fieldType: 'number' as const,
+        hideNumberSpinners: false,
+        cell: undefined,
+      };
+      const row = createMockRow(defaultData, [numberColumn]);
+      const props = getDefaultProps();
+      props.row = row;
+      props.editingData = { age: '30' };
+
+      render(<EditableRow {...props} />);
+
+      // Find by value and type since the actual Input component is rendered
+      const numberInput = screen.getByDisplayValue('30');
+      expect(numberInput).toHaveAttribute('type', 'number');
+      expect(numberInput).not.toHaveClass('datatable-number-no-spinners');
+    });
+  });
+
+  describe('Hierarchical Props', () => {
+    it('renders with isParent prop', () => {
+      const props = getDefaultProps();
+      props.editingData = { name: 'Parent Row' };
+
+      render(<EditableRow {...props} isParent={true} hierarchical={true} />);
+
+      expect(screen.getByRole('row')).toBeInTheDocument();
+    });
+
+    it('renders with hierarchical prop', () => {
+      const props = getDefaultProps();
+      props.editingData = { name: 'Child Row' };
+
+      render(<EditableRow {...props} isParent={false} hierarchical={true} />);
+
+      expect(screen.getByRole('row')).toBeInTheDocument();
+    });
+  });
+
+  describe('EditAccessorKey', () => {
+    it('uses editAccessorKey when provided for select fields', () => {
+      const columnsWithEditKey = [
+        {
+          id: 'name',
+          accessorKey: 'name',
+          header: 'Name',
+          editable: true,
+          fieldType: 'select' as const,
+          fieldOptions: [
+            { value: 'option1', label: 'Option 1' },
+          ],
+          editAccessorKey: 'fullName',
+          cell: undefined,
+        },
+      ];
+      const row = createMockRow(defaultData, columnsWithEditKey);
+      const props = getDefaultProps();
+      props.row = row;
+      props.editingData = { fullName: 'option1' };
+
+      render(<EditableRow {...props} />);
+
+      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
+    });
+  });
+
+  describe('Complex Scenarios', () => {
+    it('handles multiple field types in one row', () => {
+      const complexColumns = [
+        {
+          id: 'name',
+          accessorKey: 'name',
+          header: 'Name',
+          editable: true,
+          cell: undefined,
+        },
+        {
+          id: 'age',
+          accessorKey: 'age',
+          header: 'Age',
+          editable: true,
+          fieldType: 'number' as const,
+          cell: undefined,
+        },
+        {
+          id: 'status',
+          accessorKey: 'status',
+          header: 'Status',
+          editable: true,
+          fieldType: 'select' as const,
+          fieldOptions: [
+            { value: 'active', label: 'Active' },
+          ],
+          cell: undefined,
+        },
+        {
+          id: 'createdAt',
+          accessorKey: 'createdAt',
+          header: 'Created At',
+          editable: true,
+          fieldType: 'date' as const,
+          cell: undefined,
+        },
+      ];
+      const row = createMockRow(defaultData, complexColumns);
+      const props = getDefaultProps();
+      props.row = row;
+      props.editingData = {
+        name: 'Test User',
+        age: '25',
+        status: 'active',
+        createdAt: '2024-01-01',
+      };
+
+      render(<EditableRow {...props} />);
+
+      expect(screen.getByDisplayValue('Test User')).toBeInTheDocument();
+      expect(screen.getByDisplayValue('25')).toBeInTheDocument();
+      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
+      expect(screen.getByDisplayValue('2024-01-01')).toBeInTheDocument();
+    });
+
+    it('handles empty fieldOptions array', () => {
+      const columnsWithEmptyOptions = [
+        {
+          id: 'status',
+          accessorKey: 'status',
+          header: 'Status',
+          editable: true,
+          fieldType: 'select' as const,
+          fieldOptions: [],
+          cell: undefined,
+        },
+      ];
+      const row = createMockRow(defaultData, columnsWithEmptyOptions);
+      const props = getDefaultProps();
+      props.row = row;
+      props.editingData = { status: '' };
+
+      render(<EditableRow {...props} />);
+
+      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
+    });
+  });
+});
+