@design.estate/dees-catalog 3.63.0 → 3.65.0

package/ts_web/elements/00group-dataview/dees-table/dees-table.ts

@@ -1,13 +1,25 @@
 import * as plugins from '../../00plugins.js';
 import { demoFunc } from './dees-table.demo.js';
-import { customElement, html, DeesElement, property, type TemplateResult, directives } from '@design.estate/dees-element';
+import { customElement, html, DeesElement, property, state, type TemplateResult, directives } from '@design.estate/dees-element';
 
 import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import { DeesModal } from '../../00group-overlay/dees-modal/dees-modal.js';
 import * as domtools from '@design.estate/dees-domtools';
 import { type TIconKey } from '../../00group-utility/dees-icon/dees-icon.js';
 import { tableStyles } from './styles.js';
-import type { Column, ISortDescriptor, ITableAction, ITableActionDataArg, TDisplayFunction } from './types.js';
+import type {
+  Column,
+  ISortDescriptor,
+  ITableAction,
+  ITableActionDataArg,
+  TCellEditorType,
+  TDisplayFunction,
+} from './types.js';
+import '../../00group-input/dees-input-text/index.js';
+import '../../00group-input/dees-input-checkbox/index.js';
+import '../../00group-input/dees-input-dropdown/index.js';
+import '../../00group-input/dees-input-datepicker/index.js';
+import '../../00group-input/dees-input-tags/index.js';
 import {
   computeColumnsFromDisplayFunction as computeColumnsFromDisplayFunctionFn,
   computeEffectiveColumns as computeEffectiveColumnsFn,
@@ -138,11 +150,6 @@ export class DeesTable<T> extends DeesElement {
   })
   accessor selectedDataRow!: T;
 
