@dxos/react-ui-table 0.8.1-staging.391c573 → 0.8.1-staging.9eaf14f

package/dist/lib/node/index.cjs

@@ -30,16 +30,20 @@ var node_exports = {};
 __export(node_exports, {
   BUTTON_IDENTIFIERS: () => BUTTON_IDENTIFIERS,
   CONTROL_IDENTIFIERS: () => CONTROL_IDENTIFIERS,
+  CheckboxStory: () => CheckboxStory,
+  DynamicTable: () => DynamicTable,
   ModalController: () => ModalController,
+  SwitchStory: () => SwitchStory,
   Table: () => Table,
   TableModel: () => TableModel,
   TablePresentation: () => TablePresentation,
-  TableSchema: () => import_chunk_NB3SFHGA.TableSchema,
+  TableSchema: () => import_chunk_TGG6OZ54.TableSchema,
   TableToolbar: () => TableToolbar,
-  TableType: () => import_chunk_NB3SFHGA.TableType,
+  TableType: () => import_chunk_TGG6OZ54.TableType,
+  cellClassesForRowSelection: () => cellClassesForRowSelection,
+  getBaseSchems: () => getBaseSchems,
   initializeTable: () => initializeTable,
-  renderCheckbox: () => renderCheckbox,
-  renderSwitch: () => renderSwitch,
+  makeDynamicTable: () => makeDynamicTable,
   tableButtons: () => tableButtons,
   tableControls: () => tableControls,
   touch: () => touch,
@@ -47,7 +51,7 @@ __export(node_exports, {
   useTableModel: () => useTableModel
 });
 module.exports = __toCommonJS(node_exports);
-var import_chunk_NB3SFHGA = require("./chunk-NB3SFHGA.cjs");
+var import_chunk_TGG6OZ54 = require("./chunk-TGG6OZ54.cjs");
 var import_react = __toESM(require("react"));
 var import_echo_schema = require("@dxos/echo-schema");
 var import_invariant = require("@dxos/invariant");
@@ -60,17 +64,15 @@ var import_util = require("@dxos/util");
 var import_react2 = __toESM(require("react"));
 var import_react_ui2 = require("@dxos/react-ui");
 var import_react3 = __toESM(require("react"));
-var import_echo2 = require("@dxos/react-client/echo");
 var import_react_ui3 = require("@dxos/react-ui");
 var import_react_ui_form = require("@dxos/react-ui-form");
 var import_react4 = __toESM(require("react"));
 var import_echo_schema2 = require("@dxos/echo-schema");
-var import_echo3 = require("@dxos/react-client/echo");
+var import_echo2 = require("@dxos/react-client/echo");
 var import_react_ui4 = require("@dxos/react-ui");
 var import_react_ui_form2 = require("@dxos/react-ui-form");
 var import_react_ui_grid2 = require("@dxos/react-ui-grid");
 var import_react5 = __toESM(require("react"));
-var import_echo4 = require("@dxos/react-client/echo");
 var import_react_ui5 = require("@dxos/react-ui");
 var import_react_ui_form3 = require("@dxos/react-ui-form");
 var import_react6 = __toESM(require("react"));
@@ -80,14 +82,15 @@ var import_context = require("@dxos/context");
 var import_echo_schema3 = require("@dxos/echo-schema");
 var import_invariant2 = require("@dxos/invariant");
 var import_live_object = require("@dxos/live-object");
-var import_react_client = require("@dxos/react-client");
 var import_react_ui_form4 = require("@dxos/react-ui-form");
 var import_signals_core2 = require("@preact/signals-core");
 var import_context2 = require("@dxos/context");
-var import_echo_schema4 = require("@dxos/echo-schema");
-var import_react_client2 = require("@dxos/react-client");
-var import_echo5 = require("@dxos/react-client/echo");
+var import_live_object2 = require("@dxos/live-object");
 var import_schema = require("@dxos/schema");
+var import_echo_schema4 = require("@dxos/echo-schema");
+var import_react_client = require("@dxos/react-client");
+var import_echo3 = require("@dxos/react-client/echo");
+var import_schema2 = require("@dxos/schema");
 var import_signals_core3 = require("@preact/signals-core");
 var import_lodash = __toESM(require("lodash.orderby"));
 var import_echo_schema5 = require("@dxos/echo-schema");
@@ -99,20 +102,27 @@ var import_echo_schema6 = require("@dxos/echo-schema");
 var import_react_ui_form6 = require("@dxos/react-ui-form");
 var import_react_ui_grid3 = require("@dxos/react-ui-grid");
 var import_react_ui_theme2 = require("@dxos/react-ui-theme");
-var import_schema2 = require("@dxos/schema");
+var import_schema3 = require("@dxos/schema");
 var import_react7 = __toESM(require("react"));
 var import_echo_schema7 = require("@dxos/echo-schema");
 var import_invariant3 = require("@dxos/invariant");
+var import_react_ui7 = require("@dxos/react-ui");
+var import_react_ui_editor = require("@dxos/react-ui-editor");
 var import_react_ui_grid4 = require("@dxos/react-ui-grid");
+var import_react_ui_tag_picker = require("@dxos/react-ui-tag-picker");
 var import_autocomplete = require("@codemirror/autocomplete");
 var import_view = require("@codemirror/view");
 var import_react8 = __toESM(require("react"));
-var import_live_object2 = require("@dxos/live-object");
-var import_react_ui_menu = require("@dxos/react-ui-menu");
+var import_react_ui8 = require("@dxos/react-ui");
+var import_react_ui_theme3 = require("@dxos/react-ui-theme");
 var import_signals_core6 = require("@preact/signals-core");
 var import_react9 = require("react");
+var import_echo4 = require("@dxos/react-client/echo");
 var import_react_ui_attention2 = require("@dxos/react-ui-attention");
 var import_util2 = require("@dxos/util");
+var import_react10 = __toESM(require("react"));
+var import_live_object3 = require("@dxos/live-object");
+var import_react_ui_menu = require("@dxos/react-ui-menu");
 var translationKey = "table";
 var translations_default = [
   {
@@ -166,10 +176,10 @@ var ColumnActionsMenu = ({ model, modals }) => {
   }, t("column action sort ascending")), isCurrentColumnSorted && /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
     "data-testid": "column-clear-sort",
     onClick: () => model.sorting?.clearSort()
-  }, t("column action clear sorting")), model.getColumnCount() > 1 && /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
+  }, t("column action clear sorting")), model.getColumnCount() > 1 && model.features.schemaEditable && /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
     "data-testid": "column-delete",
     onClick: () => model.deleteColumn(state.fieldId)
