@dxos/react-ui-table 0.8.3 → 0.8.4-main.28f8d3d

package/src/model/table-presentation.ts

@@ -5,28 +5,32 @@
 import { signal } from '@preact/signals-core';
 import { isNotNullable } from 'effect/Predicate';
 
-import { FormatEnum, getObjectDXN, getValue, TypeEnum } from '@dxos/echo-schema';
+import { Obj } from '@dxos/echo';
+import { FormatEnum, TypeEnum, getValue } from '@dxos/echo-schema';
 import { cellClassesForFieldType, formatForDisplay } from '@dxos/react-ui-form';
 import {
+  type DxGridCellValue,
   type DxGridPlane,
   type DxGridPlaneCells,
   type DxGridPlaneRange,
-  type DxGridCellValue,
   toPlaneCellIndex,
 } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
-import { VIEW_FIELD_LIMIT, type FieldType } from '@dxos/schema';
+import { type FieldType, VIEW_FIELD_LIMIT } from '@dxos/schema';
 
-import { type SelectionMode } from './selection-model';
-import { type TableRow, type TableModel } from './table-model';
 import { tableButtons, tableControls } from '../util';
 
+import { type SelectionMode } from './selection-model';
+import { type TableModel, type TableRow } from './table-model';
+
 /**
  * Presentation layer for a table component, handling cell rendering and grid display logic.
  * Manages rendering of table cells, headers, selection columns, and action columns across
  * different grid planes.
  */
 export class TablePresentation<T extends TableRow = TableRow> {
+  private fieldProjectionCache = new Map<string, ReturnType<typeof this.model.projection.getFieldProjection>>();
+
   constructor(
     private readonly model: TableModel<T>,
     private readonly _visibleRange = signal<DxGridPlaneRange>({
@@ -36,6 +40,9 @@ export class TablePresentation<T extends TableRow = TableRow> {
   ) {}
 
   public getCells(range: DxGridPlaneRange, plane: DxGridPlane): DxGridPlaneCells {
+    // Clear cache at the start of each render pass
+    this.fieldProjectionCache.clear();
+
     let cells: DxGridPlaneCells;
 
     switch (plane) {
@@ -58,12 +65,21 @@ export class TablePresentation<T extends TableRow = TableRow> {
       case 'fixedStartEnd':
         cells = this.getNewColumnCell();
         break;
+      case 'frozenRowsEnd':
+        cells = this.getDraftRowCells(range);
+        break;
+      case 'fixedEndStart':
+        cells = this.getDraftSelectCells(range);
+        break;
+      case 'fixedEndEnd':
+        cells = this.getDraftActionCells(range);
+        break;
       default:
         cells = {};
     }
 
     if (plane === 'grid' && this.model.features.dataEditable === false) {
-      Object.values(cells).forEach((cell) => {
+      Object.values<DxGridCellValue>(cells).forEach((cell) => {
         cell.readonly = 'text-select';
       });
     }
@@ -71,164 +87,219 @@ export class TablePresentation<T extends TableRow = TableRow> {
     return cells;
   }
 
-  private getMainGridCells(range: DxGridPlaneRange): DxGridPlaneCells {
-    const cells: DxGridPlaneCells = {};
-    const fields = this.model.view?.fields ?? [];
+  /**
+   * Gets a field projection, using cache if available within the current render pass.
+   */
+  private getFieldProjection(fieldId: string) {
+    let projection = this.fieldProjectionCache.get(fieldId);
+    if (!projection) {
+      projection = this.model.projection.getFieldProjection(fieldId);
+      this.fieldProjectionCache.set(fieldId, projection);
+    }
+    return projection;
+  }
 
-    const addCell = (obj: T, field: FieldType, colIndex: number, displayIndex: number): void => {
-      const { props } = this.model.projection.getFieldProjection(field.id);
+  private createDataCell(
+    cells: DxGridPlaneCells,
+    obj: T,
+    field: FieldType,
+    colIndex: number,
+    displayIndex: number,
+  ): void {
+    const { props } = this.getFieldProjection(field.id);
+
+    const cell: DxGridCellValue = {
+      get value() {
+        const value = getValue(obj, field.path);
+        if (value == null) {
+          return '';
+        }
 
-      const cell: DxGridCellValue = {
-        get value() {
-          const value = getValue(obj, field.path);
-          if (value == null) {
-            return '';
-          }
+        if (props.type === 'array') {
+          return '';
+        }
 
-          if (props.type === 'array') {
+        switch (props.format) {
+          case FormatEnum.Boolean:
+          case FormatEnum.SingleSelect:
+          case FormatEnum.MultiSelect: {
             return '';
           }
-
-          switch (props.format) {
-            case FormatEnum.Boolean:
-            case FormatEnum.SingleSelect:
-            case FormatEnum.MultiSelect: {
-              return '';
+          case FormatEnum.Ref: {
+            if (!field.referencePath) {
+              return ''; // TODO(burdon): Show error.
             }
-            case FormatEnum.Ref: {
-              if (!field.referencePath) {
-                return ''; // TODO(burdon): Show error.
-              }
 
-              return getValue(value.target, field.referencePath);
-            }
+            return getValue(value.target, field.referencePath);
+          }
 
-            default: {
-              return formatForDisplay({ type: props.type, format: props.format, value });
-            }
+          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.model.selection.isObjectSelected(obj),
-        this.model.selection.selectionMode,
-      );
-      if (rowSelectionClasses) {
-        classes.push(rowSelectionClasses);
-      }
-      if (classes.length > 0) {
-        cell.className = mx(classes.flat());
-      }
+    const classes = [];
+    const formatClasses = cellClassesForFieldType({ type: props.type, format: props.format });
+    if (formatClasses) {
+      classes.push(formatClasses);
+    }
+    const rowSelectionClasses = cellClassesForRowSelection(
+      this.model.selection.isObjectSelected(obj),
+      this.model.selection.selectionMode,
+    );
+    if (rowSelectionClasses) {
+      classes.push(rowSelectionClasses);
+    }
+    if (classes.length > 0) {
+      cell.className = mx(classes.flat());
+    }
 
-      if (props.type === TypeEnum.Array) {
-        const targetArray = getValue(obj, field.path);
-        if (targetArray && Array.isArray(targetArray)) {
-          // TODO(ZaymonFC): For arrays of objects, objects should have a 'label' annotation on the field
-          // that can be used to render tags.
-          // TODO(ZaymonFC): Move to util.
-          const getLabel = (value: any) => {
-            // If the value is falsy, return undefined
-            // If the object is an array, check for 'name' property
-            // If the object is a primitive type (string, number, boolean) stringify
-            // If the object is an array return 'Array'
-            if (!value) {
-              return undefined;
-            }
-            if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-              return String(value);
-            }
-            if (Array.isArray(value)) {
-              return 'Array';
-            }
-            if (typeof value === 'object' && value.name) {
-              return value.name;
-            }
-            if (typeof value === 'object' && value.value) {
-              return `${value.value}`;
-            }
-            return 'Object';
-          };
-
-          const tags = targetArray
-            .map(getLabel)
-            .filter(isNotNullable)
-            .map((title) => {
-              return `<span class="dx-tag rounded-xl" data-hue="neutral">${title}</span>`;
-            })
-            .join('');
+    // Arrays.
+    if (props.type === TypeEnum.Array) {
+      const targetArray = getValue(obj, field.path);
+      if (targetArray && Array.isArray(targetArray)) {
+        // TODO(ZaymonFC): For arrays of objects, objects should have a 'label' annotation on the field
+        // that can be used to render tags.
+        // TODO(ZaymonFC): Move to util.
+        const getLabel = (value: any) => {
+          // If the value is falsy, return undefined
+          // If the object is an array, check for 'name' property
+          // If the object is a primitive type (string, number, boolean) stringify
+          // If the object is an array return 'Array'
+          if (!value) {
+            return undefined;
+          }
+          if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+            return String(value);
+          }
+          if (Array.isArray(value)) {
+            return 'Array';
+          }
+          if (typeof value === 'object' && value.name) {
+            return value.name;
+          }
+          if (typeof value === 'object' && value.value) {
+            return `${value.value}`;
+          }
+          return 'Object';
+        };
+
+        const tags = targetArray
+          .map(getLabel)
+          .filter(isNotNullable)
+          .map((title) => {
+            return `<span class="dx-tag" data-hue="neutral">${title}</span>`;
+          })
+          .join('');
+
+        cell.accessoryHtml = `<div role='none' class="flex flex-row gap-1 overflow-x-auto">${tags}</div>`;
+      }
+    }
 
-          cell.accessoryHtml = `<div role='none' class="flex flex-row gap-1 overflow-x-auto">${tags}</div>`;
-        }
+    // References.
+    if (props.format === FormatEnum.Ref && props.referenceSchema) {
+      const targetObj = getValue(obj, field.path)?.target;
+      if (targetObj) {
+        const dxn = Obj.getDXN(targetObj)?.toString();
+        cell.accessoryHtml = `<dx-ref-tag refId=${dxn} class="dx-button is-6 pli-[3px] pbe-[2px] min-bs-0 absolute inline-end-2 block-start-[.2rem]" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
       }
+    }
+
+    // Booleans.
+    if (props.format === FormatEnum.Boolean) {
+      const value = getValue(obj, field.path);
+      cell.accessoryHtml = tableControls.switch.render({
+        colIndex,
+        rowIndex: displayIndex,
+        checked: value ?? false,
+      });
+      cell.readonly = 'no-text-select';
+    }
 
-      if (props.format === FormatEnum.Ref && props.referenceSchema) {
-        const targetObj = getValue(obj, field.path)?.target;
-        if (targetObj) {
-          const dxn = getObjectDXN(targetObj)?.toString();
-          cell.accessoryHtml = `<dx-ref-tag refId=${dxn} class="dx-button is-6 pli-[3px] pbe-[2px] min-bs-0 absolute inline-end-1"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
+    // Single-Selects.
+    if (props.format === FormatEnum.SingleSelect) {
+      const value = getValue(obj, field.path);
+      const options = this.model.projection.getFieldProjection(field.id).props.options;
+      if (options) {
+        const option = options.find((o) => o.id === value);
+        if (option) {
+          cell.accessoryHtml = `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
         }
       }
+    }
 
-      if (props.format === FormatEnum.Boolean) {
-        const value = getValue(obj, field.path);
-        cell.accessoryHtml = tableControls.switch.render({
-          colIndex,
-          rowIndex: displayIndex,
-          checked: value ?? false,
-        });
-        cell.readonly = 'no-text-select';
-      }
+    // Multi-Selects.
+    if (props.format === FormatEnum.MultiSelect) {
+      const values = getValue(obj, field.path) as string[] | undefined;
+      const options = this.model.projection.getFieldProjection(field.id).props.options;
+      if (options && values && values.length > 0) {
+        const tags = values
+          .map((value) => {
+            const option = options.find((o) => o.id === value);
+            if (option) {
+              return `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
+            }
+            return null;
+          })
+          .filter(Boolean)
+          .join('');
 
-      if (props.format === FormatEnum.SingleSelect) {
-        const value = getValue(obj, field.path);
-        const options = this.model.projection.getFieldProjection(field.id).props.options;
-        if (options) {
-          const option = options.find((o) => o.id === value);
-          if (option) {
-            cell.accessoryHtml = `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
-          }
+        if (tags) {
+          cell.accessoryHtml = tags;
         }
       }
+    }
 
-      if (props.format === FormatEnum.MultiSelect) {
-        const values = getValue(obj, field.path) as string[] | undefined;
-        const options = this.model.projection.getFieldProjection(field.id).props.options;
-        if (options && values && values.length > 0) {
-          const tags = values
-            .map((value) => {
-              const option = options.find((o) => o.id === value);
-              if (option) {
-                return `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
-              }
-              return null;
-            })
-            .filter(Boolean)
-            .join(' ');
+    const idx = toPlaneCellIndex({ col: colIndex, row: displayIndex });
+    cells[idx] = cell;
+  }
 
-          if (tags) {
-            cell.accessoryHtml = `<div role='none' class="flex flex-row gap-1">${tags}</div>`;
-          }
+  private getMainGridCells(range: DxGridPlaneRange): DxGridPlaneCells {
+    const cells: DxGridPlaneCells = {};
+    const fields = this.model.projection?.fields ?? [];
+
+    for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
+      for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
+        const field = fields[col];
+        if (!field) {
+          continue;
         }
+
+        this.createDataCell(cells, this.model.rows.value[row], field, col, row);
       }
+    }
 
-      const idx = toPlaneCellIndex({ col: colIndex, row: displayIndex });
-      cells[idx] = cell;
-    };
+    return cells;
+  }
 
-    for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
+  private getDraftRowCells(range: DxGridPlaneRange): DxGridPlaneCells {
+    const cells: DxGridPlaneCells = {};
+    const fields = this.model.projection?.fields ?? [];
+    const draftRows = this.model.draftRows.value;
+
+    for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
+      const draftRow = draftRows[row];
       for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
+        const cellIndex = toPlaneCellIndex({ col, row });
         const field = fields[col];
         if (!field) {
           continue;
         }
 
-        addCell(this.model.rows.value[row], field, col, row);
+        this.createDataCell(cells, draftRow.data, field, col, row);
+
+        if (this.model.hasDraftRowValidationError(row, field.path)) {
+          const cellValue = cells[cellIndex];
+          if (cellValue) {
+            const existingClasses = cellValue.className || '';
+            const draftClasses = 'dx-grid__cell--flagged';
+            cellValue.className = existingClasses ? `${existingClasses} ${draftClasses}` : draftClasses;
+          }
+        }
+
+        cells[cellIndex].className += ' !bg-toolbarSurface';
       }
     }
 
@@ -237,7 +308,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
 
   private getHeaderCells(range: DxGridPlaneRange): DxGridPlaneCells {
     const cells: DxGridPlaneCells = {};
-    const fields = this.model.view?.fields ?? [];
+    const fields = this.model.projection?.fields ?? [];
     for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
       const { field, props } = this.model.projection.getFieldProjection(fields[col].id);
       const sorting = this.model.sorting?.sorting;
@@ -321,7 +392,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
       [toPlaneCellIndex({ col: 0, row: 0 })]: {
         accessoryHtml: this.model.features.schemaEditable
           ? tableButtons.addColumn.render({
-              disabled: (this.model.view?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT,
+              disabled: (this.model.projection?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT,
             })
           : undefined,
         className: '!bg-toolbarSurface',
@@ -330,6 +401,40 @@ export class TablePresentation<T extends TableRow = TableRow> {
       },
     };
   }
+
+  private getDraftActionCells(range: DxGridPlaneRange): DxGridPlaneCells {
+    const cells: DxGridPlaneCells = {};
+    const draftRows = this.model.draftRows.value;
+
+    for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
+      const draftRow = draftRows[row];
+      const disabled = !draftRow.valid;
+
+      cells[toPlaneCellIndex({ col: 0, row })] = {
+        value: '',
+        readonly: true,
+        accessoryHtml: tableButtons.saveDraftRow.render({ rowIndex: row, disabled }),
+        className: '!bg-toolbarSurface',
+      };
+    }
+
+    return cells;
+  }
+
+  private getDraftSelectCells(range: DxGridPlaneRange): DxGridPlaneCells {
+    const cells: DxGridPlaneCells = {};
+    const draftRows = this.model.draftRows.value;
+
+    for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
+      cells[toPlaneCellIndex({ col: 0, row })] = {
+        value: '',
+        readonly: true,
+        className: '!bg-toolbarSurface',
+      };
+    }
+
+    return cells;
+  }
 }
 
 export const cellClassesForRowSelection = (selected: boolean, selectionMode: SelectionMode) => {
@@ -344,7 +449,7 @@ export const cellClassesForRowSelection = (selected: boolean, selectionMode: Sel
   switch (selectionMode) {
     case 'single':
       // TODO(ZaymonFC): @thure, do we need a grid version of 'currentRelated'?
-      return ['!bg-currentRelated hover:bg-hoverSurface', '!cursor-pointer'];
+      return ['!bg-currentRelated dx-grid__cell--no-focus-unfurl hover:bg-hoverSurface !cursor-pointer'];
     case 'multiple':
       return ['!bg-gridCellSelected'];
   }

package/src/model/table-sorting.ts

@@ -2,12 +2,12 @@
 // Copyright 2025 DXOS.org
 //
 
-import { computed, signal, type Signal, type ReadonlySignal } from '@preact/signals-core';
+import { type ReadonlySignal, type Signal, computed, signal } from '@preact/signals-core';
 import orderBy from 'lodash.orderby';
 
-import { getValue, FormatEnum, TypeEnum, type SortDirectionType, type FieldSortType } from '@dxos/echo-schema';
+import { type FieldSortType, FormatEnum, type SortDirectionType, TypeEnum, getValue } from '@dxos/echo-schema';
 import { formatForDisplay } from '@dxos/react-ui-form';
-import type { PropertyType, FieldType, ViewProjection, ViewType } from '@dxos/schema';
+import type { DataType, FieldType, ProjectionModel, PropertyType } from '@dxos/schema';
 
 import { type TableRow } from './table-model';
 
@@ -49,13 +49,13 @@ export class TableSorting<T extends TableRow> {
 
   constructor(
     rows: Signal<T[]>,
-    private readonly _view: ViewType | undefined,
-    private readonly _projection: ViewProjection,
+    private readonly _view: DataType.View,
+    private readonly _projection: ProjectionModel,
   ) {
     this._rows = rows;
     this._isDirty = computed(() => {
       const local = this._localSort.value;
-      const viewSort = this._view?.query.sort?.[0];
+      const viewSort = this._view.query.sort?.[0];
       if (local?.type === 'cleared') {
         return viewSort !== undefined;
       }
@@ -83,7 +83,7 @@ export class TableSorting<T extends TableRow> {
       return local.sort;
     }
 
-    return this._view?.query.sort?.[0];
+    return this._view.query.sort?.[0];
   }
 
   /**
@@ -106,7 +106,7 @@ export class TableSorting<T extends TableRow> {
   }
 
   public toggleSort(fieldId: string): void {
-    if (!this._view || !this.sorting || this.sorting.fieldId !== fieldId) {
+    if (!this.sorting || this.sorting.fieldId !== fieldId) {
       return;
     }
 
@@ -127,7 +127,7 @@ export class TableSorting<T extends TableRow> {
   }
 
   public save(): void {
-    if (this._view && this._localSort.value !== undefined) {
+    if (this._localSort.value !== undefined) {
       if (this._localSort.value.type === 'active') {
         this._view.query.sort = [this._localSort.value.sort];
       } else {
@@ -145,11 +145,11 @@ export class TableSorting<T extends TableRow> {
     return computed(() => {
       this._displayToDataIndex.clear();
       const sort = this.sorting;
-      if (!sort || !this._view) {
+      if (!sort) {
         return this._rows.value;
       }
 
-      const field = this._view.fields.find((f) => f.id === sort.fieldId);
+      const field = this._projection.fields.find((f) => f.id === sort.fieldId);
       if (!field) {
         return this._rows.value;
       }

package/src/playwright/playwright.config.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { defineConfig } from '@playwright/test';
+
+import { e2ePreset } from '@dxos/test-utils/playwright';
+
+export default defineConfig({
+  ...e2ePreset(import.meta.dirname),
+  // TODO(wittjosiah): Avoid hard-coding ports.
+  webServer: {
+    command: 'moon run storybook:serve-e2e -- --port=9004',
+    port: 9004,
+    reuseExistingServer: false,
+  },
+});