-  @property({
-    type: Array,
-  })
-  accessor editableFields: string[] = [];
-
   @property({
     type: Boolean,
     reflect: true,
@@ -184,6 +191,14 @@ export class DeesTable<T> extends DeesElement {
   accessor columnFilters: Record<string, string> = {};
   @property({ type: Boolean, attribute: 'show-column-filters' })
   accessor showColumnFilters: boolean = false;
+  /**
+   * When true, the table renders a leftmost checkbox column for click-driven
+   * (de)selection. Row selection by mouse (plain/shift/ctrl click) is always
+   * available regardless of this flag.
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'show-selection-checkbox' })
+  accessor showSelectionCheckbox: boolean = false;
+
   /**
    * When set, the table renders inside a fixed-height scroll container
    * (`max-height: var(--table-max-height, 360px)`) and the header sticks
@@ -209,9 +224,146 @@ export class DeesTable<T> extends DeesElement {
   accessor selectedIds: Set<string> = new Set();
   private _rowIdMap = new WeakMap<object, string>();
   private _rowIdCounter = 0;
+  /**
+   * Anchor row id for shift+click range selection. Set whenever the user
+   * makes a non-range click (plain or cmd/ctrl) so the next shift+click
+   * can compute a contiguous range from this anchor.
+   */
+  private __selectionAnchorId?: string;
+
+  /**
+   * Cell currently focused for keyboard navigation. When set, the cell shows
+   * a focus ring and Enter/F2 enters edit mode. Independent from row selection.
+   */
+  @state()
+  private accessor __focusedCell: { rowId: string; colKey: string } | undefined = undefined;
+
+  /**
+   * Cell currently being edited. When set, that cell renders an editor
+   * (dees-input-*) instead of its display content.
+   */
+  @state()
+  private accessor __editingCell: { rowId: string; colKey: string } | undefined = undefined;
 
   constructor() {
     super();
+    // Make the host focusable so it can receive Ctrl/Cmd+C for copy.
+    if (!this.hasAttribute('tabindex')) this.setAttribute('tabindex', '0');
+    this.addEventListener('keydown', this.__handleHostKeydown);
+  }
+
+  /**
+   * Ctrl/Cmd+C copies the currently selected rows as a JSON array. Falls
+   * back to copying the focused-row (`selectedDataRow`) if no multi
+   * selection exists. No-op if a focused input/textarea would normally
+   * receive the copy.
+   */
+  private __handleHostKeydown = (eventArg: KeyboardEvent) => {
+    // Detect whether the keydown originated inside an editor (input/textarea
+    // or contenteditable). Used to skip both copy hijacking and grid nav.
+    const path = (eventArg.composedPath?.() || []) as EventTarget[];
+    let inEditor = false;
+    for (const t of path) {
+      const tag = (t as HTMLElement)?.tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || (t as HTMLElement)?.isContentEditable) {
+        inEditor = true;
+        break;
+      }
+    }
+
+    // Ctrl/Cmd+C → copy selected rows as JSON (unless typing in an input).
+    const isCopy =
+      (eventArg.metaKey || eventArg.ctrlKey) && (eventArg.key === 'c' || eventArg.key === 'C');
+    if (isCopy) {
+      if (inEditor) return;
+      const rows: T[] = [];
+      if (this.selectedIds.size > 0) {
+        for (const r of this.data) if (this.selectedIds.has(this.getRowId(r))) rows.push(r);
+      } else if (this.selectedDataRow) {
+        rows.push(this.selectedDataRow);
+      }
+      if (rows.length === 0) return;
+      eventArg.preventDefault();
+      this.__writeRowsAsJson(rows);
+      return;
+    }
+
+    // Cell navigation only when no editor is open.
+    if (inEditor || this.__editingCell) return;
+    switch (eventArg.key) {
+      case 'ArrowLeft':
+        eventArg.preventDefault();
+        this.moveFocusedCell(-1, 0, false);
+        return;
+      case 'ArrowRight':
+        eventArg.preventDefault();
+        this.moveFocusedCell(+1, 0, false);
+        return;
+      case 'ArrowUp':
+        eventArg.preventDefault();
+        this.moveFocusedCell(0, -1, false);
+        return;
+      case 'ArrowDown':
+        eventArg.preventDefault();
+        this.moveFocusedCell(0, +1, false);
+        return;
+      case 'Enter':
+      case 'F2': {
+        if (!this.__focusedCell) return;
+        const view: T[] = (this as any)._lastViewData ?? [];
+        const item = view.find((r) => this.getRowId(r) === this.__focusedCell!.rowId);
+        if (!item) return;
+        const allCols: Column<T>[] =
+          Array.isArray(this.columns) && this.columns.length > 0
+            ? computeEffectiveColumnsFn(
+                this.columns,
+                this.augmentFromDisplayFunction,
+                this.displayFunction,
+                this.data
+              )
+            : computeColumnsFromDisplayFunctionFn(this.displayFunction, this.data);
+        const col = allCols.find((c) => String(c.key) === this.__focusedCell!.colKey);
+        if (!col || !this.__isColumnEditable(col)) return;
+        eventArg.preventDefault();
+        this.startEditing(item, col);
+        return;
+      }
+      case 'Escape':
+        if (this.__focusedCell) {
+          this.__focusedCell = undefined;
+          this.requestUpdate();
+        }
+        return;
+      default:
+        return;
+    }
+  };
+
+  /**
+   * Copies the current selection as a JSON array. If `fallbackRow` is given
+   * and there is no multi-selection, that row is copied instead. Used both
+   * by the Ctrl/Cmd+C handler and by the default context-menu action.
+   */
+  public copySelectionAsJson(fallbackRow?: T) {
+    const rows: T[] = [];
+    if (this.selectedIds.size > 0) {
+      for (const r of this.data) if (this.selectedIds.has(this.getRowId(r))) rows.push(r);
+    } else if (fallbackRow) {
+      rows.push(fallbackRow);
+    } else if (this.selectedDataRow) {
+      rows.push(this.selectedDataRow);
+    }
+    if (rows.length === 0) return;
+    this.__writeRowsAsJson(rows);
+  }
+
+  private __writeRowsAsJson(rows: T[]) {
+    try {
+      const json = JSON.stringify(rows, null, 2);
+      navigator.clipboard?.writeText(json);
+    } catch {
+      /* ignore — clipboard may be unavailable */
+    }
   }
 
   public static styles = tableStyles;
@@ -319,15 +471,11 @@ export class DeesTable<T> extends DeesElement {
                     };
                     return html`
                       <tr
-                        @click=${() => {
-                          this.selectedDataRow = itemArg;
-                          if (this.selectionMode === 'single') {
-                            const id = this.getRowId(itemArg);
-                            this.selectedIds.clear();
-                            this.selectedIds.add(id);
-                            this.emitSelectionChange();
-                            this.requestUpdate();
-                          }
+                        @click=${(e: MouseEvent) => this.handleRowClick(e, itemArg, rowIndex, viewData)}
+                        @mousedown=${(e: MouseEvent) => {
+                          // Prevent the browser's native shift-click text
+                          // selection so range-select doesn't highlight text.
+                          if (e.shiftKey && this.selectionMode !== 'single') e.preventDefault();
                         }}
                         @dragenter=${async (eventArg: DragEvent) => {
                           eventArg.preventDefault();
@@ -362,27 +510,51 @@ export class DeesTable<T> extends DeesElement {
                           }
                         }}
                         @contextmenu=${async (eventArg: MouseEvent) => {
-                          DeesContextmenu.openContextMenuWithOptions(
-                            eventArg,
-                            this.getActionsForType('contextmenu').map((action) => {
-                              const menuItem: plugins.tsclass.website.IMenuItem = {
-                                name: action.name,
-                                iconName: action.iconName as any,
-                                action: async () => {
-                                  await action.actionFunc({
-                                    item: itemArg,
-                                    table: this,
-                                  });
-                                  return null;
-                                },
-                              };
-                              return menuItem;
-                            })
-                          );
+                          // If the right-clicked row isn't part of the
+                          // current selection, treat it like a plain click
+                          // first so the context menu acts on a sensible
+                          // selection (matches file-manager behavior).
+                          if (!this.isRowSelected(itemArg)) {
+                            this.selectedDataRow = itemArg;
+                            this.selectedIds.clear();
+                            this.selectedIds.add(this.getRowId(itemArg));
+                            this.__selectionAnchorId = this.getRowId(itemArg);
+                            this.emitSelectionChange();
+                            this.requestUpdate();
+                          }
+                          const userItems: plugins.tsclass.website.IMenuItem[] =
+                            this.getActionsForType('contextmenu').map((action) => ({
+                              name: action.name,
+                              iconName: action.iconName as any,
+                              action: async () => {
+                                await action.actionFunc({
+                                  item: itemArg,
+                                  table: this,
+                                });
+                                return null;
+                              },
+                            }));
+                          const defaultItems: plugins.tsclass.website.IMenuItem[] = [
+                            {
+                              name:
+                                this.selectedIds.size > 1
+                                  ? `Copy ${this.selectedIds.size} rows as JSON`
+                                  : 'Copy row as JSON',
+                              iconName: 'lucide:Copy' as any,
+                              action: async () => {
+                                this.copySelectionAsJson(itemArg);
+                                return null;
+                              },
+                            },
+                          ];
+                          DeesContextmenu.openContextMenuWithOptions(eventArg, [
+                            ...userItems,
+                            ...defaultItems,
+                          ]);
                         }}
-                        class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
+                        class="${itemArg === this.selectedDataRow || this.isRowSelected(itemArg) ? 'selected' : ''}"
                       >
-                        ${this.selectionMode !== 'none'
+                        ${this.showSelectionCheckbox
                           ? html`<td style="width:42px; text-align:center;">
                               <dees-input-checkbox
                                 .value=${this.isRowSelected(itemArg)}
@@ -401,20 +573,48 @@ export class DeesTable<T> extends DeesElement {
                               ? col.renderer(value, itemArg, { rowIndex, colIndex, column: col })
                               : value;
                             const editKey = String(col.key);
+                            const isEditable = !!(col.editable || col.editor);
+                            const rowId = this.getRowId(itemArg);
+                            const isFocused =
+                              this.__focusedCell?.rowId === rowId &&
+                              this.__focusedCell?.colKey === editKey;
+                            const isEditing =
+                              this.__editingCell?.rowId === rowId &&
+                              this.__editingCell?.colKey === editKey;
+                            const cellClasses = [
+                              isEditable ? 'editable' : '',
+                              isFocused && !isEditing ? 'focused' : '',
+                              isEditing ? 'editingCell' : '',
+                            ]
+                              .filter(Boolean)
+                              .join(' ');
                             return html`
                               <td
+                                class=${cellClasses}
+                                @click=${(e: MouseEvent) => {
+                                  if (isEditing) {
+                                    e.stopPropagation();
+                                    return;
+                                  }
+                                  if (isEditable) {
+                                    this.__focusedCell = { rowId, colKey: editKey };
+                                  }
+                                }}
                                 @dblclick=${(e: Event) => {
                                   const dblAction = this.dataActions.find((actionArg) =>
                                     actionArg.type?.includes('doubleClick')
                                   );
-                                  if (this.editableFields.includes(editKey)) {
-                                    this.handleCellEditing(e, itemArg, editKey);
+                                  if (isEditable) {
+                                    e.stopPropagation();
+                                    this.startEditing(itemArg, col);
                                   } else if (dblAction) {
                                     dblAction.actionFunc({ item: itemArg, table: this });
                                   }
                                 }}
                               >
-                                <div class="innerCellContainer">${content}</div>
+                                <div class="innerCellContainer">
+                                  ${isEditing ? this.renderCellEditor(itemArg, col) : content}
+                                </div>
                               </td>
                             `;
                           })}
