@dxos/react-ui-table 0.8.0 → 0.8.1-main.81238a8

package/src/hooks/useTableModel.ts

@@ -5,24 +5,30 @@
 import { effect } from '@preact/signals-core';
 import { useEffect, useState } from 'react';
 
-import { type ReactiveObject } from '@dxos/react-client/echo';
+import { fullyQualifiedId, getSpace, 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 BaseTableRow, TableModel, type TableModelProps, type TableRowAction } from '../model';
 import { type TableType } from '../types';
 
 export type UseTableModelParams<T extends BaseTableRow = { id: string }> = {
   table?: TableType;
   projection?: ViewProjection;
   objects?: ReactiveObject<T>[];
+  onSelectionChanged?: (selection: string[]) => void;
+  rowActions?: TableRowAction[];
+  onRowAction?: (actionId: string, data: T) => void;
 } & Pick<TableModelProps<T>, 'onInsertRow' | 'onDeleteRows' | 'onDeleteColumn' | 'onCellUpdate' | 'onRowOrderChanged'>;
 
 export const useTableModel = <T extends BaseTableRow = { id: string }>({
   objects,
   table,
   projection,
+  onSelectionChanged,
+  rowActions,
+  onRowAction,
   ...props
 }: UseTableModelParams<T>): TableModel<T> | undefined => {
   const [model, setModel] = useState<TableModel<T>>();
@@ -33,7 +39,15 @@ export const useTableModel = <T extends BaseTableRow = { id: string }>({
 
     let model: TableModel<T> | undefined;
     const t = setTimeout(async () => {
-      model = new TableModel<T>({ table, projection, ...props });
+      model = new TableModel<T>({
+        id: fullyQualifiedId(table),
+        space: getSpace(table),
+        view: table.view?.target,
+        projection,
+        rowActions,
+        onRowAction,
+        ...props,
+      });
       await model.open();
       setModel(model);
     });
@@ -42,7 +56,7 @@ export const useTableModel = <T extends BaseTableRow = { id: string }>({
       clearTimeout(t);
       void model?.close();
     };
-  }, [table, projection]); // TODO(burdon): Trigger if callbacks change?
+  }, [table, projection, table?.view?.target, rowActions]); // TODO(burdon): Trigger if callbacks change?
 
   // Update data.
   useEffect(() => {
@@ -59,7 +73,9 @@ export const useTableModel = <T extends BaseTableRow = { id: string }>({
     }
 
     const unsubscribe = effect(() => {
-      select([...model.selection.selection.value]);
+      const selectedItems = [...model.selection.selection.value];
+      select(selectedItems);
+      onSelectionChanged?.(selectedItems);
     });
 
     // Maybe clear the selection here?
@@ -67,7 +83,7 @@ export const useTableModel = <T extends BaseTableRow = { id: string }>({
       clear();
       unsubscribe();
     };
-  }, [model]);
+  }, [model, onSelectionChanged]);
 
   return model;
 };

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

@@ -108,5 +108,5 @@ const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
   const view = createView({ name: 'Test', typename: schema.typename, jsonSchema: schema.jsonSchema });
   const projection = new ViewProjection(schema, view);
   const table = create(TableType, { view: makeRef(view) });
-  return new TableModel({ table, projection, ...props });
+  return new TableModel({ id: table.id, space: undefined, view, projection, ...props });
 };

package/src/model/table-model.ts

@@ -4,11 +4,11 @@
 
 import { computed, effect, signal, type ReadonlySignal } from '@preact/signals-core';
 
