@dxos/react-ui-table 0.8.1-staging.391c573 → 0.8.1-staging.5be625a

package/dist/lib/browser/index.mjs

@@ -1,7 +1,7 @@
 import {
   TableSchema,
   TableType
-} from "./chunk-3FR6NHPD.mjs";
+} from "./chunk-5MKYB7NF.mjs";
 
 // packages/ui/react-ui-table/src/translations.ts
 var translationKey = "table";
@@ -39,12 +39,12 @@ var translations_default = [
 import React7, { forwardRef, useCallback as useCallback4, useImperativeHandle, useState as useState2, useMemo as useMemo4 } from "react";
 import { getValue as getValue4 } from "@dxos/echo-schema";
 import { invariant as invariant3 } from "@dxos/invariant";
-import { Filter, getSpace as getSpace4, fullyQualifiedId } from "@dxos/react-client/echo";
+import { Filter } from "@dxos/react-client/echo";
 import { useTranslation as useTranslation3 } from "@dxos/react-ui";
 import { useAttention } from "@dxos/react-ui-attention";
 import { Grid, closestCell } from "@dxos/react-ui-grid";
 import { mx as mx2 } from "@dxos/react-ui-theme";
-import { isNotFalsy } from "@dxos/util";
+import { isNotFalsy, safeParseInt } from "@dxos/util";
 
 // packages/ui/react-ui-table/src/components/Table/ColumnActionsMenu.tsx
 import React from "react";
@@ -72,10 +72,10 @@ var ColumnActionsMenu = ({ model, modals }) => {
   }, t("column action sort ascending")), isCurrentColumnSorted && /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
     "data-testid": "column-clear-sort",
     onClick: () => model.sorting?.clearSort()
-  }, t("column action clear sorting")), model.getColumnCount() > 1 && /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
+  }, t("column action clear sorting")), model.getColumnCount() > 1 && model.features.schemaEditable && /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
     "data-testid": "column-delete",
     onClick: () => model.deleteColumn(state.fieldId)
-  }, t("column action delete")), /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
+  }, t("column action delete")), model.features.schemaEditable && /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
     "data-testid": "column-settings",
     onClick: () => modals.openColumnSettings()
   }, t("column action settings"))), /* @__PURE__ */ React.createElement(DropdownMenu.Arrow, null))));
