@dxos/react-ui-table 0.7.4-staging.f7e8224 → 0.7.5-main.499c70c

package/src/model/modal-controller.ts

@@ -3,13 +3,11 @@
 //
 
 import { signal } from '@preact/signals-core';
-import { type RefObject, type MouseEvent, type MutableRefObject } from 'react';
+import { type RefObject, type MutableRefObject } from 'react';
 
 import { type ReactiveObject } from '@dxos/live-object';
 import { log } from '@dxos/log';
 
-import { tableButtons } from '../util';
-
 export type ColumnSettingsMode = { type: 'create' } | { type: 'edit'; fieldId: string };
 
 export type ModalState =
@@ -37,55 +35,24 @@ export class ModalController {
     return this._triggerRef as RefObject<HTMLButtonElement>;
   }
 
-  public handleClick = (event: MouseEvent): boolean => {
-    const target = event.target as HTMLElement;
-
-    // TODO(thure): why not just get the value of the closest recognized attribute and `switch` on that?
-    //  Repeated querying is more error-prone and less legible, I’d think.
-
-    const rowButton = target.closest(`button[${tableButtons.rowMenu.attr}]`);
-    if (rowButton) {
-      this._triggerRef.current = rowButton as HTMLElement;
-      this._state.value = {
-        type: 'row',
-        rowIndex: Number(rowButton.getAttribute(tableButtons.rowMenu.attr)),
-      };
-      return true;
-    }
+  public setTrigger = (trigger: HTMLElement) => {
+    this._triggerRef.current = trigger;
+  };
 
-    const columnButton = target.closest(`button[${tableButtons.columnSettings.attr}]`);
-    if (columnButton) {
-      const fieldId = columnButton.getAttribute(tableButtons.columnSettings.attr)!;
-      this._triggerRef.current = columnButton as HTMLElement;
-      this._state.value = {
-        type: 'column',
-        fieldId,
-      };
-      return true;
-    }
+  public showRowMenu = (rowIndex: number) => {
+    this._state.value = { type: 'row', rowIndex };
+  };
 
-    const addColumnButton = target.closest(`button[${tableButtons.addColumn.attr}]`);
-    if (addColumnButton) {
-      this._triggerRef.current = addColumnButton as HTMLElement;
-      this._state.value = {
-        type: 'columnSettings',
-        mode: { type: 'create' },
-      };
-      return true;
-    }
+  public showColumnMenu = (fieldId: string) => {
+    this._state.value = { type: 'column', fieldId };
+  };
 
-    const refButton = target.closest(`button[${tableButtons.referencedCell.attr}]`);
-    if (refButton) {
-      this._triggerRef.current = refButton as HTMLElement;
-      const [schemaId, targetId] = refButton.getAttribute(tableButtons.referencedCell.attr)!.split('#');
-      this._state.value = {
-        type: 'refPanel',
-        targetId,
-        typename: schemaId,
-      };
-    }
+  public showColumnCreator = () => {
+    this._state.value = { type: 'columnSettings', mode: { type: 'create' } };
+  };
 
-    return false;
+  public showReferencePanel = (targetId: string, schemaId: string) => {
+    this._state.value = { type: 'refPanel', targetId, typename: schemaId };
   };
 
   public openColumnSettings = () => {

package/src/model/selection-model.ts

@@ -17,6 +17,7 @@ export class SelectionModel<T extends BaseTableRow> extends Resource {
     if (!rows) {
       return new Set<string>();
     }
+
     const validIds = new Set(rows.map((row) => row.id));
     return new Set([...this._selection.value].filter((id) => validIds.has(id)));
   });
@@ -28,6 +29,7 @@ export class SelectionModel<T extends BaseTableRow> extends Resource {
     if (rows.length === 0) {
       return false;
     }
+
     return rows.every((row) => this._selection.value.has(row.id));
   });
 
@@ -94,6 +96,15 @@ export class SelectionModel<T extends BaseTableRow> extends Resource {
   };
 
   public setSelection = (mode: 'all' | 'none'): void => {
-    this._selection.value = mode === 'all' ? new Set(this._rows.value.map((row) => row.id)) : new Set();
+    switch (mode) {
+      case 'all': {
+        this._selection.value = new Set(this._rows.value.map((row) => row.id));
+        break;
+      }
+      case 'none': {
+        this._selection.value = new Set();
+        break;
+      }
+    }
   };
 }

package/src/model/table-model.test.ts

@@ -8,8 +8,8 @@ import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { S, TypedObject } from '@dxos/echo-schema';
 import { updateCounter } from '@dxos/echo-schema/testing';
 import { registerSignalsRuntime } from '@dxos/echo-signals';