+import { type Space } from '@dxos/client/echo';
 import { Resource } from '@dxos/context';
 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 { formatForEditing, parseValue } from '@dxos/react-ui-form';
 import {
   type DxGridAxisMeta,
@@ -16,17 +16,23 @@ import {
   type DxGridPlanePosition,
   type DxGridPosition,
 } from '@dxos/react-ui-grid';
-import { type ViewProjection } from '@dxos/schema';
+import { type ViewType, 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 BaseTableRow = Record<JsonProp, any> & { id: string };
 
+export type TableRowAction = {
+  id: string;
+  translationKey: string;
+};
+
 export type TableModelProps<T extends BaseTableRow = { id: string }> = {
-  table: TableType;
+  id?: string;
+  space?: Space;
+  view?: ViewType;
   projection: ViewProjection;
   sorting?: FieldSortType[];
   pinnedRows?: { top: number[]; bottom: number[] };
@@ -35,12 +41,14 @@ export type TableModelProps<T extends BaseTableRow = { id: string }> = {
   onDeleteColumn?: (fieldId: string) => void;
   onCellUpdate?: (cell: DxGridPosition) => void;
   onRowOrderChanged?: () => void;
+  rowActions?: TableRowAction[];
+  onRowAction?: (actionId: string, data: T) => void;
 };
 
 export class TableModel<T extends BaseTableRow = { id: string }> extends Resource {
-  public readonly id = `table-model-${PublicKey.random().truncate()}`;
-
-  private readonly _table: TableType;
+  private readonly _id: string | undefined;
+  private readonly _space: Space | undefined;
+  private readonly _view: ViewType | undefined;
   private readonly _projection: ViewProjection;
 
   private readonly _visibleRange = signal<DxGridPlaneRange>({
@@ -53,6 +61,8 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
   private readonly _onDeleteColumn?: TableModelProps<T>['onDeleteColumn'];
   private readonly _onCellUpdate?: TableModelProps<T>['onCellUpdate'];
   private readonly _onRowOrderChanged?: TableModelProps<T>['onRowOrderChanged'];
+  private readonly _rowActions: TableRowAction[];
+  private readonly _onRowAction?: TableModelProps<T>['onRowAction'];
 
   private readonly _rows = signal<T[]>([]);
   private readonly _sorting: TableSorting<T>;
@@ -62,7 +72,9 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
   private _columnMeta?: ReadonlySignal<DxGridAxisMeta>;
 
   constructor({
-    table,
+    id,
+    space,
+    view,
     projection,
     sorting = [],
     pinnedRows = { top: [], bottom: [] },
@@ -71,11 +83,16 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     onDeleteRows,
     onInsertRow,
     onRowOrderChanged,
+    rowActions = [],
+    onRowAction,
   }: TableModelProps<T>) {
     super();
-    this._table = table;
+    this._id = id;
+    this._space = space;
+    this._view = view;
     this._projection = projection;
-    this._sorting = new TableSorting(this._rows, table.view?.target, projection);
+
+    this._sorting = new TableSorting(this._rows, this._view, projection);
 
     if (sorting.length > 0) {
       const [sort] = sorting;
@@ -88,10 +105,20 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     this._onDeleteColumn = onDeleteColumn;
     this._onCellUpdate = onCellUpdate;
     this._onRowOrderChanged = onRowOrderChanged;
+    this._rowActions = rowActions;
+    this._onRowAction = onRowAction;
   }
 
-  public get table() {
-    return this._table;
+  public get id() {
+    return this._id;
+  }
+
+  public get space() {
+    return this._space;
+  }
+
+  public get view() {
+    return this._view;
   }
 
   public get projection() {
@@ -109,6 +136,17 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     return this._sorting;
   }
 
+  /**
+   * Gets the row data at the specified display index.
+   */
+  public getRowAt(displayIndex: number): T | undefined {
+    if (displayIndex < 0 || displayIndex >= this._sorting.sortedRows.value.length) {
+      return undefined;
+    }
+
+    return this._sorting.sortedRows.value[displayIndex];
+  }
+
   public get pinnedRows(): NonNullable<TableModelProps<T>['pinnedRows']> {
     return this._pinnedRows;
   }
@@ -127,6 +165,10 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     return this._sorting.isDirty;
   }
 
+  public get rowActions(): TableRowAction[] {
+    return this._rowActions;
+  }
+
   //
   // Initialisation
   //
@@ -140,7 +182,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
 
   private initializeColumnMeta(): void {
     this._columnMeta = computed(() => {
-      const fields = this._table.view?.target?.fields ?? [];
+      const fields = this._view?.fields ?? [];
       const meta = Object.fromEntries(
         fields.map((field, index: number) => [index, { size: field?.size ?? 256, resizeable: true }]),
       );
@@ -172,7 +214,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
         rowEffects.push(
           effect(() => {
             const obj = this._sorting.sortedRows.value[row];
-            this?._table?.view?.target?.fields.forEach((field) => touch(getValue(obj, field.path)));
+            this._view?.fields.forEach((field) => touch(getValue(obj, field.path)));
             this._onCellUpdate?.({ row, col: start.col, plane: 'grid' });
           }),
         );
@@ -193,7 +235,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
 
   public getRowCount = (): number => this._rows.value.length;
 
-  public getColumnCount = (): number => this.table.view?.target?.fields.length ?? 0;
+  public getColumnCount = (): number => this._view?.fields.length ?? 0;
 
   public insertRow = (rowIndex?: number): void => {
     const row = rowIndex !== undefined ? this._sorting.getDataIndex(rowIndex) : this._rows.value.length;
@@ -215,8 +257,21 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     this._onDeleteRows?.(row, objectsToDelete);
   };
 
+  public handleRowAction = (actionId: string, rowIndex: number): void => {
+    if (!this._onRowAction) {
+      return;
+    }
+
+    const row = this._sorting.getDataIndex(rowIndex);
+    const data = this._rows.value[row];
+
+    if (data) {
+      this._onRowAction(actionId, data);
+    }
+  };
+
   public getCellData = ({ col, row }: DxGridPlanePosition): any => {
-    const fields = this.table.view?.target?.fields ?? [];
+    const fields = this._view?.fields ?? [];
     if (col < 0 || col >= fields.length) {
       return undefined;
     }
@@ -246,7 +301,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
 
   public setCellData = ({ col, row }: DxGridPlanePosition, value: any): void => {
     const rowIdx = this._sorting.getDataIndex(row);
-    const fields = this.table.view?.target?.fields ?? [];
+    const fields = this._view?.fields ?? [];
     if (col < 0 || col >= fields.length) {
       return;
     }
@@ -285,7 +340,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
    */
   public updateCellData({ col, row }: DxGridPlanePosition, update: (value: any) => any): void {
     const dataRow = this._sorting.getDataIndex(row);
-    const fields = this.table.view?.target?.fields ?? [];
+    const fields = this._view?.fields ?? [];
     const field = fields[col];
 
     const value = getValue(this._rows.value[dataRow], field.path);
@@ -298,11 +353,11 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
   //
 
   public deleteColumn(fieldId: string): void {
-    if (!this.table.view) {
+    if (!this._view) {
       return;
     }
 
-    const field = this.table.view.target?.fields.find((field) => field.id === fieldId);
+    const field = this._view?.fields.find((field) => field.id === fieldId);
     if (field && this._onDeleteColumn) {
       this._onDeleteColumn(field.id);
     }
@@ -313,7 +368,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
   //
 
   public setColumnWidth(columnIndex: number, width: number): void {
-    const fields = this.table.view?.target?.fields ?? [];
+    const fields = this._view?.fields ?? [];
     if (columnIndex < fields.length) {
       const newWidth = Math.max(0, width);
       const field = fields[columnIndex];

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

@@ -98,5 +98,5 @@ const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
   const view = createView({ name: 'Test', typename: schema.typename, jsonSchema: schema.jsonSchema });
   const projection = new ViewProjection(schema, view);
   const table = create(TableType, { view: makeRef(view) });
-  return new TableModel({ table, projection, ...props });
+  return new TableModel({ id: table.id, view, projection, ...props });
 };

package/src/model/table-presentation.ts

@@ -55,7 +55,7 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
 
   private getMainGridCells(range: DxGridPlaneRange): DxGridPlaneCells {
     const cells: DxGridPlaneCells = {};
-    const fields = this.model.table.view?.target?.fields ?? [];
+    const fields = this.model.view?.fields ?? [];
 
     const addCell = (obj: T, field: FieldType, colIndex: number, displayIndex: number): void => {
       const { props } = this.model.projection.getFieldProjection(field.id);
@@ -151,7 +151,7 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
 
   private getHeaderCells(range: DxGridPlaneRange): DxGridPlaneCells {
     const cells: DxGridPlaneCells = {};
-    const fields = this.model.table.view?.target?.fields ?? [];
+    const fields = this.model.view?.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;
@@ -224,7 +224,7 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
     return {
       [toPlaneCellIndex({ col: 0, row: 0 })]: {
         accessoryHtml: tableButtons.addColumn.render({
-          disabled: (this.model.table.view?.target?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT,
+          disabled: (this.model.view?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT,
         }),
         className: '!bg-gridHeader',
         readonly: true,

package/src/model/table-sorting.ts

@@ -82,6 +82,7 @@ export class TableSorting<T extends BaseTableRow> {
     if (local?.type === 'active') {
       return local.sort;
     }
+
     return this._view?.query.sort?.[0];
   }
 

package/src/types/table.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Ref, ObjectId, S, TypedObject, Expando } from '@dxos/echo-schema';
+import { EchoObject, Expando, LabelAnnotationId, ObjectId, Ref, S } from '@dxos/echo-schema';
 // import { ThreadType } from '@dxos/plugin-space/types';
 import { ViewType } from '@dxos/schema';
 
@@ -12,11 +12,9 @@ export const TableSchema = S.Struct({
   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(Expando /* ThreadType */))), // TODO(dmaretskyi): Breaks edge because plugin-space depends on react-client.
+}).annotations({
+  [LabelAnnotationId]: 'name',
 });
 
-// type TableType = S.Schema.Type<typeof TableSchema>;
-
-export class TableType extends TypedObject({
-  typename: 'dxos.org/type/Table',
-  version: '0.1.0',
-})(TableSchema.fields) {}
+export const TableType = TableSchema.pipe(EchoObject('dxos.org/type/Table', '0.1.0'));
+export type TableType = S.Schema.Type<typeof TableType>;

package/src/util/dynamic-table.ts

@@ -0,0 +1,71 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type SortDirectionType } from '@dxos/echo-schema';
+import { create, makeRef } from '@dxos/live-object';
+import {
+  createView,
+  echoSchemaFromPropertyDefinitions,
+  ViewProjection,
+  type SchemaPropertyDefinition,
+} from '@dxos/schema';
+
+import { TableType } from '..';
+
+type PropertyDisplayProps = {
+  size: number;
+  title: string;
+  sort: SortDirectionType;
+};
+
+export type TablePropertyDefinition = SchemaPropertyDefinition & Partial<PropertyDisplayProps>;
+
+export const makeDynamicTable = (typename: string, properties: TablePropertyDefinition[]) => {
+  const table = create(TableType, { name: 'dynamic-table' });
+  const echoSchema = echoSchemaFromPropertyDefinitions(typename, properties);
+  const propertyNames = properties.map((property) => property.name);
+
+  const view = createView({
+    name: 'dynamic-table',
+    typename: echoSchema.typename,
+    jsonSchema: echoSchema.jsonSchema,
+    fields: propertyNames,
+  });
+
+  table.view = makeRef(view);
+  const viewProjection = new ViewProjection(echoSchema, view);
+
+  for (const property of properties) {
+    if (!view.fields) {
+      continue;
+    }
+
+    const field = view.fields.find((field) => field.path === property.name);
+    if (field) {
+      if (property.size !== undefined) {
+        field.size = property.size;
+      }
+
+      if (property.title !== undefined) {
+        const fieldProjection = viewProjection.getFieldProjection(field.id);
+        viewProjection.setFieldProjection({
+          ...fieldProjection,
+          props: { ...fieldProjection.props, title: property.title },
+        });
+      }
+
+      if (property.sort) {
+        const fieldId = field.id;
+        view.query.sort = [{ fieldId, direction: property.sort }];
+      }
+    }
+  }
+
+  return {
+    table,
+    schema: echoSchema,
+    view,
+    viewProjection,
+  };
+};

package/src/util/index.ts

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './dynamic-table';
 export * from './signals';
 export * from './table';
 export * from './table-buttons';