@@ -83,13 +83,12 @@ var ColumnActionsMenu = ({ model, modals }) => {
 
 // packages/ui/react-ui-table/src/components/Table/ColumnSettings.tsx
 import React2, { useCallback, useEffect, useMemo, useState } from "react";
-import { getSpace } from "@dxos/react-client/echo";
 import { DropdownMenu as DropdownMenu2 } from "@dxos/react-ui";
 import { FieldEditor } from "@dxos/react-ui-form";
 var ColumnSettings = ({ model, modals, onNewColumn }) => {
   const [newField, setNewField] = useState();
   const state = modals.state.value;
-  const space = getSpace(model?.table);
+  const space = model?.space;
   useEffect(() => {
     if (state?.type === "columnSettings" && state.mode.type === "create" && model?.projection) {
       setNewField(model.projection.createFieldProjection());
@@ -107,12 +106,12 @@ var ColumnSettings = ({ model, modals, onNewColumn }) => {
     if (state?.type === "columnSettings") {
       const { mode } = state;
       if (mode.type === "edit") {
-        return model?.table?.view?.target?.fields.find((f) => f.id === mode.fieldId);
+        return model?.view?.fields.find((f) => f.id === mode.fieldId);
       }
     }
     return void 0;
   }, [
-    model?.table?.view?.target?.fields,
+    model?.view?.fields,
     state
   ]);
   const field = existingField ?? newField;
@@ -130,7 +129,7 @@ var ColumnSettings = ({ model, modals, onNewColumn }) => {
     state,
     newField
   ]);
-  if (!model?.table?.view?.target || !model.projection || !field) {
+  if (!model?.view || !model.projection || !field) {
     return null;
   }
   return /* @__PURE__ */ React2.createElement(DropdownMenu2.Root, {
@@ -141,7 +140,7 @@ var ColumnSettings = ({ model, modals, onNewColumn }) => {
   }), /* @__PURE__ */ React2.createElement(DropdownMenu2.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu2.Content, {
     classNames: "md:is-64"
   }, /* @__PURE__ */ React2.createElement(DropdownMenu2.Viewport, null, /* @__PURE__ */ React2.createElement(FieldEditor, {
-    view: model.table.view.target,
+    view: model.view,
     projection: model.projection,
     field,
     registry: space?.db.schemaRegistry,
@@ -153,13 +152,13 @@ var ColumnSettings = ({ model, modals, onNewColumn }) => {
 // packages/ui/react-ui-table/src/components/Table/CreateRefPanel.tsx
 import React3, { useCallback as useCallback2, useMemo as useMemo2 } from "react";
 import { S } from "@dxos/echo-schema";
-import { create, getSpace as getSpace2 } from "@dxos/react-client/echo";
+import { create } from "@dxos/react-client/echo";
 import { Popover } from "@dxos/react-ui";
 import { Form } from "@dxos/react-ui-form";
 import { useGridContext } from "@dxos/react-ui-grid";
 var CreateRefPanel = ({ model, modals, __gridScope }) => {
   const { id: gridId } = useGridContext("TableCellEditor", __gridScope);
-  const space = getSpace2(model?.table);
+  const space = model?.space;
   const state = modals.state.value;
   const schema = useMemo2(() => {
     if (!space || state?.type !== "createRefPanel") {
@@ -200,7 +199,7 @@ var CreateRefPanel = ({ model, modals, __gridScope }) => {
   }, [
     modals
   ]);
-  if (!model?.table?.view || !model.projection) {
+  if (!model?.view || !model.projection) {
     return null;
   }
   return /* @__PURE__ */ React3.createElement(Popover.Root, {
@@ -226,7 +225,6 @@ var CreateRefPanel = ({ model, modals, __gridScope }) => {
 
 // packages/ui/react-ui-table/src/components/Table/RefPanel.tsx
 import React4 from "react";
-import { getSpace as getSpace3 } from "@dxos/react-client/echo";
 import { Popover as Popover2 } from "@dxos/react-ui";
 import { Form as Form2 } from "@dxos/react-ui-form";
 var getRefTargetObj = (space, id) => {
@@ -238,10 +236,10 @@ var getRefTargetObj = (space, id) => {
 };
 var RefPanel = ({ model, modals }) => {
   const state = modals.state.value;
-  const space = getSpace3(model.table);
+  const space = model?.space;
   const targetObj = getRefTargetObj(space, state?.type === "refPanel" ? state.targetId : void 0);
   const schema = space && state?.type === "refPanel" ? space.db.schemaRegistry.getSchema(state.typename) : void 0;
-  if (!model.table?.view || !model.projection) {
+  if (!model.view || !model.projection) {
     return null;
   }
   return /* @__PURE__ */ React4.createElement(Popover2.Root, {
@@ -279,10 +277,17 @@ var RowActionsMenu = ({ model, modals }) => {
     onOpenChange: modals.close
   }, /* @__PURE__ */ React5.createElement(DropdownMenu3.VirtualTrigger, {
     virtualRef: modals.trigger
-  }), /* @__PURE__ */ React5.createElement(DropdownMenu3.Content, null, /* @__PURE__ */ React5.createElement(DropdownMenu3.Viewport, null, /* @__PURE__ */ React5.createElement(DropdownMenu3.Item, {
+  }), /* @__PURE__ */ React5.createElement(DropdownMenu3.Content, null, /* @__PURE__ */ React5.createElement(DropdownMenu3.Viewport, null, model.features.dataEditable !== false && /* @__PURE__ */ React5.createElement(DropdownMenu3.Item, {
     "data-testid": "row-menu-delete",
     onClick: () => model.deleteRow(state.rowIndex)
-  }, t(hasSelection ? "bulk delete row label" : "delete row label"))), /* @__PURE__ */ React5.createElement(DropdownMenu3.Arrow, null)));
+  }, t(hasSelection ? "bulk delete row label" : "delete row label")), model.rowActions?.map((action) => /* @__PURE__ */ React5.createElement(DropdownMenu3.Item, {
+    key: action.id,
+    "data-testid": `row-action-${action.id}`,
+    onClick: () => {
+      modals.close();
+      model.handleRowAction(action.id, state.rowIndex);
+    }
+  }, t(action.translationKey)))), /* @__PURE__ */ React5.createElement(DropdownMenu3.Arrow, null)));
 };
 
 // packages/ui/react-ui-table/src/model/table-model.ts
@@ -290,32 +295,84 @@ import { computed as computed3, effect as effect2, signal as signal3 } from "@pr
 import { Resource as Resource2 } from "@dxos/context";
 import { FormatEnum as FormatEnum3, getValue as getValue2, setValue } from "@dxos/echo-schema";
 import { invariant } from "@dxos/invariant";
-import { isReactiveObject, makeRef as makeRef2 } from "@dxos/live-object";
-import { PublicKey as PublicKey2 } from "@dxos/react-client";
+import { isReactiveObject, makeRef as makeRef3 } from "@dxos/live-object";
 import { formatForEditing, parseValue } from "@dxos/react-ui-form";
 
 // packages/ui/react-ui-table/src/model/selection-model.ts
 import { computed, effect, signal } from "@preact/signals-core";
 import { Resource } from "@dxos/context";
 
+// packages/ui/react-ui-table/src/util/dynamic-table.ts
+import { create as create2, makeRef } from "@dxos/live-object";
+import { createView, echoSchemaFromPropertyDefinitions, ViewProjection } from "@dxos/schema";
+var makeDynamicTable = (typename, properties) => {
+  const table = create2(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((field2) => field2.path === property.name);
+    if (field) {
+      if (property.size !== void 0) {
+        field.size = property.size;
+      }
+      if (property.title !== void 0) {
+        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
+  };
+};
+
 // packages/ui/react-ui-table/src/util/signals.ts
 var touch = (value) => value;
 
 // packages/ui/react-ui-table/src/util/table.ts
 import { AST, Format, FormatEnum, S as S2, TypedObject, TypeEnum } from "@dxos/echo-schema";
 import { PublicKey } from "@dxos/react-client";
-import { create as create2, makeRef } from "@dxos/react-client/echo";
-import { createFieldId, createView, getSchemaProperties, ViewProjection } from "@dxos/schema";
-var initializeTable = async ({ space, table, initialRow = true, initialSchema }) => {
-  if (initialSchema) {
-    const schema = await space.db.schemaRegistry.query({
-      typename: initialSchema
-    }).firstOrUndefined();
+import { create as create3, makeRef as makeRef2 } from "@dxos/react-client/echo";
+import { createFieldId, createView as createView2, getSchemaProperties, ViewProjection as ViewProjection2 } from "@dxos/schema";
+var initializeTable = async ({ client, space, table, typename, initialRow = true }) => {
+  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}`);
     }
     const fields = getSchemaProperties(schema.ast).filter((prop) => prop.format !== FormatEnum.Ref).map((prop) => prop.name);
-    table.view = makeRef(createView({
+    table.view = makeRef2(createView2({
       // TODO(ZaymonFC): Don't hardcode name?
       name: "View",
       typename: schema.typename,
@@ -324,68 +381,74 @@ var initializeTable = async ({ space, table, initialRow = true, initialSchema })
     }));
     return schema;
   } else {
-    const ContactSchema = TypedObject({
-      typename: `example.com/type/${PublicKey.random().truncate()}`,
-      version: "0.1.0"
-    })({
-      name: S2.optional(S2.String).annotations({
-        [AST.TitleAnnotationId]: "Name"
-      }),
-      active: S2.optional(S2.Boolean),
-      email: S2.optional(Format.Email),
-      salary: S2.optional(Format.Currency()).annotations({
-        [AST.TitleAnnotationId]: "Salary"
-      })
-    });
-    const [contactSchema] = await space.db.schemaRegistry.register([
+    const [schema] = await space.db.schemaRegistry.register([
       ContactSchema
     ]);
-    table.view = makeRef(createView({
+    const fields = ContactFields;
+    table.view = makeRef2(createView2({
       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",
-        size: 150
-      }
-    });
-    projection.setFieldProjection({
-      field: {
-        id: table.view.target.fields.find((f) => f.path === "active").id,
-        path: "active",
-        size: 100
-      }
-    });
-    projection.setFieldProjection({
-      field: {
-        id: createFieldId(),
-        path: "manager",
-        referencePath: "name"
-      },
-      props: {
-        property: "manager",
-        type: TypeEnum.Ref,
-        format: FormatEnum.Ref,
-        referenceSchema: contactSchema.typename,
-        title: "Manager"
-      }
-    });
+    createProjection(schema, table.view.target);
     if (initialRow) {
-      space.db.add(create2(contactSchema, {}));
+      space.db.add(create3(schema, {}));
     }
-    return contactSchema;
+    return schema;
   }
 };
+var ContactSchema = TypedObject({
+  typename: `example.com/type/${PublicKey.random().truncate()}`,
+  version: "0.1.0"
+})({
+  name: S2.optional(S2.String).annotations({
+    [AST.TitleAnnotationId]: "Name"
+  }),
+  active: S2.optional(S2.Boolean),
+  email: S2.optional(Format.Email),
+  salary: S2.optional(Format.Currency()).annotations({
+    [AST.TitleAnnotationId]: "Salary"
+  })
+});
+var ContactFields = [
+  "name",
+  "email",
+  "salary",
+  "active"
+];
+var createProjection = (schema, view) => {
+  const projection = new ViewProjection2(schema, view);
+  projection.setFieldProjection({
+    field: {
+      id: view.fields.find((f) => f.path === "salary").id,
+      path: "salary",
+      size: 150
+    }
+  });
+  projection.setFieldProjection({
+    field: {
+      id: view.fields.find((f) => f.path === "active").id,
+      path: "active",
+      size: 100
+    }
+  });
+  projection.setFieldProjection({
+    field: {
+      id: createFieldId(),
+      path: "manager",
+      referencePath: "name"
+    },
+    props: {
+      property: "manager",
+      type: TypeEnum.Ref,
+      format: FormatEnum.Ref,
+      referenceSchema: schema.typename,
+      title: "Manager"
+    }
+  });
+  return projection;
+};
 
 // packages/ui/react-ui-table/src/util/table-buttons.ts
 var BUTTON_IDENTIFIERS = {
@@ -804,13 +867,17 @@ var TableSorting = class {
 
 // packages/ui/react-ui-table/src/model/table-model.ts
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/table-model.ts";
+var defaultFeatures = {
+  selection: true,
+  dataEditable: false,
+  schemaEditable: false
+};
 var TableModel = class extends Resource2 {
-  constructor({ table, projection, sorting = [], pinnedRows = {
+  constructor({ id, space, view, projection, features = {}, sorting = [], pinnedRows = {
     top: [],
     bottom: []
-  }, onCellUpdate, onDeleteColumn, onDeleteRows, onInsertRow, onRowOrderChanged }) {
+  }, onCellUpdate, onDeleteColumn, onDeleteRows, onInsertRow, onRowOrderChanged, rowActions = [], onRowAction }) {
     super();
-    this.id = `table-model-${PublicKey2.random().truncate()}`;
     this._visibleRange = signal3({
       start: {
         row: 0,
@@ -829,7 +896,7 @@ var TableModel = class extends Resource2 {
       this._rows.value = obj;
     };
     this.getRowCount = () => this._rows.value.length;
-    this.getColumnCount = () => this.table.view?.target?.fields.length ?? 0;
+    this.getColumnCount = () => this._view?.fields.length ?? 0;
     this.insertRow = (rowIndex) => {
       const row = rowIndex !== void 0 ? this._sorting.getDataIndex(rowIndex) : this._rows.value.length;
       this._onInsertRow?.(row);
@@ -846,8 +913,18 @@ var TableModel = class extends Resource2 {
       }
       this._onDeleteRows?.(row, objectsToDelete);
     };
+    this.handleRowAction = (actionId, rowIndex) => {
+      if (!this._onRowAction) {
+        return;
+      }
+      const row = this._sorting.getDataIndex(rowIndex);
+      const data = this._rows.value[row];
+      if (data) {
+        this._onRowAction(actionId, data);
+      }
+    };
     this.getCellData = ({ col, row }) => {
-      const fields = this.table.view?.target?.fields ?? [];
+      const fields = this._view?.fields ?? [];
       if (col < 0 || col >= fields.length) {
         return void 0;
       }
@@ -876,7 +953,7 @@ var TableModel = class extends Resource2 {
     };
     this.setCellData = ({ col, row }, value) => {
       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;
       }
@@ -885,7 +962,7 @@ var TableModel = class extends Resource2 {
       switch (props.format) {
         case FormatEnum3.Ref: {
           if (isReactiveObject(value)) {
-            setValue(this._rows.value[rowIdx], field.path, makeRef2(value));
+            setValue(this._rows.value[rowIdx], field.path, makeRef3(value));
           }
           break;
         }
@@ -899,9 +976,15 @@ var TableModel = class extends Resource2 {
         }
       }
     };
-    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;
       this._sorting.setSort(sort.fieldId, sort.direction);
@@ -912,9 +995,17 @@ var TableModel = class extends Resource2 {
     this._onDeleteColumn = onDeleteColumn;
     this._onCellUpdate = onCellUpdate;
     this._onRowOrderChanged = onRowOrderChanged;
+    this._rowActions = rowActions;
+    this._onRowAction = onRowAction;
+  }
+  get id() {
+    return this._id;
   }
-  get table() {
-    return this._table;
+  get space() {
+    return this._space;
+  }
+  get view() {
+    return this._view;
   }
   get projection() {
     return this._projection;
@@ -922,19 +1013,31 @@ var TableModel = class extends Resource2 {
   get rows() {
     return this._sorting.sortedRows;
   }
+  get features() {
+    return this._features;
+  }
   /**
   * @reactive
   */
   get sorting() {
     return this._sorting;
   }
+  /**
+  * Gets the row data at the specified display index.
+  */
+  getRowAt(displayIndex) {
+    if (displayIndex < 0 || displayIndex >= this._sorting.sortedRows.value.length) {
+      return void 0;
+    }
+    return this._sorting.sortedRows.value[displayIndex];
+  }
   get pinnedRows() {
     return this._pinnedRows;
   }
   get columnMeta() {
     invariant(this._columnMeta, void 0, {
       F: __dxlog_file,
-      L: 117,
+      L: 176,
       S: this,
       A: [
         "this._columnMeta",
@@ -950,6 +1053,9 @@ var TableModel = class extends Resource2 {
   get isViewDirty() {
     return this._sorting.isDirty;
   }
+  get rowActions() {
+    return this._rowActions;
+  }
   //
   // Initialisation
   //
@@ -961,7 +1067,7 @@ var TableModel = class extends Resource2 {
   }
   initializeColumnMeta() {
     this._columnMeta = computed3(() => {
-      const fields = this._table.view?.target?.fields ?? [];
+      const fields = this._view?.fields ?? [];
       const meta = Object.fromEntries(fields.map((field, index) => [
         index,
         {
@@ -998,7 +1104,7 @@ var TableModel = class extends Resource2 {
       for (let row = start.row; row <= end.row; row++) {
         rowEffects.push(effect2(() => {
           const obj = this._sorting.sortedRows.value[row];
-          this?._table?.view?.target?.fields.forEach((field) => touch(getValue2(obj, field.path)));
+          this._view?.fields.forEach((field) => touch(getValue2(obj, field.path)));
           this._onCellUpdate?.({
             row,
             col: start.col,
@@ -1017,7 +1123,7 @@ var TableModel = class extends Resource2 {
   */
   updateCellData({ col, row }, update) {
     const dataRow = this._sorting.getDataIndex(row);
-    const fields = this.table.view?.target?.fields ?? [];
+    const fields = this._view?.fields ?? [];
     const field = fields[col];
     const value = getValue2(this._rows.value[dataRow], field.path);
     const updatedValue = update(value);
@@ -1027,10 +1133,10 @@ var TableModel = class extends Resource2 {
   // Column Operations
   //
   deleteColumn(fieldId) {
-    if (!this.table.view) {
+    if (!this._view) {
       return;
     }
-    const field = this.table.view.target?.fields.find((field2) => field2.id === fieldId);
+    const field = this._view?.fields.find((field2) => field2.id === fieldId);
     if (field && this._onDeleteColumn) {
       this._onDeleteColumn(field.id);
     }
@@ -1039,7 +1145,7 @@ var TableModel = class extends Resource2 {
   // Resize
   //
   setColumnWidth(columnIndex, width) {
-    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];
@@ -1177,27 +1283,40 @@ var TablePresentation = class {
     this._visibleRange = _visibleRange;
   }
   getCells(range, plane) {
+    let cells;
     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;
   }
   getMainGridCells(range) {
     const cells = {};
-    const fields = this.model.table.view?.target?.fields ?? [];
+    const fields = this.model.view?.fields ?? [];
     const addCell = (obj, field, colIndex, displayIndex) => {
       const { props } = this.model.projection.getFieldProjection(field.id);
       const cell = {
@@ -1289,7 +1408,7 @@ var TablePresentation = class {
   }
   getHeaderCells(range) {
     const cells = {};
-    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;
@@ -1378,9 +1497,9 @@ var TablePresentation = class {
         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
+        }) : void 0,
         className: "!bg-gridHeader",
         readonly: true,
         value: ""
@@ -1606,22 +1725,24 @@ var determineNavigationDelta = ({ key, shift }) => {
 var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/Table/Table.tsx";
 var inlineEndLine = "[&>.dx-grid]:relative [&>.dx-grid]:after:absolute [&>.dx-grid]:after:inset-block-0 [&>.dx-grid]:after:-inline-end-px [&>.dx-grid]:after:is-px [&>.dx-grid]:after:bg-separator";
 var blockEndLine = "[&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-inline-0 [&>.dx-grid]:before:-block-end-px [&>.dx-grid]:before:bs-px [&>.dx-grid]:before:bg-separator";
-var frozen = {
-  frozenRowsStart: 1,
-  frozenColsStart: 1,
-  frozenColsEnd: 1
-};
 var TableRoot = ({ children, role }) => {
   return /* @__PURE__ */ React7.createElement("div", {
     role: "none",
     className: mx2("relative border-bs !border-separator", role === "section" ? "attention-surface overflow-hidden [&_.dx-grid]:max-is-[--dx-grid-content-inline-size]" : "flex flex-col [&_.dx-grid]:grow [&_.dx-grid]:max-is-[--dx-grid-content-inline-size] [&_.dx-grid]:bs-0 [&_.dx-grid]:max-bs-[--dx-grid-content-block-size]")
   }, children);
 };
-var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttention }, forwardedRef) => {
+var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttention, onRowClicked }, forwardedRef) => {
   const [dxGrid, setDxGrid] = useState2(null);
-  const { hasAttention } = useAttention(model?.table ? fullyQualifiedId(model.table) : "table");
+  const { hasAttention } = useAttention(model?.id ?? "table");
   const { t } = useTranslation3(translationKey);
   const modals = useMemo4(() => new ModalController(), []);
+  const frozen = useMemo4(() => ({
+    frozenRowsStart: 1,
+    frozenColsStart: model?.features.selection ? 1 : 0,
+    frozenColsEnd: 1
+  }), [
+    model
+  ]);
   useImperativeHandle(forwardedRef, () => {
     if (!presentation || !dxGrid) {
       return {};
@@ -1642,6 +1763,13 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     dxGrid
   ]);
   const handleGridClick = useCallback4((event) => {
+    if (onRowClicked) {
+      const rowIndex = safeParseInt(event.target.ariaRowIndex ?? "");
+      if (rowIndex != null) {
+        const row = model?.getRowAt(rowIndex);
+        row && onRowClicked(row);
+      }
+    }
     if (!modals) {
       return;
     }
@@ -1718,6 +1846,9 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     dxGrid
   ]);
   const handleEnter = useCallback4((cell) => {
+    if (!model?.features.dataEditable) {
+      return;
+    }
     if (model && cell.row === model.getRowCount() - 1) {
       model.insertRow(cell.row);
       if (dxGrid) {
@@ -1732,6 +1863,9 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     dxGrid
   ]);
   const handleKeyDown = useCallback4((event) => {
+    if (!model?.features.dataEditable) {
+      return;
+    }
     const cell = closestCell(event.target);
     if (!model || !cell) {
       return;
@@ -1773,10 +1907,10 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
   ]);
   const handleQuery = useCallback4(async ({ field, props }, text) => {
     if (model && props.referenceSchema && field.referencePath) {
-      const space = getSpace4(model.table);
+      const space = model.space;
       invariant3(space, void 0, {
         F: __dxlog_file4,
-        L: 264,
+        L: 284,
         S: void 0,
         A: [
           "space",
@@ -1809,7 +1943,8 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     }
     return [];
   }, [
-    model
+    model,
+    t
   ]);
   if (!model || !modals) {
     return /* @__PURE__ */ React7.createElement("span", {
@@ -1818,7 +1953,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     });
   }
   return /* @__PURE__ */ React7.createElement(Grid.Root, {
-    id: model.table.id ?? "table-grid"
+    id: model.id ?? "table-grid"
   }, /* @__PURE__ */ React7.createElement(TableCellEditor, {
     model,
     modals,
@@ -1831,7 +1966,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     frozen,
     columns: model.columnMeta.value,
     limitRows: model.getRowCount() ?? 0,
-    limitColumns: model.table.view?.target?.fields?.length ?? 0,
+    limitColumns: model.view?.fields?.length ?? 0,
     onAxisResize: handleAxisResize,
     onClick: handleGridClick,
     onKeyDown: handleKeyDown,
@@ -1860,9 +1995,134 @@ var Table = {
   Main: TableMain
 };
 
+// packages/ui/react-ui-table/src/components/Table/DynamicTable.tsx
+import React8, { useRef as useRef2, useMemo as useMemo5, useCallback as useCallback5 } from "react";
+import { mx as mx3 } from "@dxos/react-ui-theme";
+
+// packages/ui/react-ui-table/src/hooks/useTableModel.ts
+import { effect as effect3 } from "@preact/signals-core";
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { fullyQualifiedId, getSpace } from "@dxos/react-client/echo";
+import { useSelectionActions } from "@dxos/react-ui-attention";
+import { isNonNullable } from "@dxos/util";
+var useTableModel = ({ objects, table, projection, features, onSelectionChanged, rowActions, onRowAction, ...props }) => {
+  const [model, setModel] = useState3();
+  useEffect2(() => {
+    if (!table || !projection) {
+      return;
+    }
+    let model2;
+    const t = setTimeout(async () => {
+      model2 = new TableModel({
+        id: fullyQualifiedId(table),
+        space: getSpace(table),
+        view: table.view?.target,
+        projection,
+        features,
+        rowActions,
+        onRowAction,
+        ...props
+      });
+      await model2.open();
+      setModel(model2);
+    });
+    return () => {
+      clearTimeout(t);
+      void model2?.close();
+    };
+  }, [
+    table,
+    projection,
+    table?.view?.target,
+    features,
+    rowActions
+  ]);
+  useEffect2(() => {
+    if (objects) {
+      model?.setRows(objects);
+    }
+  }, [
+    model,
+    objects
+  ]);
+  const { select, clear } = useSelectionActions([
+    table?.id,
+    table?.view?.target?.query.typename
+  ].filter(isNonNullable));
+  useEffect2(() => {
+    if (!model) {
+      return;
+    }
+    const unsubscribe = effect3(() => {
+      const selectedItems = [
+        ...model.selection.selection.value
+      ];
+      select(selectedItems);
+      onSelectionChanged?.(selectedItems);
+    });
+    return () => {
+      clear();
+      unsubscribe();
+    };
+  }, [
+    model,
+    onSelectionChanged
+  ]);
+  return model;
+};
+
+// packages/ui/react-ui-table/src/components/Table/DynamicTable.tsx
+var DynamicTable = ({ data, properties, classNames, tableName = "com.example/dynamic_table", onRowClicked, rowActions, onRowAction }) => {
+  const { table, viewProjection } = useMemo5(() => {
+    return makeDynamicTable(tableName, properties);
+  }, [
+    tableName,
+    properties
+  ]);
+  const tableRef = useRef2(null);
+  const handleCellUpdate = useCallback5((cell) => {
+    tableRef.current?.update?.(cell);
+  }, []);
+  const handleRowOrderChanged = useCallback5(() => {
+    tableRef.current?.update?.();
+  }, []);
+  const features = useMemo5(() => ({
+    selection: false,
+    dataEditable: false
+  }), []);
+  const model = useTableModel({
+    table,
+    objects: data,
+    projection: viewProjection,
+    features,
+    onCellUpdate: handleCellUpdate,
+    onRowOrderChanged: handleRowOrderChanged,
+    rowActions,
+    onRowAction
+  });
+  const presentation = useMemo5(() => {
+    if (model) {
+      return new TablePresentation(model);
+    }
+  }, [
+    model
+  ]);
+  return /* @__PURE__ */ React8.createElement("div", {
+    className: mx3("is-full bs-full grow grid", classNames)
+  }, /* @__PURE__ */ React8.createElement("div", {
+    className: "grid min-bs-0 overflow-hidden"
+  }, /* @__PURE__ */ React8.createElement(Table.Root, null, /* @__PURE__ */ React8.createElement(Table.Main, {
+    ref: tableRef,
+    model,
+    presentation,
+    onRowClicked,
+    ignoreAttention: true
+  }))));
+};
+
 // packages/ui/react-ui-table/src/components/TableToolbar/TableToolbar.tsx
-import React8, { useCallback as useCallback5, useMemo as useMemo5 } from "react";
-import { create as create3 } from "@dxos/live-object";
+import React9, { useCallback as useCallback6, useMemo as useMemo6 } from "react";
+import { create as create4 } from "@dxos/live-object";
 import { createGapSeparator, createMenuAction, MenuProvider, ToolbarMenu, useMenuActions } from "@dxos/react-ui-menu";
 var createTableToolbarActions = (state) => {
   const add = createMenuAction("add-row", {
@@ -1916,84 +2176,25 @@ var createTableToolbarActions = (state) => {
   };
 };
 var TableToolbar = ({ classNames, viewDirty, attendableId, onAction }) => {
-  const state = useMemo5(() => create3({
+  const state = useMemo6(() => create4({
     viewDirty
   }), []);
-  const actionsCreator = useCallback5(() => createTableToolbarActions(state), [
+  const actionsCreator = useCallback6(() => createTableToolbarActions(state), [
     state
   ]);
   const menu = useMenuActions(actionsCreator);
-  return /* @__PURE__ */ React8.createElement(MenuProvider, {
+  return /* @__PURE__ */ React9.createElement(MenuProvider, {
     ...menu,
     attendableId,
     onAction
-  }, /* @__PURE__ */ React8.createElement(ToolbarMenu, {
+  }, /* @__PURE__ */ React9.createElement(ToolbarMenu, {
     classNames
   }));
 };
-
-// packages/ui/react-ui-table/src/hooks/useTableModel.ts
-import { effect as effect3 } from "@preact/signals-core";
-import { useEffect as useEffect2, useState as useState3 } from "react";
-import { useSelectionActions } from "@dxos/react-ui-attention";
-import { isNonNullable } from "@dxos/util";
-var useTableModel = ({ objects, table, projection, ...props }) => {
-  const [model, setModel] = useState3();
-  useEffect2(() => {
-    if (!table || !projection) {
-      return;
-    }
-    let model2;
-    const t = setTimeout(async () => {
-      model2 = new TableModel({
-        table,
-        projection,
-        ...props
-      });
-      await model2.open();
-      setModel(model2);
-    });
-    return () => {
-      clearTimeout(t);
-      void model2?.close();
-    };
-  }, [
-    table,
-    projection
-  ]);
-  useEffect2(() => {
-    if (objects) {
-      model?.setRows(objects);
-    }
-  }, [
-    model,
-    objects
-  ]);
-  const { select, clear } = useSelectionActions([
-    table?.id,
-    table?.view?.target?.query.typename
-  ].filter(isNonNullable));
-  useEffect2(() => {
-    if (!model) {
-      return;
-    }
-    const unsubscribe = effect3(() => {
-      select([
-        ...model.selection.selection.value
-      ]);
-    });
-    return () => {
-      clear();
-      unsubscribe();
-    };
-  }, [
-    model
-  ]);
-  return model;
-};
 export {
   BUTTON_IDENTIFIERS,
   CONTROL_IDENTIFIERS,
+  DynamicTable,
   ModalController,
   Table,
   TableModel,
@@ -2002,6 +2203,7 @@ export {
   TableToolbar,
   TableType,
   initializeTable,
+  makeDynamicTable,
   renderCheckbox,
   renderSwitch,
   tableButtons,