@dxos/react-ui-table 0.7.5-main.499c70c → 0.7.5-main.937ce75

package/src/model/table-model.ts

@@ -3,14 +3,13 @@
 //
 
 import { computed, effect, signal, type ReadonlySignal } from '@preact/signals-core';
-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 { formatForDisplay, formatForEditing, parseValue } from '@dxos/react-ui-form';
+import { formatForEditing, parseValue } from '@dxos/react-ui-form';
 import {
   type DxGridAxisMeta,
   type DxGridPlaneRange,
@@ -20,12 +19,10 @@ import {
 import { type ViewProjection } from '@dxos/schema';
 
 import { SelectionModel } from './selection-model';
+import { type SortConfig, type SortDirection, TableSorting } from './table-sorting';
 import { type TableType } from '../types';
 import { touch } from '../util';
 
-export type SortDirection = 'asc' | 'desc';
-export type SortConfig = { fieldId: string; direction: SortDirection };
-
 export type BaseTableRow = Record<JsonProp, any> & { id: string };
 
 export type TableModelProps<T extends BaseTableRow = { id: string }> = {
@@ -51,25 +48,16 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     end: { row: 0, col: 0 },
   });
 
-  /**
-   * Maps display indices to data indices.
-   * Used for translating between sorted/displayed order and original data order.
-   * Keys are display indices, values are corresponding data indices.
-   */
-  private readonly _displayToDataIndex: Map<number, number> = new Map();
-
   private readonly _onInsertRow?: TableModelProps<T>['onInsertRow'];
   private readonly _onDeleteRows?: TableModelProps<T>['onDeleteRows'];
   private readonly _onDeleteColumn?: TableModelProps<T>['onDeleteColumn'];
   private readonly _onCellUpdate?: TableModelProps<T>['onCellUpdate'];
   private readonly _onRowOrderChanged?: TableModelProps<T>['onRowOrderChanged'];
 
-  private readonly _sorting = signal<SortConfig | undefined>(undefined);
-  private _sortedRows!: ReadonlySignal<T[]>;
-  private _rows = signal<T[]>([]);
+  private readonly _rows = signal<T[]>([]);
+  private readonly _sorting: TableSorting<T>;
 
   private _pinnedRows: NonNullable<TableModelProps<T>['pinnedRows']>;
-
   private _selection!: SelectionModel<T>;
   private _columnMeta?: ReadonlySignal<DxGridAxisMeta>;
 
@@ -87,8 +75,13 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     super();
     this._table = table;
     this._projection = projection;
+    this._sorting = new TableSorting(this._rows, table, projection);
+
+    if (sorting.length > 0) {
+      const [sort] = sorting;
+      this._sorting.setSort(sort.fieldId, sort.direction);
+    }
 
-    this._sorting.value = sorting.at(0);
     this._pinnedRows = pinnedRows;
     this._onInsertRow = onInsertRow;
     this._onDeleteRows = onDeleteRows;
@@ -106,7 +99,14 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
   }
 
   public get rows(): ReadonlySignal<T[]> {
-    return this._sortedRows;
+    return this._sorting.sortedRows;
+  }
+
+  /**
+   * @reactive
+   */
+  public get sorting(): SortConfig | undefined {
+    return this._sorting.sorting;
   }
 
   public get pinnedRows(): NonNullable<TableModelProps<T>['pinnedRows']> {
@@ -118,10 +118,6 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     return this._columnMeta;
   }
 
-  public get sorting(): SortConfig | undefined {
-    return this._sorting.value;
-  }
-
   public get selection() {
     return this._selection;
   }
@@ -132,9 +128,8 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
 
   protected override async _open() {
     this.initializeColumnMeta();
-    this.initializeSorting();
     this.initializeEffects();
-    this._selection = new SelectionModel(this._sortedRows, () => this._onRowOrderChanged?.());
+    this._selection = new SelectionModel(this._sorting.sortedRows, () => this._onRowOrderChanged?.());
     await this._selection.open(this._ctx);
   }
 
@@ -153,59 +148,9 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     });
   }
 
