@dxos/react-ui-table 0.8.1-main.ba2dec9 → 0.8.1-staging.5be625a

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,18 +16,38 @@ 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;
+};
+
+// TODO(ZaymonFC): There should be a separate concept for immutable schemata.
+export type TableFeatures = {
+  selection: boolean;
+  dataEditable: boolean;
+  schemaEditable: boolean;
+};
+
+const defaultFeatures: TableFeatures = {
+  selection: true,
+  dataEditable: false,
+  schemaEditable: false,
+};
+
 export type TableModelProps<T extends BaseTableRow = { id: string }> = {
-  table: TableType;
+  id?: string;
+  space?: Space;
+  view?: ViewType;
   projection: ViewProjection;
+  features?: Partial<TableFeatures>;
   sorting?: FieldSortType[];
   pinnedRows?: { top: number[]; bottom: number[] };
   onInsertRow?: (index?: number) => void;
@@ -35,12 +55,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 +75,9 @@ 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 _features: TableFeatures;
 
   private readonly _rows = signal<T[]>([]);
   private readonly _sorting: TableSorting<T>;
@@ -62,8 +87,11 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
   private _columnMeta?: ReadonlySignal<DxGridAxisMeta>;
 
   constructor({
-    table,
+    id,
+    space,
+    view,
     projection,
+    features = {},
     sorting = [],
     pinnedRows = { top: [], bottom: [] },
     onCellUpdate,
@@ -71,11 +99,17 @@ 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._features = { ...defaultFeatures, ...features };
+
+    this._sorting = new TableSorting(this._rows, this._view, projection);
 
     if (sorting.length > 0) {
       const [sort] = sorting;
@@ -88,10 +122,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() {
@@ -102,6 +146,10 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     return this._sorting.sortedRows;
   }
 
+  public get features(): TableFeatures {
+    return this._features;
+  }
+
   /**
    * @reactive
    */
@@ -109,6 +157,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 +186,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 +203,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 +235,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 +256,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 +278,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 +322,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 +361,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 +374,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 +389,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

@@ -34,28 +34,44 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
   ) {}
 
   public getCells(range: DxGridPlaneRange, plane: DxGridPlane): DxGridPlaneCells {
+    let cells: DxGridPlaneCells;
+
     switch (plane) {
       case 'grid':
         this._visibleRange.value = range;
-        return this.getMainGridCells(range);
+        cells = this.getMainGridCells(range);
+        break;
       case 'frozenRowsStart':
-        return this.getHeaderCells(range);
+        cells = this.getHeaderCells(range);
+        break;
       case 'frozenColsStart':
-        return this.getSelectionColumnCells(range);
+        cells = this.getSelectionColumnCells(range);
+        break;
       case 'frozenColsEnd':
-        return this.getActionColumnCells(range);
+        cells = this.getActionColumnCells(range);
+        break;
       case 'fixedStartStart':
-        return this.getSelectAllCell();
+        cells = this.getSelectAllCell();
+        break;
       case 'fixedStartEnd':
-        return this.getNewColumnCell();
+        cells = this.getNewColumnCell();
+        break;
       default:
-        return {};
+        cells = {};
+    }
+
+    if (plane === 'grid' && this.model.features.dataEditable === false) {
+      Object.values(cells).forEach((cell) => {
+        cell.readonly = true;
+      });
     }
+
+    return cells;
   }
 
   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 +167,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;
@@ -223,9 +239,11 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
   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,
-        }),
+        accessoryHtml: this.model.features.schemaEditable
+          ? tableButtons.addColumn.render({
+              disabled: (this.model.view?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT,
+            })
+          : undefined,
         className: '!bg-gridHeader',
         readonly: true,
         value: '',

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';

package/src/util/table.ts

@@ -4,47 +4,44 @@
 
 import {
   AST,
+  type EchoSchema,
   Format,
   FormatEnum,
   type JsonPath,
   type JsonProp,
-  type EchoSchema,
   S,
   TypedObject,
   TypeEnum,
 } from '@dxos/echo-schema';
-import { PublicKey } from '@dxos/react-client';
+import { type Client, PublicKey } from '@dxos/react-client';
 import { create, makeRef, type Space } from '@dxos/react-client/echo';
-import { createFieldId, createView, getSchemaProperties, ViewProjection } from '@dxos/schema';
+import { createFieldId, createView, getSchemaProperties, ViewProjection, type ViewType } from '@dxos/schema';
 
 import { type TableType } from '../types';
 
 type InitialiseTableProps = {
+  client: Client;
   space: Space;
   table: TableType;
+  typename?: string;
   initialRow?: boolean;
-  initialSchema?: string;
 };
 
-// TODO(ZaymonFC): Clean up the branching in this file.
-
-// TODO(burdon): Pass in type.
-// TODO(burdon): User should determine typename.
 export const initializeTable = async ({
+  client,
   space,
   table,
+  typename,
   initialRow = true,
-  initialSchema,
-}: InitialiseTableProps): Promise<EchoSchema> => {
-  if (initialSchema) {
-    const schema = await space.db.schemaRegistry.query({ typename: initialSchema }).firstOrUndefined();
-
+}: InitialiseTableProps): Promise<S.Schema.AnyNoContext> => {
+  if (typename) {
+    const schema = await space.db.graph.getSchemaByTypename(typename, space.db);
     if (!schema) {
-      throw new Error(`Schema not found: ${initialSchema}`);
+      throw new Error(`Schema not found: ${typename}`);
     }
 
-    // We need to get the schema properties here. For now, only simple types and refs, not compound types
-    // are going to be supported.
+    // We need to get the schema properties here.
+    // For now, only simple types and refs, not compound types are going to be supported.
     const fields = getSchemaProperties(schema.ast)
       .filter((prop) => prop.format !== FormatEnum.Ref)
       .map((prop) => prop.name);
@@ -61,66 +58,71 @@ export const initializeTable = async ({
 
     return schema;
   } else {
-    const ContactSchema = TypedObject({
-      typename: `example.com/type/${PublicKey.random().truncate()}`,
-      version: '0.1.0',
-    })({
-      name: S.optional(S.String).annotations({
-        [AST.TitleAnnotationId]: 'Name',
-      }),
-      active: S.optional(S.Boolean),
-      email: S.optional(Format.Email),
-      salary: S.optional(Format.Currency()).annotations({
-        [AST.TitleAnnotationId]: 'Salary',
-      }), // TODO(burdon): Should default to prop name?
-    });
-
-    const [contactSchema] = await space.db.schemaRegistry.register([ContactSchema]);
+    const [schema] = await space.db.schemaRegistry.register([ContactSchema]);
+    const fields = ContactFields;
 
     table.view = makeRef(
       createView({
         name: 'View',
-        typename: contactSchema.typename,
-        jsonSchema: contactSchema.jsonSchema,
-        fields: ['name', 'email', 'salary', 'active'],
+        typename: schema.typename,
+        jsonSchema: schema.jsonSchema,
+        fields,
       }),
     );
 
-    const projection = new ViewProjection(contactSchema, table.view.target!);
-    projection.setFieldProjection({
-      field: {
-        id: table.view.target!.fields.find((f) => f.path === 'salary')!.id,
-        path: 'salary' as JsonPath,
-        size: 150,
-      },
-    });
-    projection.setFieldProjection({
-      field: {
-        id: table.view.target!.fields.find((f) => f.path === 'active')!.id,
-        path: 'active' as JsonPath,
-        size: 100,
-      },
-    });
+    createProjection(schema, table.view.target!);
 
-    projection.setFieldProjection({
-      field: {
-        id: createFieldId(),
-        path: 'manager' as JsonPath,
-        referencePath: 'name' as JsonPath,
-      },
-      props: {
-        property: 'manager' as JsonProp,
-        type: TypeEnum.Ref,
-        format: FormatEnum.Ref,
-        referenceSchema: contactSchema.typename,
-        title: 'Manager',
-      },
-    });
     if (initialRow) {
       // TODO(burdon): Last (first) row should not be in db and should be managed by the model.
-      space.db.add(create(contactSchema, {}));
+      space.db.add(create(schema, {}));
     }
 
-    return contactSchema;
+    return schema;
   }
 };
+
+const ContactSchema = TypedObject({
+  typename: `example.com/type/${PublicKey.random().truncate()}`,
+  version: '0.1.0',
+})({
+  name: S.optional(S.String).annotations({ [AST.TitleAnnotationId]: 'Name' }),
+  active: S.optional(S.Boolean),
+  email: S.optional(Format.Email),
+  salary: S.optional(Format.Currency()).annotations({ [AST.TitleAnnotationId]: 'Salary' }),
+});
+
+const ContactFields = ['name', 'email', 'salary', 'active'];
+
+const createProjection = (schema: EchoSchema, view: ViewType): ViewProjection => {
+  const projection = new ViewProjection(schema, view);
+  projection.setFieldProjection({
+    field: {
+      id: view.fields.find((f) => f.path === 'salary')!.id,
+      path: 'salary' as JsonPath,
+      size: 150,
+    },
+  });
+  projection.setFieldProjection({
+    field: {
+      id: view.fields.find((f) => f.path === 'active')!.id,
+      path: 'active' as JsonPath,
+      size: 100,
+    },
+  });
+  projection.setFieldProjection({
+    field: {
+      id: createFieldId(),
+      path: 'manager' as JsonPath,
+      referencePath: 'name' as JsonPath,
+    },
+    props: {
+      property: 'manager' as JsonProp,
+      type: TypeEnum.Ref,
+      format: FormatEnum.Ref,
+      referenceSchema: schema.typename,
+      title: 'Manager',
+    },
+  });
+
+  return projection;
+};