@dxos/react-ui-table 0.7.5-main.9d26e3a → 0.7.5-main.9d2a38b

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 { type FieldSortType, FormatEnum, getValue, setValue, 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,18 +19,16 @@ import {
 import { type ViewProjection } from '@dxos/schema';
 
 import { SelectionModel } from './selection-model';
+import { 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 }> = {
   table: TableType;
   projection: ViewProjection;
-  sorting?: SortConfig[];
+  sorting?: FieldSortType[];
   pinnedRows?: { top: number[]; bottom: number[] };
   onInsertRow?: (index?: number) => void;
   onDeleteRows?: (index: number, obj: T[]) => void;
@@ -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.view?.target, 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(): TableSorting<T> | undefined {
+    return this._sorting;
   }
 
   public get pinnedRows(): NonNullable<TableModelProps<T>['pinnedRows']> {
@@ -118,23 +118,23 @@ 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;
   }
 
+  /** @reactive */
+  public get isViewDirty(): boolean {
+    return this._sorting.isDirty;
+  }
+
   //
   // Initialisation
   //
 
   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 +153,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 +171,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 +196,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 +222,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 +245,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 +284,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 +304,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);
     }
   }
@@ -376,18 +323,6 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     }
   }
 
-  //
-  // Sorting
-  //
-
-  public setSort(fieldId: string, direction: SortDirection): void {
-    this._sorting.value = { fieldId, direction };
-  }
-
-  public clearSort(): void {
-    this._sorting.value = undefined;
-  }
-
   //
   // Pinning
   //
@@ -401,4 +336,11 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     this._pinnedRows.top = this._pinnedRows.top.filter((index: number) => index !== rowIndex);
     this._pinnedRows.bottom = this._pinnedRows.bottom.filter((index: number) => index !== rowIndex);
   }
+
+  //
+  // View operations
+  //
+  public saveView(): void {
+    this._sorting.save();
+  }
 }

package/src/model/table-presentation.ts

@@ -142,12 +142,19 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
     const fields = this.model.table.view?.target?.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;
+      const direction = sorting?.fieldId === field.id ? sorting.direction : undefined;
+
       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 }),
+        accessoryHtml: `
+          ${direction !== undefined ? tableButtons.sort.render({ fieldId: field.id, direction }) : ''}
+          ${tableButtons.columnSettings.render({ fieldId: field.id })}
+        `,
+        className: '!bg-gridHeader',
       };
     }
 