-  }, t("column action delete")), /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
+  }, t("column action delete")), model.features.schemaEditable && /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
     "data-testid": "column-settings",
     onClick: () => modals.openColumnSettings()
   }, t("column action settings"))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Arrow, null))));
@@ -177,7 +187,7 @@ var ColumnActionsMenu = ({ model, modals }) => {
 var ColumnSettings = ({ model, modals, onNewColumn }) => {
   const [newField, setNewField] = (0, import_react3.useState)();
   const state = modals.state.value;
-  const space = (0, import_echo2.getSpace)(model?.table);
+  const space = model?.space;
   (0, import_react3.useEffect)(() => {
     if (state?.type === "columnSettings" && state.mode.type === "create" && model?.projection) {
       setNewField(model.projection.createFieldProjection());
@@ -195,12 +205,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;
@@ -218,7 +228,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__ */ import_react3.default.createElement(import_react_ui3.DropdownMenu.Root, {
@@ -229,7 +239,7 @@ var ColumnSettings = ({ model, modals, onNewColumn }) => {
   }), /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.DropdownMenu.Portal, null, /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.DropdownMenu.Content, {
     classNames: "md:is-64"
   }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.DropdownMenu.Viewport, null, /* @__PURE__ */ import_react3.default.createElement(import_react_ui_form.FieldEditor, {
-    view: model.table.view.target,
+    view: model.view,
     projection: model.projection,
     field,
     registry: space?.db.schemaRegistry,
@@ -239,7 +249,7 @@ var ColumnSettings = ({ model, modals, onNewColumn }) => {
 };
 var CreateRefPanel = ({ model, modals, __gridScope }) => {
   const { id: gridId } = (0, import_react_ui_grid2.useGridContext)("TableCellEditor", __gridScope);
-  const space = (0, import_echo3.getSpace)(model?.table);
+  const space = model?.space;
   const state = modals.state.value;
   const schema = (0, import_react4.useMemo)(() => {
     if (!space || state?.type !== "createRefPanel") {
@@ -264,7 +274,7 @@ var CreateRefPanel = ({ model, modals, __gridScope }) => {
       typename: state.typename
     }).runSync();
     if (schema2) {
-      const obj = space.db.add((0, import_echo3.create)(schema2, values));
+      const obj = space.db.add((0, import_echo2.create)(schema2, values));
       state.onCreate?.(obj);
     }
     void modals.close();
@@ -280,7 +290,7 @@ var CreateRefPanel = ({ model, modals, __gridScope }) => {
   }, [
     modals
   ]);
-  if (!model?.table?.view || !model.projection) {
+  if (!model?.view || !model.projection) {
     return null;
   }
   return /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Popover.Root, {
@@ -312,10 +322,10 @@ var getRefTargetObj = (space, id) => {
 };
 var RefPanel = ({ model, modals }) => {
   const state = modals.state.value;
-  const space = (0, import_echo4.getSpace)(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__ */ import_react5.default.createElement(import_react_ui5.Popover.Root, {
@@ -349,22 +359,99 @@ var RowActionsMenu = ({ model, modals }) => {
     onOpenChange: modals.close
   }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.VirtualTrigger, {
     virtualRef: modals.trigger
-  }), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Content, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Viewport, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Item, {
+  }), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Content, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Viewport, null, model.features.dataEditable !== false && /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Item, {
     "data-testid": "row-menu-delete",
     onClick: () => model.deleteRow(state.rowIndex)
-  }, t(hasSelection ? "bulk delete row label" : "delete row label"))), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Arrow, null)));
+  }, t(hasSelection ? "bulk delete row label" : "delete row label")), model.rowActions?.map((action) => /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Item, {
+    key: action.id,
+    "data-testid": `row-action-${action.id}`,
+    onClick: () => {
+      modals.close();
+      model.handleRowAction(action.id, state.rowIndex);
+    }
+  }, t(action.translationKey)))), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Arrow, null)));
+};
+var getBaseSchems = ({ typename, properties, jsonSchema, schema }) => {
+  if (typename && properties) {
+    const schema2 = (0, import_schema.getSchemaFromPropertyDefinitions)(typename, properties);
+    return {
+      typename: schema2.typename,
+      jsonSchema: schema2.jsonSchema
+    };
+  } else if (schema) {
+    return {
+      typename: schema.typename,
+      jsonSchema: schema.jsonSchema
+    };
+  } else if (typename && jsonSchema) {
+    return {
+      typename,
+      jsonSchema
+    };
+  } else {
+    throw new Error("invalid properties");
+  }
+};
+var makeDynamicTable = ({ typename, jsonSchema, properties }) => {
+  const view = (0, import_schema.createView)({
+    name: "dynamic-table",
+    typename,
+    jsonSchema,
+    ...properties && {
+      fields: properties.map((property) => property.name)
+    }
+  });
+  const table = (0, import_live_object2.create)(import_chunk_TGG6OZ54.TableType, {
+    name: "dynamic-table",
+    view: (0, import_live_object2.makeRef)(view)
+  });
+  const projection = new import_schema.ViewProjection(jsonSchema, view);
+  if (properties && view.fields) {
+    setProperties(view, projection, properties);
+  }
+  return {
+    table,
+    projection
+  };
+};
+var setProperties = (view, projection, properties) => {
+  for (const property of properties) {
+    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 = projection.getFieldProjection(field.id);
+        projection.setFieldProjection({
+          ...fieldProjection,
+          props: {
+            ...fieldProjection.props,
+            title: property.title
+          }
+        });
+      }
+      if (property.sort) {
+        const fieldId = field.id;
+        view.query.sort = [
+          {
+            fieldId,
+            direction: property.sort
+          }
+        ];
+      }
+    }
+  }
 };
 var touch = (value) => value;