-import { createMutableSchema } from '@dxos/live-object/testing';
-import { create } from '@dxos/react-client/echo';
+import { createEchoSchema } from '@dxos/live-object/testing';
+import { create, makeRef } from '@dxos/react-client/echo';
 import { createView, ViewProjection } from '@dxos/schema';
 
 import { TableModel, type TableModelProps } from './table-model';
@@ -100,73 +100,6 @@ describe('TableModel', () => {
       expect(outerCounter.count).toBe(1);
       expect(innerCounter.count).toBe(1);
     });
-
-    describe('row reactivity', () => {
-      let data: any[];
-
-      beforeEach(async () => {
-        // TODO(burdon): Use generator.
-        ({ data } = create({
-          data: [
-            { col1: 'A', col2: 1, col3: true },
-            { col1: 'B', col2: 2, col3: false },
-          ],
-        }));
-
-        const model = createTableModel();
-        model.setRows(data);
-        await model.open();
-      });
-
-      it('should update with row-level reactivity', () => {
-        // Set up visible range to include our test data
-        model.getCells({ start: { row: 0, col: 0 }, end: { row: 1, col: 2 } }, 'grid');
-
-        // Trigger a row update
-        data[0].col1 = 'New Value';
-        expect(updateCount).toBe(1);
-
-        // Verify the new value through getCells
-        const cells = model.getCells({ start: { row: 0, col: 0 }, end: { row: 0, col: 0 } }, 'grid');
-        expect(cells['0,0']?.value).toBe('New Value');
-      });
-
-      it('should update reactively when adding a new row', () => {
-        // Set up visible range to include our test data
-        model.getCells({ start: { row: 0, col: 0 }, end: { row: 2, col: 2 } }, 'grid');
-
-        data.push({ col1: 'C', col2: 3, col3: true });
-        expect(updateCount).toBe(1);
-
-        const cells = model.getCells({ start: { row: 0, col: 0 }, end: { row: 2, col: 2 } }, 'grid');
-
-        // Verify the new row's data
-        expect(cells['0,2']?.value).toBe('C');
-        expect(cells['1,2']?.value).toBe('3');
-        expect(cells['2,2']?.value).toBe('true');
-      });
-
-      it('should handle combined operations reactively', () => {
-        // Set up visible range
-        model.getCells({ start: { row: 0, col: 0 }, end: { row: 2, col: 2 } }, 'grid');
-
-        // Multiple operations
-        data[0].col1 = 'Updated A';
-        data.push({ col1: 'C', col2: 3, col3: true });
-        data.splice(1, 1);
-
-        // We expect one update per operation affecting visible rows
-        expect(updateCount).toBe(3);
-
-        const cells = model.getCells({ start: { row: 0, col: 0 }, end: { row: 1, col: 2 } }, 'grid');
-
-        // Verify final state
-        expect(cells['0,0']?.value).toBe('Updated A');
-        expect(cells['0,1']?.value).toBe('C');
-        expect(cells['1,1']?.value).toBe('3');
-        expect(cells['2,1']?.value).toBe('true');
-      });
-    });
   });
 });
 
@@ -176,9 +109,9 @@ class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.
 }) {}
 
 const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
-  const schema = createMutableSchema(Test);
+  const schema = createEchoSchema(Test);
   const view = createView({ name: 'Test', typename: schema.typename, jsonSchema: schema.jsonSchema });
   const projection = new ViewProjection(schema, view);
-  const table = create(TableType, { view });
+  const table = create(TableType, { view: makeRef(view) });
   return new TableModel({ table, projection, ...props });
 };

package/src/model/table-model.ts

@@ -8,32 +8,20 @@ import orderBy from 'lodash.orderby';
 import { Resource } from '@dxos/context';
 import { getValue, setValue, FormatEnum, type JsonProp } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
+import { isReactiveObject, makeRef } from '@dxos/live-object';
 import { PublicKey } from '@dxos/react-client';
-import {
-  cellClassesForFieldType,
-  cellClassesForRowSelection,
-  formatForDisplay,
-  formatForEditing,
-  parseValue,
-} from '@dxos/react-ui-form';
+import { formatForDisplay, formatForEditing, parseValue } from '@dxos/react-ui-form';
 import {
   type DxGridAxisMeta,
-  type DxGridCellValue,
-  type DxGridPlane,
-  type DxGridPlaneCells,
   type DxGridPlaneRange,
   type DxGridPlanePosition,
-  toPlaneCellIndex,
   type DxGridPosition,
 } from '@dxos/react-ui-grid';