-  private initializeSorting(): void {
-    this._sortedRows = computed(() => {
-      this._displayToDataIndex.clear();
-      const sort = this._sorting.value;
-      if (!sort) {
-        return this._rows.value;
-      }
-
-      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 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++) {
-        const { index: dataIndex } = sorted[displayIndex];
-        if (displayIndex !== dataIndex) {
-          this._displayToDataIndex.set(displayIndex, dataIndex);
-        }
-      }
-
-      return sorted.map(({ item }) => item);
-    });
-  }
-
   private initializeEffects(): void {
     const rowOrderWatcher = effect(() => {
-      touch(this._sortedRows.value);
+      touch(this._sorting.sortedRows.value);
       this._onRowOrderChanged?.();
     });
     this._ctx.onDispose(rowOrderWatcher);
@@ -221,7 +166,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
       for (let row = start.row; row <= end.row; row++) {
         rowEffects.push(
           effect(() => {
-            const obj = this._sortedRows.value[row];
+            const obj = this._sorting.sortedRows.value[row];
             this?._table?.view?.target?.fields.forEach((field) => touch(getValue(obj, field.path)));
             this._onCellUpdate?.({ row, col: start.col, plane: 'grid' });
           }),
@@ -246,12 +191,12 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
   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;
+    const row = rowIndex !== undefined ? this._sorting.getDataIndex(rowIndex) : this._rows.value.length;
     this._onInsertRow?.(row);
   };
 
   public deleteRow = (rowIndex: number): void => {
-    const row = this._displayToDataIndex.get(rowIndex) ?? rowIndex;
+    const row = this._sorting.getDataIndex(rowIndex);
     const obj = this._rows.value[row];
     const objectsToDelete = [];
 
@@ -272,7 +217,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     }
 
     const field = fields[col];
-    const dataIndex = this._displayToDataIndex.get(row) ?? row;
+    const dataIndex = this._sorting.getDataIndex(row);
     const value = getValue(this._rows.value[dataIndex], field.path);
     if (value == null) {
       return '';
@@ -295,7 +240,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 rowIdx = this._sorting.getDataIndex(row);
     const fields = this.table.view?.target?.fields ?? [];
     if (col < 0 || col >= fields.length) {
       return;
@@ -334,7 +279,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
    * @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 dataRow = this._sorting.getDataIndex(row);
     const fields = this.table.view?.target?.fields ?? [];
     const field = fields[col];
 
@@ -354,9 +299,6 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
 
     const field = this.table.view.target?.fields.find((field) => field.id === fieldId);
     if (field && this._onDeleteColumn) {
-      if (this._sorting.value?.fieldId === fieldId) {
-        this.clearSort();
-      }
       this._onDeleteColumn(field.id);
     }
   }
@@ -381,11 +323,11 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
   //
 
   public setSort(fieldId: string, direction: SortDirection): void {
-    this._sorting.value = { fieldId, direction };
+    this._sorting.setSort(fieldId, direction);
   }
 
   public clearSort(): void {
-    this._sorting.value = undefined;
+    this._sorting.setSort('', 'asc');
   }
 
   //

package/src/model/table-presentation.ts

@@ -148,6 +148,7 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
         readonly: true,
         resizeHandle: 'col',
         accessoryHtml: tableButtons.columnSettings.render({ fieldId: field.id }),
+        className: '!bg-gridHeader',
       };
     }
 
@@ -189,13 +190,14 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
   private getSelectAllCell(): DxGridPlaneCells {
     return {
       [toPlaneCellIndex({ col: 0, row: 0 })]: {
-        value: '',
         accessoryHtml: tableControls.checkbox.render({
           rowIndex: 0,
           header: true,
           checked: this.model.selection.allRowsSeleted.value,
         }),
+        className: '!bg-gridHeader',
         readonly: true,
+        value: '',
       },
     };
   }
@@ -203,11 +205,12 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
   private getNewColumnCell(): DxGridPlaneCells {
     return {
       [toPlaneCellIndex({ col: 0, row: 0 })]: {
-        value: '',
         accessoryHtml: tableButtons.addColumn.render({
           disabled: (this.model.table.view?.target?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT,
         }),
+        className: '!bg-gridHeader',
         readonly: true,
+        value: '',
       },
     };
   }

package/src/model/table-sorting.ts

@@ -0,0 +1,131 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { computed, type Signal, signal, type ReadonlySignal } from '@preact/signals-core';
+import orderBy from 'lodash.orderby';
+
+import { getValue, FormatEnum, TypeEnum } from '@dxos/echo-schema';
+import { formatForDisplay } from '@dxos/react-ui-form';
+import { type PropertyType, type FieldType, type ViewProjection } from '@dxos/schema';
+
+import { type BaseTableRow } from './table-model';
+import { type TableType } from '../types';
+
+export type SortDirection = 'asc' | 'desc';
+export type SortConfig = { fieldId: string; direction: SortDirection };
+
+/**
+ * Manages table sorting functionality through display and data index mapping.
+ *
+ * When a table is sorted, rows visually reorder but we need to maintain references
+ * to the original data positions. This is handled through two types of indices:
+ *
+ * - Display indices: The visual positions after sorting
+ * - Data indices: The original positions in the source data
+ *
+ * The _displayToDataIndex map maintains these relationships, enabling lookups
+ * between visual and source positions.
+ *
+ * Example mapping between display and data indices:
+ *
+ * Original Data:        Sorted Display:       Mapping: (Display → Data)
+ * ┌──────────────┐      ┌──────────────┐      ┌────────┐
+ * │ 0: "Banana"  │  =>  │ 0: "Apple"   │  =>  │ 0 => 1 │
+ * │ 1: "Apple"   │  =>  │ 1: "Banana"  │  =>  │ 1 => 0 │
+ * │ 2: "Cherry"  │  =>  │ 2: "Cherry"  │  =>  │ 2 => 2 │
+ * └──────────────┘      └──────────────┘      └────────┘
+ */
+export class TableSorting<T extends BaseTableRow> {
+  private readonly _displayToDataIndex = new Map<number, number>();
+  private readonly _sorting = signal<SortConfig | undefined>(undefined);
+  private readonly _rows: Signal<T[]>;
+  public readonly sortedRows: ReadonlySignal<T[]>;
+
+  constructor(
+    rows: Signal<T[]>,
+    private readonly _table: TableType,
+    private readonly _projection: ViewProjection,
+  ) {
+    this._rows = rows;
+    this.sortedRows = this.initialiseSortedRows();
+  }
+
+  /**
+   * @reactive
+   */
+  public get sorting(): SortConfig | undefined {
+    return this._sorting.value;
+  }
+
+  public getDataIndex(displayIndex: number): number {
+    return this._displayToDataIndex.get(displayIndex) ?? displayIndex;
+  }
+
+  public setSort(fieldId: string, direction: SortDirection): void {
+    this._sorting.value = { fieldId, direction };
+  }
+
+  //
+  // Initialisation.
+  //
+
+  private initialiseSortedRows(): ReadonlySignal<T[]> {
+    return computed(() => {
+      this._displayToDataIndex.clear();
+      const sort = this._sorting.value;
+      if (!sort) {
+        return this._rows.value;
+      }
+
+      const field = this._table.view?.target?.fields.find((f) => f.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 sortValue = this.getSortValue(props, field, item);
+        const isEmpty = !(props.type === TypeEnum.Boolean) && (sortValue == null || sortValue === '');
+
+        return { item, index, value: sortValue, isEmpty };
+      });
+
+      const ordered = orderBy(dataWithIndices, ['isEmpty', 'value'], ['asc', sort.direction]);
+
+      ordered.forEach(({ index: dataIndex }, displayIndex) => {
+        if (displayIndex !== dataIndex) {
+          this._displayToDataIndex.set(displayIndex, dataIndex);
+        }
+      });
+
+      return ordered.map(({ item }) => item);
+    });
+  }
+
+  private getSortValue(props: PropertyType, field: FieldType, item: T) {
+    const { type, format } = props;
+    const value = getValue(item, field.path);
+
+    if (type === TypeEnum.Boolean) {
+      return !!value; // Coerce null/undefined to false for booleans.
+    }
+    if (type === TypeEnum.Number) {
+      return value;
+    }
+    if (value == null) {
+      return value;
+    }
+
+    // TODO(ZaymonFC): Should we format this returned value for display based on the referenced prop format?
+    //   Right now we're going to be sorting based on the raw values.
+    //   Maybe we need to recurse this function with the referenced prop format and field?
+    if (format === FormatEnum.Ref && field.referencePath) {
+      const refValue = getValue(value.target, field.referencePath);
+      return refValue;
+    }
+
+    return formatForDisplay({ type, format, value });
+  }
+}

package/src/playwright/smoke.spec.ts

@@ -123,21 +123,36 @@ test.describe('Table', () => {
     await page.close();
   });
 
-  test('pick reference', async ({ browser }) => {
+  test('reference > reference / create new object', async ({ browser }) => {
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
     await table.grid.ready();
 
+    // Reference existing object.
+    // Scroll over to the manager column.
     await table.grid.panByWheel(10000, 0);
 
     await table.grid.cell(4, 0, 'grid').click();
     await page.keyboard.press('A');
+    await page.keyboard.press('N');
     await page.getByRole('option', { name: 'Anita Mayer' }).click();
 
     // Assert that the value is shown in the cell.
     await expect(page.getByRole('gridcell', { name: 'Anita Mayer' })).toBeVisible();
 
+    // Create new object.
+    await table.grid.cell(4, 1, 'grid').click();
+    await page.keyboard.type('t');
+    await page.keyboard.type('e');
+    await page.keyboard.type('s');
+    await page.keyboard.type('t');
+    await page.getByText('Create new object', { exact: false }).click();
+    await page.getByTestId('save-button').click();
+
+    // Scroll to the left.
+    await page.getByRole('gridcell', { name: 'test' }).click();
+
     await page.close();
   });