implement editing feature

packages/core/index.ts

@@ -3,6 +3,7 @@ import { DataDen } from './src/data-den';
 import { DataDenOptions } from './src/data-den-options.interface';
 import { DataDenDefaultCellRenderer } from './src/modules/rendering/cell/data-den-default-cell-renderer';
 import { DataDenSortingEvent } from './src/modules/sorting';
+import { DataDenDefaultCellEditor } from './src/modules/rendering/editor';
 import {
   DataDenHeaderDateFilterRenderer,
   DataDenHeaderNumberFilterRenderer,
@@ -198,6 +199,8 @@ const options2: DataDenOptions = {
       resize: true,
       width: 260,
       cellRenderer: DataDenDefaultCellRenderer,
+      cellEditor: DataDenDefaultCellEditor,
+      editable: true,
     },
     {
       field: 'model',
@@ -213,6 +216,8 @@ const options2: DataDenOptions = {
       resize: true,
       width: 200,
       cellRenderer: DataDenDefaultCellRenderer,
+      cellEditor: DataDenDefaultCellEditor,
+      editable: () => false,
     },
     {
       field: 'year',
@@ -233,6 +238,8 @@ const options2: DataDenOptions = {
       resize: true,
       width: 210,
       cellRenderer: DataDenDefaultCellRenderer,
+      cellEditor: DataDenDefaultCellEditor,
+      editable: true,
     },
     {
       field: 'price',
@@ -244,6 +251,9 @@ const options2: DataDenOptions = {
       resize: false,
       width: 180,
       cellRenderer: DataDenDefaultCellRenderer,
+      cellEditor: DataDenDefaultCellEditor,
+      editable: true,
+      valueParser: (value: string) => Number(value),
     },
     {
       field: 'transmission',
@@ -285,6 +295,7 @@ const options2: DataDenOptions = {
   rows: rows,
   draggable: true,
   pagination: true,
+  rowEditMode: true,
   paginationOptions: {
     pageSize: 10,
     ofText: 'of',

packages/core/src/data-den-options.interface.ts

@@ -1,3 +1,4 @@
+import { DataDenCellEditor } from './modules/rendering/editor';
 import { DataDenCellRenderer, DataDenHeaderFilterRenderer } from './modules/rendering';
 
 export type ClassType<T> = new (...args: any[]) => T;
@@ -37,6 +38,9 @@ export interface DataDenColDef {
   pinned?: 'left' | 'right';
   width?: number;
   cellRenderer?: ClassType<DataDenCellRenderer>;
+  cellEditor?: ClassType<DataDenCellEditor>;
+  editable?: boolean | ((...args: any[]) => boolean);
+  valueParser?: (value: string) => any;
 }
 
 export interface DataDenDefaultColDef {
@@ -70,6 +74,7 @@ export interface DataDenOptions<TData = any> {
   paginationOptions?: DataDenPaginationOptions;
   quickFilterOptions?: DataDenQuickFilterOptions;
   rowHeight?: number;
+  rowEditMode?: boolean;
 }
 
 export interface DataDenInternalOptions {
@@ -84,4 +89,5 @@ export interface DataDenInternalOptions {
   quickFilterOptions: Required<DataDenQuickFilterOptions>;
   resizable: boolean;
   rowHeight: number;
+  rowEditMode?: boolean;
 }

packages/core/src/data-den-pub-sub.ts

@@ -9,6 +9,7 @@ export class DataDenPubSub {
     'command:pagination:load-prev-page:start': [],
     'command:pagination:load-next-page:start': [],
     'command:pagination:load-last-page:start': [],
+    'command:editing:row-values-changed': [],
     'info:pagination:data-change:done': [],
     'info:pagination:info-change:done': [],
     'info:pagination:page-size-change:done': [],

packages/core/src/modules/rendering/cell/data-den-cell.ts

@@ -1,4 +1,4 @@
-import { DataDenCellEditor, DataDenCellEditorParams, DataDenDefaultCellEditor } from '../editor';
+import { DataDenCellEditor, DataDenCellEditorParams } from '../editor';
 import { DataDenCellRenderer } from './data-den-cell-renderer.interface';
 import { DataDenCellRendererParams } from './data-den-cell-renderer-params.interface';
 import { createHtmlElement } from '../../../utils';
@@ -9,9 +9,9 @@ export class DataDenCell {
   rowIndex: number;
   width: number;
   #value: any;
-  #options: DataDenInternalOptions;
-  #renderer!: DataDenCellRenderer;
-  #editor!: DataDenCellEditor;
+  options: DataDenInternalOptions;
+  renderer!: DataDenCellRenderer;
+  editor!: DataDenCellEditor;
   #left: string;
   pinned: string;
 
@@ -28,34 +28,35 @@ export class DataDenCell {
     this.rowIndex = rowIndex;
     this.width = width;
     this.#value = value;
-    this.#options = options;
+    this.options = options;
     this.#left = pinned ? 'auto' : `${left}px`;
     this.pinned = pinned;
 
     this.#initRenderers();
   }
 
   #initRenderers() {
-    const colDef = this.#options.columns[this.colIndex];
+    const colDef = this.options.columns[this.colIndex];
     const cellRenderer = colDef.cellRenderer!;
     const cellRendererParams = this.#getCellRendererParams();
     const cellEditorParams = this.#getCellEditorParams();
 
-    this.#renderer = new cellRenderer(cellRendererParams);
-    this.#editor = new DataDenDefaultCellEditor(cellEditorParams);
+    this.renderer = new cellRenderer(cellRendererParams);
+    this.editor = new colDef.cellEditor(cellEditorParams);
   }
 
   #getCellRendererParams(): DataDenCellRendererParams {
     return {
       value: this.#value,
-      cssPrefix: this.#options.cssPrefix,
+      cssPrefix: this.options.cssPrefix,
     };
   }
 
   #getCellEditorParams(): DataDenCellEditorParams {
     return {
+      valueParser: this.options.columns[this.colIndex].valueParser || null,
       value: this.#value,
-      cssPrefix: this.#options.cssPrefix,
+      cssPrefix: this.options.cssPrefix,
     };
   }
 
@@ -70,14 +71,16 @@ export class DataDenCell {
           'right'
             ? `${this.#options.cssPrefix}cell-pinned-right`
             : ''}"
+          rowIndex="${this.rowIndex}"
+          colIndex="${this.colIndex}"
           role="gridcell"
           ref="cell"
           style="left: ${this.#left}; width: ${this.width}px;"
         ></div>
       `;
 
     const cellElement = createHtmlElement(template);
-    cellElement.appendChild(this.#renderer.getGui());
+    cellElement.appendChild(this.renderer.getGui());
 
     return cellElement;
   }

packages/core/src/modules/rendering/data-den-rendering-service.ts

@@ -246,9 +246,50 @@ export class DataDenRenderingService {
     return headerContainer;
   }
 
+  #renderEditor(e: MouseEvent): HTMLElement {
+    const target = e.target as HTMLElement;
+    if (target.tagName !== 'SPAN') return;
+
+    const cellElement = target.parentElement;
+    const rowIndex = Number(cellElement.getAttribute('rowIndex'));
+    const clickedColIdx = Number(cellElement.getAttribute('colIndex'));
+
+    const cols: Element[] = [];
+
+    if (this.#options.rowEditMode) {
+      cols.push(...document.querySelectorAll(`[rowIndex="${rowIndex}"]`));
+    } else {
+      cols.push(cellElement);
+    }
+    cols.forEach((col: any) => {
+      const colIndex = Number(col.getAttribute('colIndex'));
+      const column = this.#rows[rowIndex].cells[colIndex];
+      const editable = this.#defaultColumns[colIndex].editable;
+      if ((typeof editable === `function` && !editable()) || editable === false) return;
+
+      col.replaceChildren(column.editor.getGui());
+      if (clickedColIdx === colIndex) {
+        const inputElement = col.children[0] as HTMLInputElement;
+        inputElement.select();
+      }
+
+      col.addEventListener('keydown', (e: KeyboardEvent) => {
+        if (e.key === 'Enter') {
+          cols.forEach((col: any) => {
+            if (col.children[0].value === undefined) return;
+            const span = document.createElement('span');
+            span.innerText = col.children[0].value;
+            col.replaceChildren(span);
+          });
+        }
+      });
+    });
+  }
+
   #renderBody(): HTMLElement {
     const rowContainer = document.createElement('div');
     rowContainer.classList.add(`${this.#options.cssPrefix}grid-rows`);
+    rowContainer.addEventListener('dblclick', (e: MouseEvent) => this.#renderEditor(e));
     rowContainer.setAttribute('role', 'rowgroup');
 
     const rows = document.createDocumentFragment();
@@ -272,6 +313,15 @@ export class DataDenRenderingService {
       this.#options.columns[event.data.colIndex].pinned = event.data.pin;
       this.rerenderTable();
     });
+    this.PubSub.subscribe('command:editing:row-values-changed', (event: DataDenEvent) => {
+      this.#updateColumnValue(event);
+    });
+  }sssssssssssss
+
+  #updateColumnValue(event: DataDenEvent): void {
+    const data = event.data;
+    const property = Object.keys(this.#options.rows[data.row])[data.column];
+    this.#options.rows[data.row][property] = data.value;
   }
 
   #subscribeFetchDone(): void {

packages/core/src/modules/rendering/editor/data-den-cell-editor-params.ts

@@ -1,4 +1,5 @@
 export interface DataDenCellEditorParams {
+  valueParser: (value: string) => any;
   value: any;
   cssPrefix: string;
 }

packages/core/src/modules/rendering/editor/data-den-default-cell-editor.ts

@@ -1,25 +1,51 @@
+import { Context } from '../../../context';
+import { DataDenPubSub } from '../../../data-den-pub-sub';
 import { createHtmlElement } from '../../../utils';
 import { DataDenCellEditor } from './data-den-cell-editor';
 import { DataDenCellEditorParams } from './data-den-cell-editor-params';
 
 export class DataDenDefaultCellEditor implements DataDenCellEditor {
   element: HTMLElement;
+  #params: DataDenCellEditorParams;
   #cssPrefix: string;
 
   constructor(params: DataDenCellEditorParams) {
     this.#cssPrefix = params.cssPrefix;
-    const template = `
-      <div class="${this.#cssPrefix}cell-editor-container"><input type="text" value="${params.value}"></div>
-    `;
+    this.#params = params;
+    const value = this.parseValue(params.value);
+
+    const template = `<input class="${this.#cssPrefix}cell-editor-container" type="text" value="${value}" />`;
 
     this.element = createHtmlElement(template);
+    this.#attachUiEvents();
+  }
+
+  #attachUiEvents() {
+    this.element.addEventListener('blur', (event: any) => {
+      const inputElement = event.target as HTMLInputElement;
+
+      this.setValue(inputElement.value);
+    });
   }
 
   getGui(): HTMLElement {
     return this.element;
   }
 
-  setValue(): any {}
+  setValue(value: any): any {
+    const parent = this.element.parentElement;
+    const column = Number(parent.getAttribute('colindex'));
+    const row = Number(parent.getAttribute('rowindex'));
 
-  parseValue(): any {}
+    DataDenPubSub.publish('command:editing:row-values-changed', {
+      context: new Context('command:editing:row-values-changed'),
+      value: value,
+      column: column,
+      row: row,
+    });
+  }
+
+  parseValue(value: any): any {
+    return this.#params.valueParser ? this.#params.valueParser(value) : value;
+  }
 }

packages/core/src/scss/_row.scss

@@ -53,6 +53,12 @@
     transition: left 0.2s;
     user-select: none;
   }
+
+  span,
+  input {
+    width: 100%;
+    display: inline-block;
+  }
 }
 
 .#{$prefix}cell-pinned-left {