-import { mx } from '@dxos/react-ui-theme';
-import { VIEW_FIELD_LIMIT, type ViewProjection, type FieldType } from '@dxos/schema';
+import { type ViewProjection } from '@dxos/schema';
 
-import { ModalController } from './modal-controller';
 import { SelectionModel } from './selection-model';
 import { type TableType } from '../types';
-import { tableButtons, touch } from '../util';
-import { tableControls } from '../util/table-controls';
+import { touch } from '../util';
 
 export type SortDirection = 'asc' | 'desc';
 export type SortConfig = { fieldId: string; direction: SortDirection };
@@ -84,7 +72,6 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
 
   private _selection!: SelectionModel<T>;
   private _columnMeta?: ReadonlySignal<DxGridAxisMeta>;
-  private readonly _modalController = new ModalController();
 
   constructor({
     table,
@@ -118,6 +105,10 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     return this._projection;
   }
 
+  public get rows(): ReadonlySignal<T[]> {
+    return this._sortedRows;
+  }
+
   public get pinnedRows(): NonNullable<TableModelProps<T>['pinnedRows']> {
     return this._pinnedRows;
   }
@@ -131,10 +122,6 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     return this._sorting.value;
   }
 
-  public get modalController() {
-    return this._modalController;
-  }
-
   public get selection() {
     return this._selection;
   }
