@dxos/react-ui-table 0.7.4 → 0.7.5-labs.a279d8c

package/src/model/table-presentation.ts

@@ -0,0 +1,223 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { signal } from '@preact/signals-core';
+
+import { FormatEnum, getValue } from '@dxos/echo-schema';
+import { cellClassesForFieldType, cellClassesForRowSelection, formatForDisplay } from '@dxos/react-ui-form';
+import {
+  type DxGridPlane,
+  type DxGridPlaneCells,
+  toPlaneCellIndex,
+  type DxGridPlaneRange,
+  type DxGridCellValue,
+} from '@dxos/react-ui-grid';
+import { mx } from '@dxos/react-ui-theme';
+import { VIEW_FIELD_LIMIT, type FieldType } from '@dxos/schema';
+
+import { type BaseTableRow, type TableModel } from './table-model';
+import { tableButtons, tableControls } from '../util';
+
+/**
+ * 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 BaseTableRow = { id: string }> {
+  constructor(
+    private readonly model: TableModel<T>,
+    private readonly _visibleRange = signal<DxGridPlaneRange>({
+      start: { row: 0, col: 0 },
+      end: { row: 0, col: 0 },
+    }),
+  ) {}
+
+  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.model.table.view?.target?.fields ?? [];
+
+    const addCell = (obj: T, field: FieldType, colIndex: number, displayIndex: number): void => {
+      const { props } = this.model.projection.getFieldProjection(field.id);
+
+      const cell: DxGridCellValue = {
+        get value() {
+          const value = getValue(obj, field.path);
+          if (value == null) {
+            return '';
+          }
+
+          switch (props.format) {
+            case FormatEnum.Boolean: {
+              return '';
+            }
+            case FormatEnum.Ref: {
+              if (!field.referencePath) {
+                return ''; // TODO(burdon): Show error.
+              }
+
+              return getValue(value.target, 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.model.selection.isObjectSelected(obj));
+      if (rowSelectionClasses) {
+        classes.push(rowSelectionClasses);
+      }
+      if (classes.length > 0) {
+        cell.className = mx(classes.flat());
+      }
+
+      if (props.format === FormatEnum.Ref && props.referenceSchema) {
+        const targetObj = getValue(obj, field.path)?.target;
+        if (targetObj) {
+          cell.accessoryHtml = tableButtons.referencedCell.render({
+            targetId: targetObj.id as any as string,
+            schemaId: props.referenceSchema,
+          });
+        }
+      }
+
+      if (props.format === FormatEnum.Boolean) {
+        const value = getValue(obj, field.path);
+        cell.accessoryHtml = tableControls.switch.render({
+          colIndex,
+          rowIndex: displayIndex,
+          checked: value ?? false,
+        });
+        cell.readonly = true;
+      }
+
+      const idx = toPlaneCellIndex({ col: colIndex, row: displayIndex });
+      cells[idx] = cell;
+    };
+
+    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;
+        }
+
+        addCell(this.model.rows.value[row], field, col, row);
+      }
+    }
+
+    return cells;
+  }
+
+  private getHeaderCells(range: DxGridPlaneRange): DxGridPlaneCells {
+    const cells: DxGridPlaneCells = {};
+    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: `
+          ${direction !== undefined ? tableButtons.sort.render({ fieldId: field.id, direction }) : ''}
+          ${tableButtons.columnSettings.render({ fieldId: field.id })}
+        `,
+        className: '!bg-gridHeader',
+      };
+    }
+
+    return cells;
+  }
+
+  private getSelectionColumnCells(range: DxGridPlaneRange): DxGridPlaneCells {
+    const cells: DxGridPlaneCells = {};
+    for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
+      const isSelected = this.model.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.model.getRowCount(); row++) {
+      const isSelected = this.model.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 })]: {
+        accessoryHtml: tableControls.checkbox.render({
+          rowIndex: 0,
+          header: true,
+          checked: this.model.selection.allRowsSeleted.value,
+        }),
+        className: '!bg-gridHeader',
+        readonly: true,
+        value: '',
+      },
+    };
+  }
+
+  private getNewColumnCell(): DxGridPlaneCells {
+    return {
+      [toPlaneCellIndex({ col: 0, row: 0 })]: {
+        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/TableManager.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type Page } from '@playwright/test';
+import { type Locator, type Page } from '@playwright/test';
 
 import { DxGridManager } from '@dxos/lit-grid/testing';
 
@@ -44,6 +44,10 @@ export class TableManager {
     await this.page.getByTestId(TABLE_SELECTORS.selection).nth(0).click();
   }
 
+  public selection(index: number): Locator {
+    return this.page.getByTestId(TABLE_SELECTORS.selection).nth(index + 1);
+  }
+
   public async sortColumn(index: number, direction: 'ascending' | 'descending'): Promise<void> {
     await this.page.getByTestId(TABLE_SELECTORS.columnSettingsButton).nth(index).click();
     await this.page.getByTestId(TABLE_SELECTORS.columnSort[direction]).click();

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,29 @@ test.describe('Table', () => {
     await page.close();
   });
 
-  test('delete row', async ({ browser }) => {
+  test('selection', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
+    const { page } = await setupPage(browser, { url: storyUrl });
+    const table = new TableManager(page);
+
+    await table.grid.ready();
+    // Select All
+    await table.toggleSelectAll();
+    await expect(table.selection(0)).toBeChecked();
+    await expect(table.selection(1)).toBeChecked();
+    await expect(table.selection(2)).toBeChecked();
+
+    // Deselect All
+    await table.toggleSelectAll();
+    await expect(table.selection(0)).not.toBeChecked();
+    await expect(table.selection(1)).not.toBeChecked();
+    await expect(table.selection(2)).not.toBeChecked();
+
+    await page.close();
+  });
+
+  test('delete row', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -48,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);
 
@@ -64,11 +87,15 @@ 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);
 
     await table.grid.ready();
+    await table.deleteColumn(0);
+    await expect(table.grid.cellsWithinPlane('grid')).toHaveCount(40);
+
     await table.deleteColumn(0);
     await expect(table.grid.cellsWithinPlane('grid')).toHaveCount(30);
 
@@ -85,8 +112,10 @@ test.describe('Table', () => {
     await page.close();
   });
 
-  // Rest of add column test remains the same as it's a more complex flow
-  test('add column', async ({ browser }) => {
+  // 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, browserName }) => {
+    test.skip(browserName === 'webkit');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -98,4 +127,60 @@ test.describe('Table', () => {
     await expect(page.getByRole('gridcell', { name: newColumnLabel })).toBeVisible();
     await page.close();
   });
+
+  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);
+
+    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();
+  });
+
+  test('test toggles', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
+    const { page } = await setupPage(browser, { url: storyUrl });
+    const table = new TableManager(page);
+
+    await table.grid.ready();
+
+    await page.getByTestId('table-switch').first().click();
+    await page.getByTestId('table-switch').nth(7).click();
+
+    // Test that checks are durable in the data model by sorting.
+    await table.sortColumn(1, 'descending');
+
+    // Assert the first two switch checkboxes are checked.
+    await expect(page.getByTestId('table-switch').first()).toBeChecked();
+    await expect(page.getByTestId('table-switch').nth(1)).toBeChecked();
+    await expect(table.grid.cell(0, 0, 'grid')).toHaveText('Anita Mayer');
+    await expect(table.grid.cell(0, 1, 'grid')).toHaveText('Uwe Øvergård');
+
+    await page.close();
+  });
 });

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

@@ -2,16 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
-import { ref, ObjectId, S, TypedObject } from '@dxos/echo-schema';
-import { ThreadType } from '@dxos/plugin-space';
+import { Ref, ObjectId, S, TypedObject, Expando } from '@dxos/echo-schema';
+// import { ThreadType } from '@dxos/plugin-space/types';
 import { ViewType } from '@dxos/schema';
 
 export const TableSchema = S.Struct({
   id: ObjectId, // TODO(burdon): Where should this be?
   name: S.optional(S.String),
-  view: S.optional(ref(ViewType)),
+  view: S.optional(Ref(ViewType)),
   // TODO(burdon): Should not import from plugin. Either factor out type or use reverse deps when supported.
-  threads: S.optional(S.Array(ref(ThreadType))),
+  threads: S.optional(S.Array(Ref(Expando /* ThreadType */))), // TODO(dmaretskyi): Breaks edge because plugin-space depends on react-client.
 });
 
 // type TableType = S.Schema.Type<typeof TableSchema>;

package/src/util/index.ts

@@ -5,3 +5,4 @@
 export * from './signals';
 export * from './table';
 export * from './table-buttons';
+export * from './table-controls';