-var initializeTable = async ({ space, table, initialRow = true, initialSchema }) => {
-  if (initialSchema) {
-    const schema = await space.db.schemaRegistry.query({
-      typename: initialSchema
-    }).firstOrUndefined();
+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 = (0, import_schema.getSchemaProperties)(schema.ast).filter((prop) => prop.format !== import_echo_schema4.FormatEnum.Ref).map((prop) => prop.name);
-    table.view = (0, import_echo5.makeRef)((0, import_schema.createView)({
+    const fields = (0, import_schema2.getSchemaProperties)(schema.ast).filter((prop) => prop.format !== import_echo_schema4.FormatEnum.Ref).map((prop) => prop.name);
+    table.view = (0, import_echo3.makeRef)((0, import_schema2.createView)({
       // TODO(ZaymonFC): Don't hardcode name?
       name: "View",
       typename: schema.typename,
@@ -373,68 +460,74 @@ var initializeTable = async ({ space, table, initialRow = true, initialSchema })
     }));
     return schema;
   } else {
-    const ContactSchema = (0, import_echo_schema4.TypedObject)({
-      typename: `example.com/type/${import_react_client2.PublicKey.random().truncate()}`,
-      version: "0.1.0"
-    })({
-      name: import_echo_schema4.S.optional(import_echo_schema4.S.String).annotations({
-        [import_echo_schema4.AST.TitleAnnotationId]: "Name"
-      }),
-      active: import_echo_schema4.S.optional(import_echo_schema4.S.Boolean),
-      email: import_echo_schema4.S.optional(import_echo_schema4.Format.Email),
-      salary: import_echo_schema4.S.optional(import_echo_schema4.Format.Currency()).annotations({
-        [import_echo_schema4.AST.TitleAnnotationId]: "Salary"
-      })
-    });
-    const [contactSchema] = await space.db.schemaRegistry.register([
+    const [schema] = await space.db.schemaRegistry.register([
       ContactSchema
     ]);
-    table.view = (0, import_echo5.makeRef)((0, import_schema.createView)({
+    const fields = ContactFields;
+    table.view = (0, import_echo3.makeRef)((0, import_schema2.createView)({
       name: "View",
-      typename: contactSchema.typename,
-      jsonSchema: contactSchema.jsonSchema,
-      fields: [
-        "name",
-        "email",
-        "salary",
-        "active"
-      ]
+      typename: schema.typename,
+      jsonSchema: schema.jsonSchema,
+      fields
     }));
-    const projection = new import_schema.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: (0, import_schema.createFieldId)(),
-        path: "manager",
-        referencePath: "name"
-      },
-      props: {
-        property: "manager",
-        type: import_echo_schema4.TypeEnum.Ref,
-        format: import_echo_schema4.FormatEnum.Ref,
-        referenceSchema: contactSchema.typename,
-        title: "Manager"
-      }
-    });
+    createProjection(schema, table.view.target);
     if (initialRow) {
-      space.db.add((0, import_echo5.create)(contactSchema, {}));
+      space.db.add((0, import_echo3.create)(schema, {}));
     }
-    return contactSchema;
+    return schema;
   }
 };
+var ContactSchema = (0, import_echo_schema4.TypedObject)({
+  typename: `example.com/type/${import_react_client.PublicKey.random().truncate()}`,
+  version: "0.1.0"
+})({
+  name: import_echo_schema4.S.optional(import_echo_schema4.S.String).annotations({
+    [import_echo_schema4.AST.TitleAnnotationId]: "Name"
+  }),
+  active: import_echo_schema4.S.optional(import_echo_schema4.S.Boolean),
+  email: import_echo_schema4.S.optional(import_echo_schema4.Format.Email),
+  salary: import_echo_schema4.S.optional(import_echo_schema4.Format.Currency()).annotations({
+    [import_echo_schema4.AST.TitleAnnotationId]: "Salary"
+  })
+});
+var ContactFields = [
+  "name",
+  "email",
+  "salary",
+  "active"
+];
+var createProjection = (schema, view) => {
+  const projection = new import_schema2.ViewProjection(schema.jsonSchema, 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: (0, import_schema2.createFieldId)(),
+      path: "manager",
+      referencePath: "name"
+    },
+    props: {
+      property: "manager",
+      type: import_echo_schema4.TypeEnum.Ref,
+      format: import_echo_schema4.FormatEnum.Ref,
+      referenceSchema: schema.typename,
+      title: "Manager"
+    }
+  });
+  return projection;
+};
 var BUTTON_IDENTIFIERS = {
   columnSettings: "data-table-column-settings-button",
   newColumn: "data-table-new-column-button",
@@ -563,7 +656,7 @@ var renderAttributes = (data) => {
 var renderInput = (baseClass, attrs, checked = false, disabled = false, preventToggle = false, testId) => {
   return `<input type="checkbox" class="${baseClass}" ${renderAttributes(attrs)} ${checked ? "checked" : ""} ${preventToggle ? 'onclick="return false"' : ""} ${disabled ? "disabled" : ""} data-testid="${testId}"/>`;
 };
-var renderCheckbox = ({ rowIndex, header = false, checked = false, disabled = false }) => {
+var CheckboxStory = ({ rowIndex, header = false, checked = false, disabled = false }) => {
   const attrs = {
     [CONTROL_IDENTIFIERS.checkbox]: "",
     "data-row-index": rowIndex.toString(),
@@ -573,7 +666,7 @@ var renderCheckbox = ({ rowIndex, header = false, checked = false, disabled = fa
   };
   return renderInput(BASE_CLASSES.checkbox, attrs, checked, disabled, true, "table-selection");
 };
-var renderSwitch = ({ colIndex, rowIndex, checked = false, disabled = false }) => {
+var SwitchStory = ({ colIndex, rowIndex, checked = false, disabled = false }) => {
   const attrs = {
     [CONTROL_IDENTIFIERS.switch]: "",
     "data-row-index": rowIndex.toString(),
@@ -584,7 +677,7 @@ var renderSwitch = ({ colIndex, rowIndex, checked = false, disabled = false }) =
 var tableControls = {
   checkbox: {
     attr: CONTROL_IDENTIFIERS.checkbox,
-    render: renderCheckbox,
+    render: CheckboxStory,
     getData: (el) => ({
       type: "checkbox",
       rowIndex: Number(el.getAttribute("data-row-index")),
@@ -593,7 +686,7 @@ var tableControls = {
   },
   switch: {
     attr: CONTROL_IDENTIFIERS.switch,
-    render: renderSwitch,
+    render: SwitchStory,
     getData: (el) => ({
       type: "switch",
       rowIndex: Number(el.getAttribute("data-row-index")),
@@ -602,9 +695,10 @@ var tableControls = {
   }
 };
 var SelectionModel = class extends import_context2.Resource {
-  constructor(_rows, _onSelectionChanged) {
+  constructor(_rows, _selectionMode, _onSelectionChanged) {
     super();
     this._rows = _rows;
+    this._selectionMode = _selectionMode;
     this._onSelectionChanged = _onSelectionChanged;
     this._selection = (0, import_signals_core2.signal)(/* @__PURE__ */ new Set());
     this._validSelectedIds = (0, import_signals_core2.computed)(() => {
@@ -642,6 +736,9 @@ var SelectionModel = class extends import_context2.Resource {
       if (newSelection.has(row.id)) {
         newSelection.delete(row.id);
       } else {
+        if (this._selectionMode === "single") {
+          newSelection.clear();
+        }
         newSelection.add(row.id);
       }
       this._selection.value = newSelection;
@@ -678,6 +775,9 @@ var SelectionModel = class extends import_context2.Resource {
   get allRowsSeleted() {
     return this._allSelected;
   }
+  get selectionMode() {
+    return this._selectionMode;
+  }
 };
 var TableSorting = class {
   constructor(rows, _view, _projection) {
@@ -839,13 +939,20 @@ var TableSorting = class {
   }
 };
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/table-model.ts";
+var defaultFeatures = {
+  selection: {
+    enabled: true,
+    mode: "multiple"
+  },
+  dataEditable: false,
+  schemaEditable: false
+};
 var TableModel = class extends import_context.Resource {
-  constructor({ table, projection, sorting = [], pinnedRows = {
+  constructor({ id, space, view, projection, features = {}, sorting = [], pinnedRows = {
     top: [],
     bottom: []
-  }, onCellUpdate, onDeleteColumn, onDeleteRows, onInsertRow, onRowOrderChanged }) {
+  }, rowActions = [], onCellUpdate, onDeleteColumn, onDeleteRows, onInsertRow, onRowOrderChange, onRowAction }) {
     super();
-    this.id = `table-model-${import_react_client.PublicKey.random().truncate()}`;
     this._visibleRange = (0, import_signals_core.signal)({
       start: {
         row: 0,
@@ -861,7 +968,7 @@ var TableModel = class extends import_context.Resource {
       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);
@@ -870,7 +977,7 @@ var TableModel = class extends import_context.Resource {
       const row = this._sorting.getDataIndex(rowIndex);
       const obj = this._rows.value[row];
       const objectsToDelete = [];
-      if (this._selection.hasSelection.value) {
+      if (this.features.selection.enabled && this._selection.hasSelection.value) {
         const selectedRows = this._selection.getSelectedRows();
         objectsToDelete.push(...selectedRows);
       } else {
@@ -878,8 +985,18 @@ var TableModel = class extends import_context.Resource {
       }
       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;
       }
@@ -908,7 +1025,7 @@ var TableModel = class extends import_context.Resource {
     };
     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;
       }
@@ -931,22 +1048,45 @@ var TableModel = class extends import_context.Resource {
         }
       }
     };
-    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
+    };
+    (0, import_invariant2.invariant)(!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === "single"), "Single selection is not compatible with editable tables.", {
+      F: __dxlog_file,
+      L: 114,
+      S: this,
+      A: [
+        "!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === 'single')",
+        "'Single selection is not compatible with editable tables.'"
+      ]
+    });
+    this._sorting = new TableSorting(this._rows, this._view, projection);
     if (sorting.length > 0) {
       const [sort] = sorting;
       this._sorting.setSort(sort.fieldId, sort.direction);
     }
     this._pinnedRows = pinnedRows;
+    this._rowActions = rowActions;
     this._onInsertRow = onInsertRow;
     this._onDeleteRows = onDeleteRows;
     this._onDeleteColumn = onDeleteColumn;
     this._onCellUpdate = onCellUpdate;
-    this._onRowOrderChanged = onRowOrderChanged;
+    this._onRowOrderChange = onRowOrderChange;
+    this._onRowAction = onRowAction;
+  }
+  get id() {
+    return this._id;
+  }
+  get space() {
+    return this._space;
   }
-  get table() {
-    return this._table;
+  get view() {
+    return this._view;
   }
   get projection() {
     return this._projection;
@@ -954,19 +1094,31 @@ var TableModel = class extends import_context.Resource {
   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() {
     (0, import_invariant2.invariant)(this._columnMeta, void 0, {
       F: __dxlog_file,
-      L: 117,
+      L: 183,
       S: this,
       A: [
         "this._columnMeta",
@@ -982,18 +1134,21 @@ var TableModel = class extends import_context.Resource {
   get isViewDirty() {
     return this._sorting.isDirty;
   }
+  get rowActions() {
+    return this._rowActions;
+  }
   //
   // Initialisation
   //
   async _open() {
     this.initializeColumnMeta();
     this.initializeEffects();
-    this._selection = new SelectionModel(this._sorting.sortedRows, () => this._onRowOrderChanged?.());
+    this._selection = new SelectionModel(this._sorting.sortedRows, this._features.selection.mode ?? "multiple", () => this._onRowOrderChange?.());
     await this._selection.open(this._ctx);
   }
   initializeColumnMeta() {
     this._columnMeta = (0, import_signals_core.computed)(() => {
-      const fields = this._table.view?.target?.fields ?? [];
+      const fields = this._view?.fields ?? [];
       const meta = Object.fromEntries(fields.map((field, index) => [
         index,
         {
@@ -1021,7 +1176,7 @@ var TableModel = class extends import_context.Resource {
   initializeEffects() {
     const rowOrderWatcher = (0, import_signals_core.effect)(() => {
       touch(this._sorting.sortedRows.value);
-      this._onRowOrderChanged?.();
+      this._onRowOrderChange?.();
     });
     this._ctx.onDispose(rowOrderWatcher);
     const rowEffectManager = (0, import_signals_core.effect)(() => {
@@ -1030,7 +1185,7 @@ var TableModel = class extends import_context.Resource {
       for (let row = start.row; row <= end.row; row++) {
         rowEffects.push((0, import_signals_core.effect)(() => {
           const obj = this._sorting.sortedRows.value[row];
-          this?._table?.view?.target?.fields.forEach((field) => touch((0, import_echo_schema3.getValue)(obj, field.path)));
+          this._view?.fields.forEach((field) => touch((0, import_echo_schema3.getValue)(obj, field.path)));
           this._onCellUpdate?.({
             row,
             col: start.col,
@@ -1049,7 +1204,7 @@ var TableModel = class extends import_context.Resource {
   */
   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 = (0, import_echo_schema3.getValue)(this._rows.value[dataRow], field.path);
     const updatedValue = update(value);
@@ -1059,10 +1214,10 @@ var TableModel = class extends import_context.Resource {
   // 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);
     }
@@ -1071,7 +1226,7 @@ var TableModel = class extends import_context.Resource {
   // 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];
@@ -1197,27 +1352,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 = "text-select";
+      });
+    }
+    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 = {
@@ -1228,7 +1396,8 @@ var TablePresentation = class {
           }
           switch (props.format) {
             case import_echo_schema6.FormatEnum.Boolean:
-            case import_echo_schema6.FormatEnum.SingleSelect: {
+            case import_echo_schema6.FormatEnum.SingleSelect:
+            case import_echo_schema6.FormatEnum.MultiSelect: {
               return "";
             }
             case import_echo_schema6.FormatEnum.Ref: {
@@ -1255,7 +1424,7 @@ var TablePresentation = class {
       if (formatClasses) {
         classes.push(formatClasses);
       }
-      const rowSelectionClasses = (0, import_react_ui_form6.cellClassesForRowSelection)(this.model.selection.isObjectSelected(obj));
+      const rowSelectionClasses = cellClassesForRowSelection(this.model.selection.isObjectSelected(obj), this.model.selection.selectionMode);
       if (rowSelectionClasses) {
         classes.push(rowSelectionClasses);
       }
@@ -1278,7 +1447,7 @@ var TablePresentation = class {
           rowIndex: displayIndex,
           checked: value ?? false
         });
-        cell.readonly = true;
+        cell.readonly = "no-text-select";
       }
       if (props.format === import_echo_schema6.FormatEnum.SingleSelect) {
         const value = (0, import_echo_schema6.getValue)(obj, field.path);
@@ -1290,6 +1459,22 @@ var TablePresentation = class {
           }
         }
       }
+      if (props.format === import_echo_schema6.FormatEnum.MultiSelect) {
+        const values = (0, import_echo_schema6.getValue)(obj, field.path);
+        const options = this.model.projection.getFieldProjection(field.id).props.options;
+        if (options && values && values.length > 0) {
+          const tags = values.map((value) => {
+            const option = options.find((o) => o.id === value);
+            if (option) {
+              return `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
+            }
+            return null;
+          }).filter(Boolean).join(" ");
+          if (tags) {
+            cell.accessoryHtml = tags;
+          }
+        }
+      }
       const idx = (0, import_react_ui_grid3.toPlaneCellIndex)({
         col: colIndex,
         row: displayIndex
@@ -1309,7 +1494,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;
@@ -1340,13 +1525,13 @@ var TablePresentation = class {
     const cells = {};
     for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
       const isSelected = this.model.selection.isRowIndexSelected(row);
-      const classes = (0, import_react_ui_form6.cellClassesForRowSelection)(isSelected);
+      const classes = cellClassesForRowSelection(isSelected, this.model.selection.selectionMode);
       cells[(0, import_react_ui_grid3.toPlaneCellIndex)({
         col: 0,
         row
       })] = {
         value: "",
-        readonly: true,
+        readonly: "no-text-select",
         className: classes ? (0, import_react_ui_theme2.mx)(classes) : void 0,
         accessoryHtml: tableControls.checkbox.render({
           rowIndex: row,
@@ -1360,7 +1545,7 @@ var TablePresentation = class {
     const cells = {};
     for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
       const isSelected = this.model.selection.isRowIndexSelected(row);
-      const classes = (0, import_react_ui_form6.cellClassesForRowSelection)(isSelected);
+      const classes = cellClassesForRowSelection(isSelected, this.model.selection.selectionMode);
       cells[(0, import_react_ui_grid3.toPlaneCellIndex)({
         col: 0,
         row
@@ -1376,6 +1561,18 @@ var TablePresentation = class {
     return cells;
   }
   getSelectAllCell() {
+    if (!this.model.features.selection.enabled || this.model.selection.selectionMode === "single") {
+      return {
+        [(0, import_react_ui_grid3.toPlaneCellIndex)({
+          col: 0,
+          row: 0
+        })]: {
+          className: "!bg-gridHeader",
+          readonly: true,
+          value: ""
+        }
+      };
+    }
     return {
       [(0, import_react_ui_grid3.toPlaneCellIndex)({
         col: 0,
@@ -1398,9 +1595,9 @@ var TablePresentation = class {
         col: 0,
         row: 0
       })]: {
-        accessoryHtml: tableButtons.addColumn.render({
-          disabled: (this.model.table.view?.target?.fields?.length ?? 0) >= import_schema2.VIEW_FIELD_LIMIT
-        }),
+        accessoryHtml: this.model.features.schemaEditable ? tableButtons.addColumn.render({
+          disabled: (this.model.view?.fields?.length ?? 0) >= import_schema3.VIEW_FIELD_LIMIT
+        }) : void 0,
         className: "!bg-gridHeader",
         readonly: true,
         value: ""
@@ -1408,6 +1605,28 @@ var TablePresentation = class {
     };
   }
 };
+var cellClassesForRowSelection = (selected, selectionMode) => {
+  if (!selected) {
+    if (selectionMode === "single") {
+      return [
+        "!cursor-pointer"
+      ];
+    } else {
+      return void 0;
+    }
+  }
+  switch (selectionMode) {
+    case "single":
+      return [
+        "!bg-currentRelated hover:bg-hoverSurface",
+        "!cursor-pointer"
+      ];
+    case "multiple":
+      return [
+        "!bg-gridCellSelected"
+      ];
+  }
+};
 var completion = ({ debug, onQuery, onMatch }) => {
   return [
     import_view.EditorView.theme({
@@ -1453,6 +1672,7 @@ var isCreateOption = (data) => typeof data === "object" && data[newValue];
 var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }) => {
   const { id: gridId, editing, setEditing } = (0, import_react_ui_grid4.useGridContext)("TableCellEditor", __gridScope);
   const suppressNextBlur = (0, import_react7.useRef)(false);
+  const { themeMode } = (0, import_react_ui7.useThemeContext)();
   const fieldProjection = (0, import_react7.useMemo)(() => {
     if (!model || !editing) {
       return;
@@ -1462,7 +1682,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     const fieldProjection2 = model.projection.getFieldProjection(field.id);
     (0, import_invariant3.invariant)(fieldProjection2, void 0, {
       F: __dxlog_file3,
-      L: 67,
+      L: 71,
       S: void 0,
       A: [
         "fieldProjection",
@@ -1485,7 +1705,10 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     setEditing(null);
   }, [
     model,
-    editing
+    editing,
+    onEnter,
+    onFocus,
+    setEditing
   ]);
   const handleBlur = (0, import_react7.useCallback)((value) => {
     if (!model || !editing) {
@@ -1517,9 +1740,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     editing,
     onFocus,
     onEnter,
-    fieldProjection,
-    determineNavigationAxis,
-    determineNavigationDelta
+    fieldProjection
   ]);
   const extension = (0, import_react7.useMemo)(() => {
     if (!fieldProjection) {
@@ -1533,6 +1754,37 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
         }
       })
     ];
+    const format = fieldProjection.props.format;
+    if (format === import_echo_schema7.FormatEnum.SingleSelect || format === import_echo_schema7.FormatEnum.MultiSelect) {
+      extension2.push((0, import_react_ui_editor.createMarkdownExtensions)({
+        themeMode
+      }));
+      const options = fieldProjection.props.options || [];
+      const mode = format === import_echo_schema7.FormatEnum.SingleSelect ? "single-select" : "multi-select";
+      extension2.push((0, import_react_ui_tag_picker.tagPickerExtension)({
+        mode,
+        inGrid: true,
+        onSearch: (text, selectedIds) => {
+          return options.filter((option) => selectedIds.indexOf(option.id) === -1 && (text.length === 0 || option.title.toLowerCase().includes(text.toLowerCase()))).map((option) => ({
+            id: option.id,
+            label: option.title,
+            hue: option.color
+          }));
+        },
+        onUpdate: (ids) => {
+          if (model && editing) {
+            if (ids.length === 0) {
+              return;
+            }
+            if (mode === "single-select") {
+              handleEnter(ids[0]);
+            } else {
+              handleEnter(ids);
+            }
+          }
+        }
+      }));
+    }
     if (onQuery) {
       switch (fieldProjection.props.format) {
         case import_echo_schema7.FormatEnum.Ref: {
@@ -1568,11 +1820,49 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     modals,
     editing,
     fieldProjection,
-    handleClose
+    handleClose,
+    themeMode
   ]);
   const getCellContent = (0, import_react7.useCallback)(() => {
     if (model && editing) {
-      const value = model.getCellData((0, import_react_ui_grid4.parseCellIndex)(editing.index));
+      const cell = (0, import_react_ui_grid4.parseCellIndex)(editing.index);
+      const { col } = cell;
+      const field = model.projection.view.fields[col];
+      const fieldProjection2 = model.projection.getFieldProjection(field.id);
+      if (fieldProjection2?.props.format === import_echo_schema7.FormatEnum.SingleSelect || fieldProjection2?.props.format === import_echo_schema7.FormatEnum.MultiSelect) {
+        const value2 = model.getCellData(cell);
+        if (value2 !== void 0) {
+          const options = fieldProjection2.props.options || [];
+          if (fieldProjection2.props.format === import_echo_schema7.FormatEnum.MultiSelect && Array.isArray(value2)) {
+            const tagItems = value2.map((id) => {
+              const option = options.find((o) => o.id === id);
+              if (option) {
+                return {
+                  id,
+                  label: option.title,
+                  hue: option.color
+                };
+              }
+              return void 0;
+            }).filter((item) => item !== void 0);
+            return (0, import_react_ui_tag_picker.createLinks)(tagItems);
+          } else {
+            const option = options.find((o) => o.id === value2);
+            if (option) {
+              const tagItem = {
+                id: value2,
+                label: option.title,
+                hue: option.color
+              };
+              return (0, import_react_ui_tag_picker.createLinks)([
+                tagItem
+              ]);
+            }
+          }
+        }
+        return "";
+      }
+      const value = model.getCellData(cell);
       return value !== void 0 ? String(value) : "";
     }
   }, [
@@ -1612,27 +1902,40 @@ 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__ */ import_react.default.createElement("div", {
     role: "none",
-    className: (0, import_react_ui_theme.mx)("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]")
+    className: (0, import_react_ui_theme.mx)("relative !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__ */ (0, import_react.forwardRef)(({ model, presentation, ignoreAttention }, forwardedRef) => {
+var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentation, ignoreAttention, onRowClick }, forwardedRef) => {
   const [dxGrid, setDxGrid] = (0, import_react.useState)(null);
-  const { hasAttention } = (0, import_react_ui_attention.useAttention)(model?.table ? (0, import_echo.fullyQualifiedId)(model.table) : "table");
+  const { hasAttention } = (0, import_react_ui_attention.useAttention)(model?.id ?? "table");
   const { t } = (0, import_react_ui.useTranslation)(translationKey);
   const modals = (0, import_react.useMemo)(() => new ModalController(), []);
+  const frozen = (0, import_react.useMemo)(() => {
+    const noActionColumn = model?.features.dataEditable === false && model?.features.schemaEditable === false && model.rowActions.length === 0;
+    return {
+      frozenRowsStart: 1,
+      frozenColsStart: model?.features.selection.enabled ? 1 : 0,
+      frozenColsEnd: noActionColumn ? 0 : 1
+    };
+  }, [
+    model
+  ]);
+  (0, import_react.useEffect)(() => {
+    if (!presentation || !dxGrid) {
+      return;
+    }
+    dxGrid.getCells = (range, plane) => presentation.getCells(range, plane);
+  }, [
+    presentation,
+    dxGrid
+  ]);
   (0, import_react.useImperativeHandle)(forwardedRef, () => {
     if (!presentation || !dxGrid) {
       return {};
     }
-    dxGrid.getCells = (range, plane) => presentation.getCells(range, plane);
     return {
       update: (cell) => {
         if (cell) {
@@ -1648,6 +1951,16 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentat
     dxGrid
   ]);
   const handleGridClick = (0, import_react.useCallback)((event) => {
+    const rowIndex = (0, import_util.safeParseInt)(event.target.ariaRowIndex ?? "");
+    if (rowIndex != null) {
+      if (onRowClick) {
+        const row = model?.getRowAt(rowIndex);
+        row && onRowClick(row);
+      }
+      if (model?.features.selection.enabled && model?.selection.selectionMode === "single") {
+        model.selection.toggleSelectionForRowIndex(rowIndex);
+      }
+    }
     if (!modals) {
       return;
     }
@@ -1724,6 +2037,9 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentat
     dxGrid
   ]);
   const handleEnter = (0, import_react.useCallback)((cell) => {
+    if (!model?.features.dataEditable) {
+      return;
+    }
     if (model && cell.row === model.getRowCount() - 1) {
       model.insertRow(cell.row);
       if (dxGrid) {
@@ -1738,6 +2054,9 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentat
     dxGrid
   ]);
   const handleKeyDown = (0, import_react.useCallback)((event) => {
+    if (!model?.features.dataEditable) {
+      return;
+    }
     const cell = (0, import_react_ui_grid.closestCell)(event.target);
     if (!model || !cell) {
       return;
@@ -1779,10 +2098,10 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentat
   ]);
   const handleQuery = (0, import_react.useCallback)(async ({ field, props }, text) => {
     if (model && props.referenceSchema && field.referencePath) {
-      const space = (0, import_echo.getSpace)(model.table);
+      const space = model.space;
       (0, import_invariant.invariant)(space, void 0, {
         F: __dxlog_file4,
-        L: 264,
+        L: 312,
         S: void 0,
         A: [
           "space",
@@ -1815,7 +2134,8 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentat
     }
     return [];
   }, [
-    model
+    model,
+    t
   ]);
   if (!model || !modals) {
     return /* @__PURE__ */ import_react.default.createElement("span", {
@@ -1824,7 +2144,7 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentat
     });
   }
   return /* @__PURE__ */ import_react.default.createElement(import_react_ui_grid.Grid.Root, {
-    id: model.table.id ?? "table-grid"
+    id: model.id ?? "table-grid"
   }, /* @__PURE__ */ import_react.default.createElement(TableCellEditor, {
     model,
     modals,
@@ -1832,16 +2152,17 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentat
     onFocus: handleFocus,
     onQuery: handleQuery
   }), /* @__PURE__ */ import_react.default.createElement(import_react_ui_grid.Grid.Content, {
-    onWheelCapture: handleWheel,
     className: (0, import_react_ui_theme.mx)("[--dx-grid-base:var(--surface-bg)]", inlineEndLine, blockEndLine),
     frozen,
+    // getCells={getCells}
     columns: model.columnMeta.value,
     limitRows: model.getRowCount() ?? 0,
-    limitColumns: model.table.view?.target?.fields?.length ?? 0,
+    limitColumns: model.view?.fields?.length ?? 0,
+    overscroll: "trap",
     onAxisResize: handleAxisResize,
     onClick: handleGridClick,
     onKeyDown: handleKeyDown,
-    overscroll: "trap",
+    onWheelCapture: handleWheel,
     ref: setDxGrid
   }), /* @__PURE__ */ import_react.default.createElement(RowActionsMenu, {
     model,
@@ -1853,10 +2174,10 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentat
     model,
     modals,
     onNewColumn: handleNewColumn
-  }), /* @__PURE__ */ import_react.default.createElement(RefPanel, {
+  }), /* @__PURE__ */ import_react.default.createElement(CreateRefPanel, {
     model,
     modals
-  }), /* @__PURE__ */ import_react.default.createElement(CreateRefPanel, {
+  }), /* @__PURE__ */ import_react.default.createElement(RefPanel, {
     model,
     modals
   }));
@@ -1865,6 +2186,133 @@ var Table = {
   Root: TableRoot,
   Main: TableMain
 };
+var useTableModel = ({ table, projection, rows, rowActions, features, onSelectionChanged, onRowAction, ...props }) => {
+  const [model, setModel] = (0, import_react9.useState)();
+  (0, import_react9.useEffect)(() => {
+    if (!table || !projection) {
+      return;
+    }
+    let model2;
+    const t = setTimeout(async () => {
+      model2 = new TableModel({
+        id: (0, import_echo4.fullyQualifiedId)(table),
+        space: (0, import_echo4.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
+  ]);
+  (0, import_react9.useEffect)(() => {
+    if (rows) {
+      model?.setRows(rows);
+    }
+  }, [
+    model,
+    rows
+  ]);
+  const { select, clear } = (0, import_react_ui_attention2.useSelectionActions)([
+    table?.id,
+    table?.view?.target?.query.typename
+  ].filter(import_util2.isNonNullable));
+  (0, import_react9.useEffect)(() => {
+    if (!model) {
+      return;
+    }
+    const unsubscribe = (0, import_signals_core6.effect)(() => {
+      const selectedItems = [
+        ...model.selection.selection.value
+      ];
+      select(selectedItems);
+      onSelectionChanged?.(selectedItems);
+    });
+    return () => {
+      clear();
+      unsubscribe();
+    };
+  }, [
+    model,
+    onSelectionChanged
+  ]);
+  return model;
+};
+var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, properties, jsonSchema, schema, rowActions, onRowClick, onRowAction, ...props }) => {
+  const { table, projection } = (0, import_react8.useMemo)(() => {
+    const props2 = getBaseSchems({
+      typename: name,
+      properties,
+      jsonSchema,
+      schema
+    });
+    return makeDynamicTable({
+      ...props2,
+      properties
+    });
+  }, [
+    name,
+    properties,
+    schema,
+    jsonSchema
+  ]);
+  const tableRef = (0, import_react8.useRef)(null);
+  const handleCellUpdate = (0, import_react8.useCallback)((cell) => {
+    tableRef.current?.update?.(cell);
+  }, []);
+  const handleRowOrderChange = (0, import_react8.useCallback)(() => {
+    tableRef.current?.update?.();
+  }, []);
+  const features = (0, import_react_ui8.useDefaultValue)(props.features, () => ({
+    selection: {
+      enabled: false
+    },
+    dataEditable: false
+  }));
+  const model = useTableModel({
+    table,
+    rows,
+    projection,
+    features,
+    rowActions,
+    onCellUpdate: handleCellUpdate,
+    onRowOrderChange: handleRowOrderChange,
+    onRowAction
+  });
+  const presentation = (0, import_react8.useMemo)(() => {
+    if (model) {
+      return new TablePresentation(model);
+    }
+  }, [
+    model
+  ]);
+  return /* @__PURE__ */ import_react8.default.createElement("div", {
+    role: "none",
+    className: (0, import_react_ui_theme3.mx)("is-full bs-full grow grid", classNames)
+  }, /* @__PURE__ */ import_react8.default.createElement("div", {
+    role: "none",
+    className: "grid min-bs-0 overflow-hidden"
+  }, /* @__PURE__ */ import_react8.default.createElement(Table.Root, null, /* @__PURE__ */ import_react8.default.createElement(Table.Main, {
+    ref: tableRef,
+    model,
+    presentation,
+    ignoreAttention: true,
+    onRowClick
+  }))));
+};
 var createTableToolbarActions = (state) => {
   const add = (0, import_react_ui_menu.createMenuAction)("add-row", {
     type: "add-row",
@@ -1917,89 +2365,39 @@ var createTableToolbarActions = (state) => {
   };
 };
 var TableToolbar = ({ classNames, viewDirty, attendableId, onAction }) => {
-  const state = (0, import_react8.useMemo)(() => (0, import_live_object2.create)({
+  const state = (0, import_react10.useMemo)(() => (0, import_live_object3.create)({
     viewDirty
   }), []);
-  const actionsCreator = (0, import_react8.useCallback)(() => createTableToolbarActions(state), [
+  const actionsCreator = (0, import_react10.useCallback)(() => createTableToolbarActions(state), [
     state
   ]);
   const menu = (0, import_react_ui_menu.useMenuActions)(actionsCreator);
-  return /* @__PURE__ */ import_react8.default.createElement(import_react_ui_menu.MenuProvider, {
+  return /* @__PURE__ */ import_react10.default.createElement(import_react_ui_menu.MenuProvider, {
     ...menu,
     attendableId,
     onAction
-  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui_menu.ToolbarMenu, {
+  }, /* @__PURE__ */ import_react10.default.createElement(import_react_ui_menu.ToolbarMenu, {
     classNames
   }));
 };
-var useTableModel = ({ objects, table, projection, ...props }) => {
-  const [model, setModel] = (0, import_react9.useState)();
-  (0, import_react9.useEffect)(() => {
-    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
-  ]);
-  (0, import_react9.useEffect)(() => {
-    if (objects) {
-      model?.setRows(objects);
-    }
-  }, [
-    model,
-    objects
-  ]);
-  const { select, clear } = (0, import_react_ui_attention2.useSelectionActions)([
-    table?.id,
-    table?.view?.target?.query.typename
-  ].filter(import_util2.isNonNullable));
-  (0, import_react9.useEffect)(() => {
-    if (!model) {
-      return;
-    }
-    const unsubscribe = (0, import_signals_core6.effect)(() => {
-      select([
-        ...model.selection.selection.value
-      ]);
-    });
-    return () => {
-      clear();
-      unsubscribe();
-    };
-  }, [
-    model
-  ]);
-  return model;
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BUTTON_IDENTIFIERS,
   CONTROL_IDENTIFIERS,
+  CheckboxStory,
+  DynamicTable,
   ModalController,
+  SwitchStory,
   Table,
   TableModel,
   TablePresentation,
   TableSchema,
   TableToolbar,
   TableType,
+  cellClassesForRowSelection,
+  getBaseSchems,
   initializeTable,
-  renderCheckbox,
-  renderSwitch,
+  makeDynamicTable,
   tableButtons,
   tableControls,
   touch,