@@ -189,13 +196,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 +211,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,201 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { computed, signal, type Signal, type ReadonlySignal } from '@preact/signals-core';
+import orderBy from 'lodash.orderby';
+
+import { getValue, FormatEnum, TypeEnum, type SortDirectionType, type FieldSortType } from '@dxos/echo-schema';
+import { formatForDisplay } from '@dxos/react-ui-form';
+import type { PropertyType, FieldType, ViewProjection, ViewType } from '@dxos/schema';
+
+import { type BaseTableRow } from './table-model';
+
+/**
+ * Represents the local sort state.
+ * - undefined: No local sort set, fallback to view sort.
+ * - cleared: Sort explicitly cleared by user.
+ * - active: Active local sort with sort configuration.
+ */
+type LocalSort = { type: 'cleared' } | { type: 'active'; sort: FieldSortType } | undefined;
+
+/**
+ * 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 _rows: Signal<T[]>;
+  private readonly _localSort = signal<LocalSort>(undefined);
+  private readonly _isDirty: ReadonlySignal<boolean>;
+  public readonly sortedRows: ReadonlySignal<T[]>;
+
+  constructor(
+    rows: Signal<T[]>,
+    private readonly _view: ViewType | undefined,
+    private readonly _projection: ViewProjection,
+  ) {
+    this._rows = rows;
+    this._isDirty = computed(() => {
+      const local = this._localSort.value;
+      const viewSort = this._view?.query.sort?.[0];
+      if (local?.type === 'cleared') {
+        return viewSort !== undefined;
+      }
+      if (local?.type === 'active') {
+        if (!viewSort) {
+          return true;
+        }
+        return local.sort.fieldId !== viewSort.fieldId || local.sort.direction !== viewSort.direction;
+      }
+      return false;
+    });
+    this.sortedRows = this.initialiseSortedRows();
+  }
+
+  /**
+   * @reactive
+   * @returns Local sort if present, falls back to view sort.
+   */
+  public get sorting(): FieldSortType | undefined {
+    const local = this._localSort.value;
+    if (local?.type === 'cleared') {
+      return undefined;
+    }
+    if (local?.type === 'active') {
+      return local.sort;
+    }
+    return this._view?.query.sort?.[0];
+  }
+
+  /**
+   * @reactive
+   * @returns Whether local sort differs from view sort.
+   */
+  public get isDirty(): boolean {
+    return this._isDirty.value;
+  }
+
+  public getDataIndex(displayIndex: number): number {
+    return this._displayToDataIndex.get(displayIndex) ?? displayIndex;
+  }
+
+  public setSort(fieldId: string, direction: SortDirectionType): void {
+    this._localSort.value = {
+      type: 'active',
+      sort: { fieldId, direction },
+    };
+  }
+
+  public toggleSort(fieldId: string): void {
+    if (!this._view || !this.sorting || this.sorting.fieldId !== fieldId) {
+      return;
+    }
+
+    switch (this.sorting.direction) {
+      case 'asc': {
+        this.setSort(fieldId, 'desc');
+        break;
+      }
+      case 'desc': {
+        this.setSort(fieldId, 'asc');
+        break;
+      }
+    }
+  }
+
+  public clearSort(): void {
+    this._localSort.value = { type: 'cleared' };
+  }
+
+  public save(): void {
+    if (this._view && this._localSort.value !== undefined) {
+      if (this._localSort.value.type === 'active') {
+        this._view.query.sort = [this._localSort.value.sort];
+      } else {
+        this._view.query.sort = [];
+      }
+      this._localSort.value = undefined;
+    }
+  }
+
+  //
+  // Initialisation.
+  //
+
+  private initialiseSortedRows(): ReadonlySignal<T[]> {
+    return computed(() => {
+      this._displayToDataIndex.clear();
+      const sort = this.sorting;
+      if (!sort || !this._view) {
+        return this._rows.value;
+      }
+
+      const field = this._view.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

@@ -13,17 +13,17 @@ const storyUrl = `http://localhost:9009/iframe.html?id=${storyId}&viewMode=story
 
 // NOTE(ZaymonFC): This test suite relies on the faker seed being set to 0 in the story.
 test.describe('Table', () => {
-  test('Loads', async ({ browser }) => {
+  test('Loads', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
-    // (name, email, salary, manager) * 10 rows.
     await table.grid.ready();
-    await expect(table.grid.cellsWithinPlane('grid')).toHaveCount(40);
     await page.close();
   });
 
-  test('sort', async ({ browser }) => {
+  test('sort', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -38,7 +38,8 @@ test.describe('Table', () => {
     await page.close();
   });
 
-  test('selection', async ({ browser }) => {
+  test('selection', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -58,7 +59,8 @@ test.describe('Table', () => {
     await page.close();
   });
 
-  test('delete row', async ({ browser }) => {
+  test('delete row', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -68,7 +70,8 @@ test.describe('Table', () => {
     await page.close();
   });
 
-  test('delete row--select all', async ({ browser }) => {
+  test('delete row--select all', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -84,7 +87,8 @@ test.describe('Table', () => {
     await page.close();
   });
 
-  test('delete column', async ({ browser }) => {
+  test('delete column', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -110,7 +114,8 @@ test.describe('Table', () => {
 
   // Rest of add column test remains the same as it's a more complex flow.
   // TODO(ZaymonFC): Restore this after fixing format selection.
-  test('add column', async ({ browser }) => {
+  test('add column', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -123,7 +128,8 @@ test.describe('Table', () => {
     await page.close();
   });
 
-  test('reference > reference / create new object', async ({ browser }) => {
+  test('reference > reference / create new object', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -156,7 +162,8 @@ test.describe('Table', () => {
     await page.close();
   });
 
-  test('test toggles', async ({ browser }) => {
+  test('test toggles', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 

package/src/translations.ts

@@ -16,7 +16,7 @@ export default [
         'new schema': 'New schema',
         'continue label': 'Continue',
         'create stack section label': 'Create table',
-        'add row': 'Add row',
+        'add row label': 'Add row',
         'create comment': 'Create thread',
         'column action sort descending': 'Sort Descending',
         'column action sort ascending': 'Sort Ascending',
@@ -28,6 +28,7 @@ export default [
         'column deleted label': 'Column deleted',
         'new column button label': 'Create column',
         'create new object label': 'Create new object “{{text}}”',
+        'save view label': 'Save changes to view',
       },
     },
   },

package/src/types/table.ts

@@ -3,7 +3,7 @@
 //
 
 import { Ref, ObjectId, S, TypedObject } from '@dxos/echo-schema';
-import { ThreadType } from '@dxos/plugin-space';
+import { ThreadType } from '@dxos/plugin-space/types';
 import { ViewType } from '@dxos/schema';
 
 export const TableSchema = S.Struct({