@@ -502,7 +702,7 @@ export class DeesTable<T> extends DeesElement {
   private renderHeaderRows(effectiveColumns: Column<T>[]): TemplateResult {
     return html`
       <tr>
-        ${this.selectionMode !== 'none'
+        ${this.showSelectionCheckbox
           ? html`
               <th style="width:42px; text-align:center;">
                 ${this.selectionMode === 'multi'
@@ -547,7 +747,7 @@ export class DeesTable<T> extends DeesElement {
       </tr>
       ${this.showColumnFilters
         ? html`<tr class="filtersRow">
-            ${this.selectionMode !== 'none'
+            ${this.showSelectionCheckbox
               ? html`<th style="width:42px;"></th>`
               : html``}
             ${effectiveColumns
@@ -1302,6 +1502,74 @@ export class DeesTable<T> extends DeesElement {
     this.requestUpdate();
   }
 
+  /**
+   * Handles row clicks with file-manager style selection semantics:
+   *  - plain click: select only this row, set anchor
+   *  - cmd/ctrl+click: toggle this row in/out, set anchor
+   *  - shift+click: select the contiguous range from the anchor to this row
+   *
+   * Multi-row click selection is always available (`selectionMode === 'none'`
+   * and `'multi'` both behave this way) so consumers can always copy a set
+   * of rows. Only `selectionMode === 'single'` restricts to one row.
+   */
+  private handleRowClick(eventArg: MouseEvent, item: T, rowIndex: number, view: T[]) {
+    const id = this.getRowId(item);
+
+    if (this.selectionMode === 'single') {
+      this.selectedDataRow = item;
+      this.selectedIds.clear();
+      this.selectedIds.add(id);
+      this.__selectionAnchorId = id;
+      this.emitSelectionChange();
+      this.requestUpdate();
+      return;
+    }
+
+    // multi
+    const isToggle = eventArg.metaKey || eventArg.ctrlKey;
+    const isRange = eventArg.shiftKey;
+
+    if (isRange && this.__selectionAnchorId !== undefined) {
+      // Clear any text selection the browser may have created.
+      window.getSelection?.()?.removeAllRanges();
+      const anchorIdx = view.findIndex((r) => this.getRowId(r) === this.__selectionAnchorId);
+      if (anchorIdx >= 0) {
+        const [a, b] = anchorIdx <= rowIndex ? [anchorIdx, rowIndex] : [rowIndex, anchorIdx];
+        this.selectedIds.clear();
+        for (let i = a; i <= b; i++) this.selectedIds.add(this.getRowId(view[i]));
+      } else {
+        // Anchor no longer in view (filter changed, etc.) — fall back to single select.
+        this.selectedIds.clear();
+        this.selectedIds.add(id);
+        this.__selectionAnchorId = id;
+      }
+      this.selectedDataRow = item;
+    } else if (isToggle) {
+      const wasSelected = this.selectedIds.has(id);
+      if (wasSelected) {
+        this.selectedIds.delete(id);
+        // If we just deselected the focused row, move focus to another
+        // selected row (or clear it) so the highlight goes away.
+        if (this.selectedDataRow === item) {
+          const remaining = view.find((r) => this.selectedIds.has(this.getRowId(r)));
+          this.selectedDataRow = remaining as T;
+        }
+      } else {
+        this.selectedIds.add(id);
+        this.selectedDataRow = item;
+      }
+      this.__selectionAnchorId = id;
+    } else {
+      this.selectedDataRow = item;
+      this.selectedIds.clear();
+      this.selectedIds.add(id);
+      this.__selectionAnchorId = id;
+    }
+
+    this.emitSelectionChange();
+    this.requestUpdate();
+  }
+
   private setRowSelected(row: T, checked: boolean) {
     const id = this.getRowId(row);
     if (this.selectionMode === 'single') {
@@ -1365,43 +1633,216 @@ export class DeesTable<T> extends DeesElement {
     return actions;
   }
 
-  async handleCellEditing(event: Event, itemArg: T, key: string) {
-    await this.domtoolsPromise;
-    const target = event.target as HTMLElement;
-    const originalColor = target.style.color;
-    target.style.color = 'transparent';
-    const transformedItem = this.displayFunction(itemArg);
-    const initialValue = ((transformedItem as any)[key] ?? (itemArg as any)[key] ?? '') as string;
-    // Create an input element
-    const input = document.createElement('input');
-    input.type = 'text';
-    input.value = initialValue;
-
-    const blurInput = async (blurArg = true, saveArg = false) => {
-      if (blurArg) {
-        input.blur();
+  // ─── Cell editing ─────────────────────────────────────────────────────
+
+  /** True if the column has any in-cell editor configured. */
+  private __isColumnEditable(col: Column<T>): boolean {
+    return !!(col.editable || col.editor);
+  }
+
+  /** Effective columns filtered to those that can be edited (visible only). */
+  private __editableColumns(effectiveColumns: Column<T>[]): Column<T>[] {
+    return effectiveColumns.filter((c) => !c.hidden && this.__isColumnEditable(c));
+  }
+
+  /**
+   * Opens the editor on the given cell. Sets focus + editing state and
+   * focuses the freshly rendered editor on the next frame.
+   */
+  public startEditing(item: T, col: Column<T>) {
+    if (!this.__isColumnEditable(col)) return;
+    const rowId = this.getRowId(item);
+    const colKey = String(col.key);
+    this.__focusedCell = { rowId, colKey };
+    this.__editingCell = { rowId, colKey };
+    this.requestUpdate();
+    this.updateComplete.then(() => {
+      const el = this.shadowRoot?.querySelector(
+        '.editingCell dees-input-text, .editingCell dees-input-checkbox, ' +
+        '.editingCell dees-input-dropdown, .editingCell dees-input-datepicker, ' +
+        '.editingCell dees-input-tags'
+      ) as any;
+      el?.focus?.();
+    });
+  }
+
+  /** Closes the editor without committing. */
+  public cancelCellEdit() {
+    this.__editingCell = undefined;
+    this.requestUpdate();
+  }
+
+  /**
+   * Commits an editor value to the row. Runs `parse` then `validate`. On
+   * validation failure, fires `cellEditError` and leaves the editor open.
+   * On success, mutates `data` in place, fires `cellEdit`, and closes the
+   * editor.
+   */
+  public commitCellEdit(item: T, col: Column<T>, editorValue: any) {
+    const key = String(col.key);
+    const oldValue = (item as any)[col.key];
+    const parsed = col.parse ? col.parse(editorValue, item) : editorValue;
+    if (col.validate) {
+      const result = col.validate(parsed, item);
+      if (typeof result === 'string') {
+        this.dispatchEvent(
+          new CustomEvent('cellEditError', {
+            detail: { row: item, key, value: parsed, message: result },
+            bubbles: true,
+            composed: true,
+          })
+        );
+        return;
       }
-      if (saveArg) {
-        (itemArg as any)[key] = input.value as any; // Convert string to T (you might need better type casting depending on your data structure)
-        this.changeSubject.next(this);
+    }
+    if (parsed !== oldValue) {
+      (item as any)[col.key] = parsed;
+      this.dispatchEvent(
+        new CustomEvent('cellEdit', {
+          detail: { row: item, key, oldValue, newValue: parsed },
+          bubbles: true,
+          composed: true,
+        })
+      );
+      this.changeSubject.next(this);
+    }
+    this.__editingCell = undefined;
+    this.requestUpdate();
+  }
+
+  /** Renders the appropriate dees-input-* component for this column. */
+  private renderCellEditor(item: T, col: Column<T>): TemplateResult {
+    const raw = (item as any)[col.key];
+    const value = col.format ? col.format(raw, item) : raw;
+    const editorType: TCellEditorType = col.editor ?? 'text';
+    const onTextCommit = (target: any) => this.commitCellEdit(item, col, target.value);
+
+    switch (editorType) {
+      case 'checkbox':
+        return html`<dees-input-checkbox
+          .value=${!!value}
+          @newValue=${(e: CustomEvent<boolean>) => {
+            e.stopPropagation();
+            this.commitCellEdit(item, col, e.detail);
+          }}
+        ></dees-input-checkbox>`;
+
+      case 'dropdown': {
+        const options = (col.editorOptions?.options as any[]) ?? [];
+        const selected =
+          options.find((o: any) => (o?.option ?? o?.key ?? o) === value) ?? null;
+        return html`<dees-input-dropdown
+          .options=${options}
+          .selectedOption=${selected}
+          @selectedOption=${(e: CustomEvent<any>) => {
+            e.stopPropagation();
+            const detail = e.detail;
+            const newRaw = detail?.option ?? detail?.key ?? detail;
+            this.commitCellEdit(item, col, newRaw);
+          }}
+        ></dees-input-dropdown>`;
       }
-      input.remove();
-      target.style.color = originalColor;
-      this.requestUpdate();
-    };
 
-    // When the input loses focus or the Enter key is pressed, update the data
-    input.addEventListener('blur', () => {
-      blurInput(false, false);
-    });
-    input.addEventListener('keydown', (e: KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        blurInput(true, true); // This will trigger the blur event handler above
+      case 'date':
+        return html`<dees-input-datepicker
+          .value=${value}
+          @focusout=${(e: any) => onTextCommit(e.target)}
+          @keydown=${(e: KeyboardEvent) => this.__handleEditorKey(e, item, col)}
+        ></dees-input-datepicker>`;
+
+      case 'tags':
+        return html`<dees-input-tags
+          .value=${(value as any) ?? []}
+          @focusout=${(e: any) => onTextCommit(e.target)}
+          @keydown=${(e: KeyboardEvent) => this.__handleEditorKey(e, item, col)}
+        ></dees-input-tags>`;
+
+      case 'number':
+      case 'text':
+      default:
+        return html`<dees-input-text
+          .value=${value == null ? '' : String(value)}
+          @focusout=${(e: any) => onTextCommit(e.target)}
+          @keydown=${(e: KeyboardEvent) => this.__handleEditorKey(e, item, col)}
+        ></dees-input-text>`;
+    }
+  }
+
+  /**
+   * Centralized keydown handler for text-style editors. Handles Esc (cancel),
+   * Enter (commit + move down) and Tab/Shift+Tab (commit + move horizontally).
+   */
+  private __handleEditorKey(eventArg: KeyboardEvent, item: T, col: Column<T>) {
+    if (eventArg.key === 'Escape') {
+      eventArg.preventDefault();
+      eventArg.stopPropagation();
+      this.cancelCellEdit();
+      // Restore focus to the host so arrow-key navigation can resume.
+      this.focus();
+    } else if (eventArg.key === 'Enter') {
+      eventArg.preventDefault();
+      eventArg.stopPropagation();
+      const target = eventArg.target as any;
+      this.commitCellEdit(item, col, target.value);
+      this.moveFocusedCell(0, +1, true);
+    } else if (eventArg.key === 'Tab') {
+      eventArg.preventDefault();
+      eventArg.stopPropagation();
+      const target = eventArg.target as any;
+      this.commitCellEdit(item, col, target.value);
+      this.moveFocusedCell(eventArg.shiftKey ? -1 : +1, 0, true);
+    }
+  }
+
+  /**
+   * Moves the focused cell by `dx` columns and `dy` rows along the editable
+   * grid. Wraps row-end → next row when moving horizontally. If
+   * `andStartEditing` is true, opens the editor on the new cell.
+   */
+  public moveFocusedCell(dx: number, dy: number, andStartEditing: boolean) {
+    const view: T[] = (this as any)._lastViewData ?? [];
+    if (view.length === 0) return;
+    // Recompute editable columns from the latest effective set.
+    const allCols: Column<T>[] = Array.isArray(this.columns) && this.columns.length > 0
+      ? computeEffectiveColumnsFn(this.columns, this.augmentFromDisplayFunction, this.displayFunction, this.data)
+      : computeColumnsFromDisplayFunctionFn(this.displayFunction, this.data);
+    const editableCols = this.__editableColumns(allCols);
+    if (editableCols.length === 0) return;
+
+    let rowIdx = 0;
+    let colIdx = 0;
+    if (this.__focusedCell) {
+      rowIdx = view.findIndex((r) => this.getRowId(r) === this.__focusedCell!.rowId);
+      colIdx = editableCols.findIndex((c) => String(c.key) === this.__focusedCell!.colKey);
+      if (rowIdx < 0) rowIdx = 0;
+      if (colIdx < 0) colIdx = 0;
+    }
+
+    if (dx !== 0) {
+      colIdx += dx;
+      while (colIdx >= editableCols.length) {
+        colIdx -= editableCols.length;
+        rowIdx += 1;
       }
-    });
+      while (colIdx < 0) {
+        colIdx += editableCols.length;
+        rowIdx -= 1;
+      }
+    }
+    if (dy !== 0) rowIdx += dy;
 
-    // Replace the cell's content with the input
-    target.appendChild(input);
-    input.focus();
+    // Clamp to grid bounds.
+    if (rowIdx < 0 || rowIdx >= view.length) {
+      this.cancelCellEdit();
+      return;
+    }
+    const item = view[rowIdx];
+    const col = editableCols[colIdx];
+    this.__focusedCell = { rowId: this.getRowId(item), colKey: String(col.key) };
+    if (andStartEditing) {
+      this.startEditing(item, col);
+    } else {
+      this.requestUpdate();
+    }
   }
 }