@dxos/react-ui-table 0.7.5-main.499c70c → 0.7.5-main.6a330ac

package/src/components/TableToolbar/TableToolbar.tsx

@@ -0,0 +1,72 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { create } from '@dxos/live-object';
+import { type ThemedClassName } from '@dxos/react-ui';
+import {
+  createGapSeparator,
+  createMenuAction,
+  type MenuAction,
+  type MenuActionHandler,
+  MenuProvider,
+  ToolbarMenu,
+  useMenuActions,
+} from '@dxos/react-ui-menu';
+
+import { translationKey } from '../../translations';
+
+export type TableToolbarActionProperties = { type: TableToolbarActionType };
+
+export type TableToolbarAction = MenuAction<TableToolbarActionProperties>;
+
+export type TableToolbarActionType = 'add-row' | 'comment' | 'save-view';
+
+type TableToolbarState = Partial<{ viewDirty: boolean }>;
+
+export type TableToolbarProps = ThemedClassName<
+  TableToolbarState & { onAction?: MenuActionHandler<TableToolbarAction>; attendableId?: string }
+>;
+
+const createTableToolbarActions = (state: TableToolbarState) => {
+  const add = createMenuAction<TableToolbarActionProperties>('add-row', {
+    type: 'add-row',
+    icon: 'ph--plus--regular',
+    label: ['add row', { ns: translationKey }],
+    testId: 'table.toolbar.add-row',
+  });
+  const save = createMenuAction<TableToolbarActionProperties>('save-view', {
+    type: 'save-view',
+    icon: 'ph--floppy-disk--regular',
+    label: ['save view label', { ns: translationKey }],
+    testId: 'table.toolbar.save-view',
+    iconOnly: false,
+    hidden: !state.viewDirty,
+  });
+  const gap = createGapSeparator();
+  const comment = createMenuAction('comment', {
+    type: 'comment',
+    icon: 'ph--chat-text--regular',
+    label: ['create comment', { ns: translationKey }],
+    testId: 'table.toolbar.comment',
+  });
+  const nodes = [add, save, ...gap.nodes, comment];
+  return {
+    nodes,
+    edges: nodes.map(({ id: target }) => ({ source: 'root', target })),
+  };
+};
+
+export const TableToolbar = ({ classNames, viewDirty, attendableId, onAction }: TableToolbarProps) => {
+  const state = useMemo(() => create<TableToolbarState>({ viewDirty }), []);
+  const actionsCreator = useCallback(() => createTableToolbarActions(state), [state]);
+  const menu = useMenuActions(actionsCreator);
+
+  return (
+    <MenuProvider {...menu} attendableId={attendableId} onAction={onAction as MenuActionHandler}>
+      <ToolbarMenu classNames={classNames} />
+    </MenuProvider>
+  );
+};

package/src/components/{Toolbar → TableToolbar}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './Toolbar';
+export * from './TableToolbar';

package/src/components/index.ts

@@ -3,4 +3,4 @@
 //
 
 export * from './Table';
-export * from './Toolbar';
+export * from './TableToolbar';

package/src/hooks/useTableModel.ts

@@ -2,10 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
+import { effect } from '@preact/signals-core';
 import { useEffect, useState } from 'react';
 
 import { type ReactiveObject } from '@dxos/react-client/echo';
+import { useSelectionActions } from '@dxos/react-ui-attention';
 import { type ViewProjection } from '@dxos/schema';
+import { isNonNullable } from '@dxos/util';
 
 import { type BaseTableRow, TableModel, type TableModelProps } from '../model';
 import { type TableType } from '../types';
@@ -48,5 +51,23 @@ export const useTableModel = <T extends BaseTableRow = { id: string }>({
     }
   }, [model, objects]);
 
+  const { select, clear } = useSelectionActions([table?.id, table?.view?.target?.query.type].filter(isNonNullable));
+
+  useEffect(() => {
+    if (!model) {
+      return;
+    }
+
+    const unsubscribe = effect(() => {
+      select([...model.selection.selection.value]);
+    });
+
+    // Maybe clear the selection here?
+    return () => {
+      clear();
+      unsubscribe();
+    };
+  }, [model]);
+
   return model;
 };

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

@@ -37,11 +37,6 @@ describe('TableModel', () => {
   });
 
   describe('methods', () => {
-    it('should set sorting', () => {
-      model.setSort('col2', 'asc');
-      expect(model.sorting).toEqual([{ columnId: 'col2', direction: 'asc' }]);
-    });
-
     it('should pin a row', () => {
       model.pinRow(1, 'top');
       expect(model.pinnedRows.top).toContain(1);

package/src/model/table-model.ts

@@ -1,16 +1,15 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
 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

@@ -68,7 +68,8 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
           }
 
           switch (props.format) {
-            case FormatEnum.Boolean: {
+            case FormatEnum.Boolean:
+            case FormatEnum.SingleSelect: {
               return '';
             }
             case FormatEnum.Ref: {
@@ -119,6 +120,17 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
         cell.readonly = true;
       }
 
+      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>`;
+          }
+        }
+      }
+
       const idx = toPlaneCellIndex({ col: colIndex, row: displayIndex });
       cells[idx] = cell;
     };
@@ -142,12 +154,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 +208,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 +223,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: '',
       },
     };
   }