@@ -153,7 +140,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
 
   private initializeColumnMeta(): void {
     this._columnMeta = computed(() => {
-      const fields = this._table.view?.fields ?? [];
+      const fields = this._table.view?.target?.fields ?? [];
       const meta = Object.fromEntries(
         fields.map((field, index: number) => [index, { size: field?.size ?? 256, resizeable: true }]),
       );
@@ -174,15 +161,35 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
         return this._rows.value;
       }
 
-      const field = this._table.view?.fields.find((field) => field.id === sort.fieldId);
+      const field = this._table.view?.target?.fields.find((field) => field.id === sort.fieldId);
       if (!field) {
         return this._rows.value;
       }
 
+      const { props } = this._projection.getFieldProjection(field.id);
+
       const dataWithIndices = this._rows.value.map((item, index) => {
-        const value = getValue(item, field.path);
-        return { item, index, value, isEmpty: value == null || value === '' };
+        const rawValue = getValue(item, field.path);
+        let sortValue = rawValue;
+
+        if (props.type.startsWith('boolean')) {
+          sortValue = !!rawValue; // Coerce null/undefined/false to false for booleans
+        } else if (rawValue != null) {
+          if (props.format === FormatEnum.Ref && field.referencePath) {
+            sortValue = getValue(rawValue, field.referencePath);
+          } else {
+            sortValue = formatForDisplay({ type: props.type, format: props.format, value: rawValue });
+          }
+        }
+
+        return {
+          item,
+          index,
+          value: sortValue,
+          isEmpty: !props.type.startsWith('boolean') && (sortValue == null || sortValue === ''),
+        };
       });
+
       const sorted = orderBy(dataWithIndices, ['isEmpty', 'value'], ['asc', sort.direction]);
 
       for (let displayIndex = 0; displayIndex < sorted.length; displayIndex++) {
@@ -215,7 +222,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
         rowEffects.push(
           effect(() => {
             const obj = this._sortedRows.value[row];
-            this?._table?.view?.fields.forEach((field) => touch(getValue(obj, field.path)));
+            this?._table?.view?.target?.fields.forEach((field) => touch(getValue(obj, field.path)));
             this._onCellUpdate?.({ row, col: start.col, plane: 'grid' });
           }),
         );
@@ -226,181 +233,6 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     this._ctx.onDispose(rowEffectManager);
   }
 
-  //
-  // Get Cells
-  //
-
-  public getCells = (range: DxGridPlaneRange, plane: DxGridPlane): DxGridPlaneCells => {
-    switch (plane) {
-      case 'grid': {
-        this._visibleRange.value = range;
-        return this.getMainGridCells(range);
-      }
-      case 'frozenRowsStart': {
-        return this.getHeaderCells(range);
-      }
-      case 'frozenColsStart': {
-        return this.getSelectionColumnCells(range);
-      }
-      case 'frozenColsEnd': {
-        return this.getActionColumnCells(range);
-      }
-      case 'fixedStartStart': {
-        return this.getSelectAllCell();
-      }
-      case 'fixedStartEnd': {
-        return this.getNewColumnCell();
-      }
-      default: {
-        return {};
-      }
-    }
-  };
-
-  private getMainGridCells = (range: DxGridPlaneRange): DxGridPlaneCells => {
-    const cells: DxGridPlaneCells = {};
-    const fields = this._table.view?.fields ?? [];
-
-    const addCell = (obj: T, field: FieldType, colIndex: number, displayIndex: number): void => {
-      const { props } = this._projection.getFieldProjection(field.id);
-
-      const cell: DxGridCellValue = {
-        get value() {
-          const value = getValue(obj, field.path);
-          if (value == null) {
-            return '';
-          }
-
-          switch (props.format) {
-            case FormatEnum.Ref: {
-              if (!field.referencePath) {
-                return ''; // TODO(burdon): Show error.
-              }
-
-              return getValue(value, field.referencePath);
-            }
-
-            default: {
-              return formatForDisplay({ type: props.type, format: props.format, value });
-            }
-          }
-        },
-      };
-
-      const classes = [];
-      const formatClasses = cellClassesForFieldType({ type: props.type, format: props.format });
-      if (formatClasses) {
-        classes.push(formatClasses);
-      }
-      const rowSelectionClasses = cellClassesForRowSelection(this._selection.isObjectSelected(obj));
-      if (rowSelectionClasses) {
-        classes.push(rowSelectionClasses);
-      }
-      if (classes.length > 0) {
-        cell.className = mx(classes.flat());
-      }
-
-      if (cell.value && props.format === FormatEnum.Ref && props.referenceSchema) {
-        const targetObj = getValue(obj, field.path);
-        cell.accessoryHtml = tableButtons.referencedCell.render({
-          targetId: targetObj.id,
-          schemaId: props.referenceSchema,
-        });
-      }
-
-      const idx = toPlaneCellIndex({ col: colIndex, row: displayIndex });
-      cells[idx] = cell;
-    };
-
-    for (let row = range.start.row; row <= range.end.row && row < this._sortedRows.value.length; row++) {
-      for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
-        const field = fields[col];
-        if (!field) {
-          continue;
-        }
-
-        addCell(this._sortedRows.value[row], field, col, row);
-      }
-    }
-
-    return cells;
-  };
-
-  private getHeaderCells = (range: DxGridPlaneRange): DxGridPlaneCells => {
-    const cells: DxGridPlaneCells = {};
-    const fields = this.table.view?.fields ?? [];
-    for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
-      const { field, props } = this._projection.getFieldProjection(fields[col].id);
-      cells[toPlaneCellIndex({ col, row: 0 })] = {
-        // TODO(burdon): Use same logic as form for fallback title.
-        value: props.title ?? field.path,
-        readonly: true,
-        resizeHandle: 'col',
-        accessoryHtml: tableButtons.columnSettings.render({ fieldId: field.id }),
-      };
-    }
-
-    return cells;
-  };
-
-  private getSelectionColumnCells = (range: DxGridPlaneRange): DxGridPlaneCells => {
-    const cells: DxGridPlaneCells = {};
-    for (let row = range.start.row; row <= range.end.row && row < this._rows.value.length; row++) {
-      const isSelected = this._selection.isRowIndexSelected(row);
-      const classes = cellClassesForRowSelection(isSelected);
-      cells[toPlaneCellIndex({ col: 0, row })] = {
-        value: '',
-        readonly: true,
-        className: classes ? mx(classes) : undefined,
-        accessoryHtml: tableControls.checkbox.render({ rowIndex: row, checked: isSelected }),
-      };
-    }
-
-    return cells;
-  };
-
-  private getActionColumnCells = (range: DxGridPlaneRange): DxGridPlaneCells => {
-    const cells: DxGridPlaneCells = {};
-    for (let row = range.start.row; row <= range.end.row && row < this._rows.value.length; row++) {
-      const isSelected = this._selection.isRowIndexSelected(row);
-      const classes = cellClassesForRowSelection(isSelected);
-      cells[toPlaneCellIndex({ col: 0, row })] = {
-        value: '',
-        readonly: true,
-        className: classes ? mx(classes) : undefined,
-        accessoryHtml: tableButtons.rowMenu.render({ rowIndex: row }),
-      };
-    }
-
-    return cells;
-  };
-
-  private getSelectAllCell = (): DxGridPlaneCells => {
-    return {
-      [toPlaneCellIndex({ col: 0, row: 0 })]: {
-        value: '',
-        accessoryHtml: tableControls.checkbox.render({
-          rowIndex: 0,
-          header: true,
-          checked: this._selection.allRowsSeleted.value,
-        }),
-        readonly: true,
-      },
-    };
-  };
-
-  private getNewColumnCell = (): DxGridPlaneCells => {
-    return {
-      [toPlaneCellIndex({ col: 0, row: 0 })]: {
-        value: '',
-        accessoryHtml: tableButtons.addColumn.render({
-          disabled: (this._table.view?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT,
-        }),
-        readonly: true,
-      },
-    };
-  };
-
   //
   // Data
   //
@@ -411,7 +243,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
 
   public getRowCount = (): number => this._rows.value.length;
 
-  public getColumnCount = (): number => this.table.view?.fields.length ?? 0;
+  public getColumnCount = (): number => this.table.view?.target?.fields.length ?? 0;
 
   public insertRow = (rowIndex?: number): void => {
     const row = rowIndex !== undefined ? this._displayToDataIndex.get(rowIndex) ?? rowIndex : this._rows.value.length;
@@ -434,7 +266,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
   };
 
   public getCellData = ({ col, row }: DxGridPlanePosition): any => {
-    const fields = this.table.view?.fields ?? [];
+    const fields = this.table.view?.target?.fields ?? [];
     if (col < 0 || col >= fields.length) {
       return undefined;
     }
@@ -453,7 +285,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
           return ''; // TODO(burdon): Show error.
         }
 
-        return getValue(value, field.referencePath);
+        return getValue(value.target, field.referencePath);
       }
 
       default: {
@@ -464,7 +296,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
 
   public setCellData = ({ col, row }: DxGridPlanePosition, value: any): void => {
     const rowIdx = this._displayToDataIndex.get(row) ?? row;
-    const fields = this.table.view?.fields ?? [];
+    const fields = this.table.view?.target?.fields ?? [];
     if (col < 0 || col >= fields.length) {
       return;
     }
@@ -473,7 +305,11 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     const { props } = this._projection.getFieldProjection(field.id);
     switch (props.format) {
       case FormatEnum.Ref: {
-        setValue(this._rows.value[rowIdx], field.path, value);
+        // TODO(ZaymonFC): This get's called an additional time by the cell editor onBlur, but with the cell editors
+        //   plain string value. Maybe onBlur should be called with the actual value?
+        if (isReactiveObject(value)) {
+          setValue(this._rows.value[rowIdx], field.path, makeRef(value));
+        }
         break;
       }
 
@@ -492,6 +328,21 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     }
   };
 
+  /**
+   * Updates a cell's value using a transform function.
+   * @param {DxGridPlanePosition} position - The position of the cell to update.
+   * @param {(value: any) => any} update - A function that takes the current value and returns the updated value.
+   */
+  public updateCellData({ col, row }: DxGridPlanePosition, update: (value: any) => any): void {
+    const dataRow = this._displayToDataIndex.get(row) ?? row;
+    const fields = this.table.view?.target?.fields ?? [];
+    const field = fields[col];
+
+    const value = getValue(this._rows.value[dataRow], field.path);
+    const updatedValue = update(value);
+    setValue(this._rows.value[dataRow], field.path, updatedValue);
+  }
+
   //
   // Column Operations
   //
@@ -501,7 +352,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
       return;
     }
 
-    const field = this.table.view.fields.find((field) => field.id === fieldId);
+    const field = this.table.view.target?.fields.find((field) => field.id === fieldId);
     if (field && this._onDeleteColumn) {
       if (this._sorting.value?.fieldId === fieldId) {
         this.clearSort();
@@ -510,36 +361,12 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     }
   }
 
-  //
-  // Interactions
-  //
-  public handleGridClick = (event: React.MouseEvent): void => {
-    if (!this._modalController.handleClick(event)) {
-      const target = event.target as HTMLElement;
-
-      const selectionCheckbox = target.closest(`input[${tableControls.checkbox.attributes.checkbox}]`);
-      if (selectionCheckbox) {
-        const isHeader = selectionCheckbox.hasAttribute(tableControls.checkbox.attributes.header);
-        if (isHeader) {
-          if (this._selection.allRowsSeleted.value) {
-            this._selection.setSelection('none');
-          } else {
-            this._selection.setSelection('all');
-          }
-        } else {
-          const rowIndex = Number(selectionCheckbox.getAttribute(tableControls.checkbox.attributes.checkbox));
-          this._selection.toggleSelectionForRowIndex(rowIndex);
-        }
-      }
-    }
-  };
-
   //
   // Resize
   //
 
   public setColumnWidth(columnIndex: number, width: number): void {
-    const fields = this.table.view?.fields ?? [];
+    const fields = this.table.view?.target?.fields ?? [];
     if (columnIndex < fields.length) {
       const newWidth = Math.max(0, width);
       const field = fields[columnIndex];