@dxos/react-ui-table 0.7.5-main.9d26e3a → 0.7.5-main.b19bfc8

package/dist/lib/node/index.cjs

@@ -34,9 +34,9 @@ __export(node_exports, {
   Table: () => Table,
   TableModel: () => TableModel,
   TablePresentation: () => TablePresentation,
-  TableSchema: () => import_chunk_YSBXNBDJ.TableSchema,
-  TableType: () => import_chunk_YSBXNBDJ.TableType,
-  Toolbar: () => Toolbar,
+  TableSchema: () => import_chunk_NB3SFHGA.TableSchema,
+  TableToolbar: () => TableToolbar,
+  TableType: () => import_chunk_NB3SFHGA.TableType,
   initializeTable: () => initializeTable,
   renderCheckbox: () => renderCheckbox,
   renderSwitch: () => renderSwitch,
@@ -44,11 +44,10 @@ __export(node_exports, {
   tableControls: () => tableControls,
   touch: () => touch,
   translations: () => translations_default,
-  useTableModel: () => useTableModel,
-  useToolbarContext: () => useToolbarContext
+  useTableModel: () => useTableModel
 });
 module.exports = __toCommonJS(node_exports);
-var import_chunk_YSBXNBDJ = require("./chunk-YSBXNBDJ.cjs");
+var import_chunk_NB3SFHGA = require("./chunk-NB3SFHGA.cjs");
 var import_react = __toESM(require("react"));
 var import_echo_schema = require("@dxos/echo-schema");
 var import_invariant = require("@dxos/invariant");
@@ -77,7 +76,6 @@ var import_react_ui_form3 = require("@dxos/react-ui-form");
 var import_react6 = __toESM(require("react"));
 var import_react_ui6 = require("@dxos/react-ui");
 var import_signals_core = require("@preact/signals-core");
-var import_lodash = __toESM(require("lodash.orderby"));
 var import_context = require("@dxos/context");
 var import_echo_schema3 = require("@dxos/echo-schema");
 var import_invariant2 = require("@dxos/invariant");
@@ -87,30 +85,34 @@ 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_log = require("@dxos/log");
 var import_react_client2 = require("@dxos/react-client");
 var import_echo5 = require("@dxos/react-client/echo");
 var import_schema = require("@dxos/schema");
 var import_signals_core3 = require("@preact/signals-core");
-var import_log2 = require("@dxos/log");
-var import_signals_core4 = require("@preact/signals-core");
+var import_lodash = __toESM(require("lodash.orderby"));
 var import_echo_schema5 = require("@dxos/echo-schema");
 var import_react_ui_form5 = require("@dxos/react-ui-form");
+var import_signals_core4 = require("@preact/signals-core");
+var import_log = require("@dxos/log");
+var import_signals_core5 = require("@preact/signals-core");
+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_react7 = __toESM(require("react"));
-var import_echo_schema6 = require("@dxos/echo-schema");
+var import_echo_schema7 = require("@dxos/echo-schema");
 var import_invariant3 = require("@dxos/invariant");
 var import_react_ui_grid4 = require("@dxos/react-ui-grid");
 var import_autocomplete = require("@codemirror/autocomplete");
 var import_view = require("@codemirror/view");
-var import_react_context = require("@radix-ui/react-context");
 var import_react8 = __toESM(require("react"));
-var import_react_ui7 = require("@dxos/react-ui");
-var import_react9 = __toESM(require("react"));
-var import_react_ui8 = require("@dxos/react-ui");
-var import_react10 = require("react");
+var import_live_object2 = require("@dxos/live-object");
+var import_react_ui_menu = require("@dxos/react-ui-menu");
+var import_signals_core6 = require("@preact/signals-core");
+var import_react9 = require("react");
+var import_react_ui_attention2 = require("@dxos/react-ui-attention");
+var import_util2 = require("@dxos/util");
 var translationKey = "table";
 var translations_default = [
   {
@@ -124,7 +126,7 @@ var translations_default = [
         "new schema": "New schema",
         "continue label": "Continue",
         "create stack section label": "Create table",
-        "add row": "Add row",
+        "add row label": "Add row",
         "create comment": "Create thread",
         "column action sort descending": "Sort Descending",
         "column action sort ascending": "Sort Ascending",
@@ -135,7 +137,8 @@ var translations_default = [
         "bulk delete row label": "Delete selected rows",
         "column deleted label": "Column deleted",
         "new column button label": "Create column",
-        "create new object label": "Create new object \u201C{{text}}\u201D"
+        "create new object label": "Create new object \u201C{{text}}\u201D",
+        "save view label": "Save changes to view"
       }
     }
   }
@@ -146,7 +149,7 @@ var ColumnActionsMenu = ({ model, modals }) => {
   if (state?.type !== "column") {
     return null;
   }
-  const currentSort = model.sorting;
+  const currentSort = model.sorting?.sorting;
   const isCurrentColumnSorted = currentSort?.fieldId === state.fieldId;
   return /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Root, {
     modal: false,
@@ -156,13 +159,13 @@ var ColumnActionsMenu = ({ model, modals }) => {
     virtualRef: modals.trigger
   }), /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Portal, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Content, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Viewport, null, (!isCurrentColumnSorted || currentSort?.direction === "asc") && /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
     "data-testid": "column-sort-descending",
-    onClick: () => model.setSort(state.fieldId, "desc")
+    onClick: () => model.sorting?.setSort(state.fieldId, "desc")
   }, t("column action sort descending")), (!isCurrentColumnSorted || currentSort?.direction === "desc") && /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
     "data-testid": "column-sort-ascending",
-    onClick: () => model.setSort(state.fieldId, "asc")
+    onClick: () => model.sorting?.setSort(state.fieldId, "asc")
   }, t("column action sort ascending")), isCurrentColumnSorted && /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
     "data-testid": "column-clear-sort",
-    onClick: () => model.clearSort()
+    onClick: () => model.sorting?.clearSort()
   }, t("column action clear sorting")), model.getColumnCount() > 1 && /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
     "data-testid": "column-delete",
     onClick: () => model.deleteColumn(state.fieldId)
@@ -352,79 +355,97 @@ var RowActionsMenu = ({ model, modals }) => {
   }, t(hasSelection ? "bulk delete row label" : "delete row label"))), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Arrow, null)));
 };
 var touch = (value) => value;
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/util/table.ts";
-var initializeTable = async ({ space, table, initialRow = true }) => {
-  (0, import_log.log)("initializeTable", {
-    table
-  }, {
-    F: __dxlog_file,
-    L: 36,
-    S: void 0,
-    C: (f, a) => f(...a)
-  });
-  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([
-    ContactSchema
-  ]);
-  table.view = (0, import_echo5.makeRef)((0, import_schema.createView)({
-    name: "Test",
-    typename: contactSchema.typename,
-    jsonSchema: contactSchema.jsonSchema,
-    fields: [
-      "name",
-      "active",
-      "email",
-      "salary"
-    ]
-  }));
-  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
+var initializeTable = async ({ space, table, initialRow = true, initialSchema }) => {
+  if (initialSchema) {
+    const schema = await space.db.schemaRegistry.query({
+      typename: initialSchema
+    }).firstOrUndefined();
+    if (!schema) {
+      throw new Error(`Schema not found: ${initialSchema}`);
     }
-  });
-  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"
+    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)({
+      // TODO(ZaymonFC): Don't hardcode name?
+      name: "View",
+      typename: schema.typename,
+      jsonSchema: schema.jsonSchema,
+      fields
+    }));
+    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([
+      ContactSchema
+    ]);
+    table.view = (0, import_echo5.makeRef)((0, import_schema.createView)({
+      name: "View",
+      typename: contactSchema.typename,
+      jsonSchema: contactSchema.jsonSchema,
+      fields: [
+        "name",
+        "email",
+        "salary",
+        "active"
+      ]
+    }));
+    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"
+      }
+    });
+    if (initialRow) {
+      space.db.add((0, import_echo5.create)(contactSchema, {}));
     }
-  });
-  if (initialRow) {
-    space.db.add((0, import_echo5.create)(contactSchema, {}));
+    return contactSchema;
   }
-  return contactSchema;
 };
 var BUTTON_IDENTIFIERS = {
   columnSettings: "data-table-column-settings-button",
   newColumn: "data-table-new-column-button",
   referencedCell: "data-table-ref-cell-button",
-  rowMenu: "data-table-row-menu-button"
+  rowMenu: "data-table-row-menu-button",
+  sort: "data-table-sort-button"
 };
-var createButton = ({ attr, data, disabled = false, icon, testId }) => {
+var createButton = ({ attr, data, disabled = false, icon, testId, type = "primary" }) => {
   const dataAttrs = Object.entries(data).map(([k, v]) => `${k}="${v}"`).join(" ");
-  return `<button ${attr} data-testid="${testId}" class="ch-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 inline-end-2" ${dataAttrs} ${disabled ? "disabled" : ""}><svg><use href="/icons.svg#${icon}"/></svg></button>`;
+  const positionClass = type === "primary" ? "inline-end-2" : "inline-end-9";
+  return `<button ${attr} data-testid="${testId}" class="dx-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 ${positionClass}" ${dataAttrs} ${disabled ? "disabled" : ""}><svg><use href="/icons.svg#${icon}"/></svg></button>`;
 };
 var addColumnButton = {
   attr: BUTTON_IDENTIFIERS.newColumn,
@@ -498,19 +519,43 @@ var rowMenuButton = {
     rowIndex: Number(el.getAttribute("data-row-index"))
   })
 };
+var sortButton = {
+  attr: BUTTON_IDENTIFIERS.sort,
+  icon: "ph--sort-ascending--regular",
+  render: ({ fieldId, direction }) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.sort,
+      icon: direction === "desc" ? "ph--sort-descending--regular" : "ph--sort-ascending--regular",
+      data: {
+        "data-field-id": fieldId,
+        "data-direction": direction ?? ""
+      },
+      testId: "table-sort-button",
+      // TODO(ZaymonFC): All buttons should be rendered into an absolutely positioned flex container.
+      // This is a bit hacky.
+      type: "secondary"
+    });
+  },
+  getData: (el) => ({
+    type: "sort",
+    fieldId: el.getAttribute("data-field-id"),
+    direction: el.getAttribute("data-direction")
+  })
+};
 var tableButtons = {
   addColumn: addColumnButton,
   columnSettings: columnSettingsButton,
   referencedCell: referencedCellButton,
-  rowMenu: rowMenuButton
+  rowMenu: rowMenuButton,
+  sort: sortButton
 };
 var CONTROL_IDENTIFIERS = {
   checkbox: "data-table-checkbox",
   switch: "data-table-switch"
 };
 var BASE_CLASSES = {
-  checkbox: "absolute inset-block-[.375rem] inline-end-[.375rem] ch-checkbox",
-  switch: "absolute inset-block-[.25rem] inline-end-[.25rem] ch-checkbox--switch"
+  checkbox: "absolute inset-block-[.375rem] inline-end-[.375rem] dx-checkbox",
+  switch: "absolute inset-block-[.25rem] inline-end-[.25rem] dx-checkbox--switch"
 };
 var renderAttributes = (data) => {
   return Object.entries(data).map(([k, v]) => `${k}="${v}"`).join(" ");
@@ -634,7 +679,166 @@ var SelectionModel = class extends import_context2.Resource {
     return this._allSelected;
   }
 };
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/table-model.ts";
+var TableSorting = class {
+  constructor(rows, _view, _projection) {
+    this._view = _view;
+    this._projection = _projection;
+    this._displayToDataIndex = /* @__PURE__ */ new Map();
+    this._localSort = (0, import_signals_core3.signal)(void 0);
+    this._rows = rows;
+    this._isDirty = (0, import_signals_core3.computed)(() => {
+      const local = this._localSort.value;
+      const viewSort = this._view?.query.sort?.[0];
+      if (local?.type === "cleared") {
+        return viewSort !== void 0;
+      }
+      if (local?.type === "active") {
+        if (!viewSort) {
+          return true;
+        }
+        return local.sort.fieldId !== viewSort.fieldId || local.sort.direction !== viewSort.direction;
+      }
+      return false;
+    });
+    this.sortedRows = this.initialiseSortedRows();
+  }
+  /**
+  * @reactive
+  * @returns Local sort if present, falls back to view sort.
+  */
+  get sorting() {
+    const local = this._localSort.value;
+    if (local?.type === "cleared") {
+      return void 0;
+    }
+    if (local?.type === "active") {
+      return local.sort;
+    }
+    return this._view?.query.sort?.[0];
+  }
+  /**
+  * @reactive
+  * @returns Whether local sort differs from view sort.
+  */
+  get isDirty() {
+    return this._isDirty.value;
+  }
+  getDataIndex(displayIndex) {
+    return this._displayToDataIndex.get(displayIndex) ?? displayIndex;
+  }
+  setSort(fieldId, direction) {
+    this._localSort.value = {
+      type: "active",
+      sort: {
+        fieldId,
+        direction
+      }
+    };
+  }
+  toggleSort(fieldId) {
+    if (!this._view || !this.sorting || this.sorting.fieldId !== fieldId) {
+      return;
+    }
+    switch (this.sorting.direction) {
+      case "asc": {
+        this.setSort(fieldId, "desc");
+        break;
+      }
+      case "desc": {
+        this.setSort(fieldId, "asc");
+        break;
+      }
+    }
+  }
+  clearSort() {
+    this._localSort.value = {
+      type: "cleared"
+    };
+  }
+  save() {
+    if (this._view && this._localSort.value !== void 0) {
+      if (this._localSort.value.type === "active") {
+        this._view.query.sort = [
+          this._localSort.value.sort
+        ];
+      } else {
+        this._view.query.sort = [];
+      }
+      this._localSort.value = void 0;
+    }
+  }
+  //
+  // Initialisation.
+  //
+  initialiseSortedRows() {
+    return (0, import_signals_core3.computed)(() => {
+      this._displayToDataIndex.clear();
+      const sort = this.sorting;
+      if (!sort || !this._view) {
+        return this._rows.value;
+      }
+      const field = this._view.fields.find((f) => f.id === sort.fieldId);
+      if (!field) {
+        return this._rows.value;
+      }
+      const { props } = this._projection.getFieldProjection(field.id);
+      const dataWithIndices = this._rows.value.map((item, index) => {
+        const sortValue = this.getSortValue(props, field, item);
+        const isEmpty = !(props.type === import_echo_schema5.TypeEnum.Boolean) && (sortValue == null || sortValue === "");
+        return {
+          item,
+          index,
+          value: sortValue,
+          isEmpty
+        };
+      });
+      const ordered = (0, import_lodash.default)(dataWithIndices, [
+        "isEmpty",
+        "value"
+      ], [
+        "asc",
+        sort.direction
+      ]);
+      ordered.forEach(({ index: dataIndex }, displayIndex) => {
+        if (displayIndex !== dataIndex) {
+          this._displayToDataIndex.set(displayIndex, dataIndex);
+        }
+      });
+      return ordered.map(({ item }) => item);
+    });
+  }
+  getSortValue(props, field, item) {
+    const { type, format } = props;
+    const value = (0, import_echo_schema5.getValue)(item, field.path);
+    if (type === import_echo_schema5.TypeEnum.Boolean) {
+      return !!value;
+    }
+    if (type === import_echo_schema5.TypeEnum.Number) {
+      return value;
+    }
+    if (value == null) {
+      return value;
+    }
+    if (format === import_echo_schema5.FormatEnum.SingleSelect) {
+      const options = props.options;
+      if (!options) {
+        return void 0;
+      }
+      const option = options.find((option2) => option2.id === value);
+      return option ? options.indexOf(option) : void 0;
+    }
+    if (format === import_echo_schema5.FormatEnum.Ref && field.referencePath) {
+      const refValue = (0, import_echo_schema5.getValue)(value.target, field.referencePath);
+      return refValue;
+    }
+    return (0, import_react_ui_form5.formatForDisplay)({
+      type,
+      format,
+      value
+    });
+  }
+};
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/table-model.ts";
 var TableModel = class extends import_context.Resource {
   constructor({ table, projection, sorting = [], pinnedRows = {
     top: [],
@@ -652,8 +856,6 @@ var TableModel = class extends import_context.Resource {
         col: 0
       }
     });
-    this._displayToDataIndex = /* @__PURE__ */ new Map();
-    this._sorting = (0, import_signals_core.signal)(void 0);
     this._rows = (0, import_signals_core.signal)([]);
     this.setRows = (obj) => {
       this._rows.value = obj;
@@ -661,11 +863,11 @@ var TableModel = class extends import_context.Resource {
     this.getRowCount = () => this._rows.value.length;
     this.getColumnCount = () => this.table.view?.target?.fields.length ?? 0;
     this.insertRow = (rowIndex) => {
-      const row = rowIndex !== void 0 ? this._displayToDataIndex.get(rowIndex) ?? rowIndex : this._rows.value.length;
+      const row = rowIndex !== void 0 ? this._sorting.getDataIndex(rowIndex) : this._rows.value.length;
       this._onInsertRow?.(row);
     };
     this.deleteRow = (rowIndex) => {
-      const row = this._displayToDataIndex.get(rowIndex) ?? rowIndex;
+      const row = this._sorting.getDataIndex(rowIndex);
       const obj = this._rows.value[row];
       const objectsToDelete = [];
       if (this._selection.hasSelection.value) {
@@ -682,7 +884,7 @@ var TableModel = class extends import_context.Resource {
         return void 0;
       }
       const field = fields[col];
-      const dataIndex = this._displayToDataIndex.get(row) ?? row;
+      const dataIndex = this._sorting.getDataIndex(row);
       const value = (0, import_echo_schema3.getValue)(this._rows.value[dataIndex], field.path);
       if (value == null) {
         return "";
@@ -705,7 +907,7 @@ var TableModel = class extends import_context.Resource {
       }
     };
     this.setCellData = ({ col, row }, value) => {
-      const rowIdx = this._displayToDataIndex.get(row) ?? row;
+      const rowIdx = this._sorting.getDataIndex(row);
       const fields = this.table.view?.target?.fields ?? [];
       if (col < 0 || col >= fields.length) {
         return;
@@ -731,7 +933,11 @@ var TableModel = class extends import_context.Resource {
     };
     this._table = table;
     this._projection = projection;
-    this._sorting.value = sorting.at(0);
+    this._sorting = new TableSorting(this._rows, table.view?.target, projection);
+    if (sorting.length > 0) {
+      const [sort] = sorting;
+      this._sorting.setSort(sort.fieldId, sort.direction);
+    }
     this._pinnedRows = pinnedRows;
     this._onInsertRow = onInsertRow;
     this._onDeleteRows = onDeleteRows;
@@ -746,14 +952,20 @@ var TableModel = class extends import_context.Resource {
     return this._projection;
   }
   get rows() {
-    return this._sortedRows;
+    return this._sorting.sortedRows;
+  }
+  /**
+  * @reactive
+  */
+  get sorting() {
+    return this._sorting;
   }
   get pinnedRows() {
     return this._pinnedRows;
   }
   get columnMeta() {
     (0, import_invariant2.invariant)(this._columnMeta, void 0, {
-      F: __dxlog_file2,
+      F: __dxlog_file,
       L: 117,
       S: this,
       A: [
@@ -763,20 +975,20 @@ var TableModel = class extends import_context.Resource {
     });
     return this._columnMeta;
   }
-  get sorting() {
-    return this._sorting.value;
-  }
   get selection() {
     return this._selection;
   }
+  /** @reactive */
+  get isViewDirty() {
+    return this._sorting.isDirty;
+  }
   //
   // Initialisation
   //
   async _open() {
     this.initializeColumnMeta();
-    this.initializeSorting();
     this.initializeEffects();
-    this._selection = new SelectionModel(this._sortedRows, () => this._onRowOrderChanged?.());
+    this._selection = new SelectionModel(this._sorting.sortedRows, () => this._onRowOrderChanged?.());
     await this._selection.open(this._ctx);
   }
   initializeColumnMeta() {
@@ -806,60 +1018,9 @@ var TableModel = class extends import_context.Resource {
       };
     });
   }
-  initializeSorting() {
-    this._sortedRows = (0, import_signals_core.computed)(() => {
-      this._displayToDataIndex.clear();
-      const sort = this._sorting.value;
-      if (!sort) {
-        return this._rows.value;
-      }
-      const field = this._table.view?.target?.fields.find((field2) => field2.id === sort.fieldId);
-      if (!field) {
-        return this._rows.value;
-      }
-      const { props } = this._projection.getFieldProjection(field.id);
-      const dataWithIndices = this._rows.value.map((item, index) => {
-        const rawValue = (0, import_echo_schema3.getValue)(item, field.path);
-        let sortValue = rawValue;
-        if (props.type.startsWith("boolean")) {
-          sortValue = !!rawValue;
-        } else if (rawValue != null) {
-          if (props.format === import_echo_schema3.FormatEnum.Ref && field.referencePath) {
-            sortValue = (0, import_echo_schema3.getValue)(rawValue, field.referencePath);
-          } else {
-            sortValue = (0, import_react_ui_form4.formatForDisplay)({
-              type: props.type,
-              format: props.format,
-              value: rawValue
-            });
-          }
-        }
-        return {
-          item,
-          index,
-          value: sortValue,
-          isEmpty: !props.type.startsWith("boolean") && (sortValue == null || sortValue === "")
-        };
-      });
-      const sorted = (0, import_lodash.default)(dataWithIndices, [
-        "isEmpty",
-        "value"
-      ], [
-        "asc",
-        sort.direction
-      ]);
-      for (let displayIndex = 0; displayIndex < sorted.length; displayIndex++) {
-        const { index: dataIndex } = sorted[displayIndex];
-        if (displayIndex !== dataIndex) {
-          this._displayToDataIndex.set(displayIndex, dataIndex);
-        }
-      }
-      return sorted.map(({ item }) => item);
-    });
-  }
   initializeEffects() {
     const rowOrderWatcher = (0, import_signals_core.effect)(() => {
-      touch(this._sortedRows.value);
+      touch(this._sorting.sortedRows.value);
       this._onRowOrderChanged?.();
     });
     this._ctx.onDispose(rowOrderWatcher);
@@ -868,7 +1029,7 @@ var TableModel = class extends import_context.Resource {
       const rowEffects = [];
       for (let row = start.row; row <= end.row; row++) {
         rowEffects.push((0, import_signals_core.effect)(() => {
-          const obj = this._sortedRows.value[row];
+          const obj = this._sorting.sortedRows.value[row];
           this?._table?.view?.target?.fields.forEach((field) => touch((0, import_echo_schema3.getValue)(obj, field.path)));
           this._onCellUpdate?.({
             row,
@@ -887,7 +1048,7 @@ var TableModel = class extends import_context.Resource {
   * @param {(value: any) => any} update - A function that takes the current value and returns the updated value.
   */
   updateCellData({ col, row }, update) {
-    const dataRow = this._displayToDataIndex.get(row) ?? row;
+    const dataRow = this._sorting.getDataIndex(row);
     const fields = this.table.view?.target?.fields ?? [];
     const field = fields[col];
     const value = (0, import_echo_schema3.getValue)(this._rows.value[dataRow], field.path);
@@ -903,9 +1064,6 @@ var TableModel = class extends import_context.Resource {
     }
     const field = this.table.view.target?.fields.find((field2) => field2.id === fieldId);
     if (field && this._onDeleteColumn) {
-      if (this._sorting.value?.fieldId === fieldId) {
-        this.clearSort();
-      }
       this._onDeleteColumn(field.id);
     }
   }
@@ -923,18 +1081,6 @@ var TableModel = class extends import_context.Resource {
     }
   }
   //
-  // Sorting
-  //
-  setSort(fieldId, direction) {
-    this._sorting.value = {
-      fieldId,
-      direction
-    };
-  }
-  clearSort() {
-    this._sorting.value = void 0;
-  }
-  //
   // Pinning
   //
   // TODO(burdon): Change to setPinned(on/off).
@@ -945,11 +1091,17 @@ var TableModel = class extends import_context.Resource {
     this._pinnedRows.top = this._pinnedRows.top.filter((index) => index !== rowIndex);
     this._pinnedRows.bottom = this._pinnedRows.bottom.filter((index) => index !== rowIndex);
   }
+  //
+  // View operations
+  //
+  saveView() {
+    this._sorting.save();
+  }
 };
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/modal-controller.ts";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/modal-controller.ts";
 var ModalController = class {
   constructor() {
-    this._state = (0, import_signals_core3.signal)({
+    this._state = (0, import_signals_core4.signal)({
       type: "closed"
     });
     this._triggerRef = {
@@ -1009,8 +1161,8 @@ var ModalController = class {
           onCreate
         };
       } else {
-        import_log2.log.warn("anchor cell not found while creating new ref", void 0, {
-          F: __dxlog_file3,
+        import_log.log.warn("anchor cell not found while creating new ref", void 0, {
+          F: __dxlog_file2,
           L: 86,
           S: this,
           C: (f, a) => f(...a)
@@ -1031,7 +1183,7 @@ var ModalController = class {
   }
 };
 var TablePresentation = class {
-  constructor(model, _visibleRange = (0, import_signals_core4.signal)({
+  constructor(model, _visibleRange = (0, import_signals_core5.signal)({
     start: {
       row: 0,
       col: 0
@@ -1070,22 +1222,23 @@ var TablePresentation = class {
       const { props } = this.model.projection.getFieldProjection(field.id);
       const cell = {
         get value() {
-          const value = (0, import_echo_schema5.getValue)(obj, field.path);
+          const value = (0, import_echo_schema6.getValue)(obj, field.path);
           if (value == null) {
             return "";
           }
           switch (props.format) {
-            case import_echo_schema5.FormatEnum.Boolean: {
+            case import_echo_schema6.FormatEnum.Boolean:
+            case import_echo_schema6.FormatEnum.SingleSelect: {
               return "";
             }
-            case import_echo_schema5.FormatEnum.Ref: {
+            case import_echo_schema6.FormatEnum.Ref: {
               if (!field.referencePath) {
                 return "";
               }
-              return (0, import_echo_schema5.getValue)(value.target, field.referencePath);
+              return (0, import_echo_schema6.getValue)(value.target, field.referencePath);
             }
             default: {
-              return (0, import_react_ui_form5.formatForDisplay)({
+              return (0, import_react_ui_form6.formatForDisplay)({
                 type: props.type,
                 format: props.format,
                 value
@@ -1095,22 +1248,22 @@ var TablePresentation = class {
         }
       };
       const classes = [];
-      const formatClasses = (0, import_react_ui_form5.cellClassesForFieldType)({
+      const formatClasses = (0, import_react_ui_form6.cellClassesForFieldType)({
         type: props.type,
         format: props.format
       });
       if (formatClasses) {
         classes.push(formatClasses);
       }
-      const rowSelectionClasses = (0, import_react_ui_form5.cellClassesForRowSelection)(this.model.selection.isObjectSelected(obj));
+      const rowSelectionClasses = (0, import_react_ui_form6.cellClassesForRowSelection)(this.model.selection.isObjectSelected(obj));
       if (rowSelectionClasses) {
         classes.push(rowSelectionClasses);
       }
       if (classes.length > 0) {
         cell.className = (0, import_react_ui_theme2.mx)(classes.flat());
       }
-      if (props.format === import_echo_schema5.FormatEnum.Ref && props.referenceSchema) {
-        const targetObj = (0, import_echo_schema5.getValue)(obj, field.path)?.target;
+      if (props.format === import_echo_schema6.FormatEnum.Ref && props.referenceSchema) {
+        const targetObj = (0, import_echo_schema6.getValue)(obj, field.path)?.target;
         if (targetObj) {
           cell.accessoryHtml = tableButtons.referencedCell.render({
             targetId: targetObj.id,
@@ -1118,8 +1271,8 @@ var TablePresentation = class {
           });
         }
       }
-      if (props.format === import_echo_schema5.FormatEnum.Boolean) {
-        const value = (0, import_echo_schema5.getValue)(obj, field.path);
+      if (props.format === import_echo_schema6.FormatEnum.Boolean) {
+        const value = (0, import_echo_schema6.getValue)(obj, field.path);
         cell.accessoryHtml = tableControls.switch.render({
           colIndex,
           rowIndex: displayIndex,
@@ -1127,6 +1280,16 @@ var TablePresentation = class {
         });
         cell.readonly = true;
       }
+      if (props.format === import_echo_schema6.FormatEnum.SingleSelect) {
+        const value = (0, import_echo_schema6.getValue)(obj, field.path);
+        const options = this.model.projection.getFieldProjection(field.id).props.options;
+        if (options) {
+          const option = options.find((o) => o.id === value);
+          if (option) {
+            cell.accessoryHtml = `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
+          }
+        }
+      }
       const idx = (0, import_react_ui_grid3.toPlaneCellIndex)({
         col: colIndex,
         row: displayIndex
@@ -1149,6 +1312,8 @@ var TablePresentation = class {
     const fields = this.model.table.view?.target?.fields ?? [];
     for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
       const { field, props } = this.model.projection.getFieldProjection(fields[col].id);
+      const sorting = this.model.sorting?.sorting;
+      const direction = sorting?.fieldId === field.id ? sorting.direction : void 0;
       cells[(0, import_react_ui_grid3.toPlaneCellIndex)({
         col,
         row: 0
@@ -1157,9 +1322,16 @@ var TablePresentation = class {
         value: props.title ?? field.path,
         readonly: true,
         resizeHandle: "col",
-        accessoryHtml: tableButtons.columnSettings.render({
+        accessoryHtml: `
+          ${direction !== void 0 ? tableButtons.sort.render({
+          fieldId: field.id,
+          direction
+        }) : ""}
+          ${tableButtons.columnSettings.render({
           fieldId: field.id
-        })
+        })}
+        `,
+        className: "!bg-gridHeader"
       };
     }
     return cells;
@@ -1168,7 +1340,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_form5.cellClassesForRowSelection)(isSelected);
+      const classes = (0, import_react_ui_form6.cellClassesForRowSelection)(isSelected);
       cells[(0, import_react_ui_grid3.toPlaneCellIndex)({
         col: 0,
         row
@@ -1188,7 +1360,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_form5.cellClassesForRowSelection)(isSelected);
+      const classes = (0, import_react_ui_form6.cellClassesForRowSelection)(isSelected);
       cells[(0, import_react_ui_grid3.toPlaneCellIndex)({
         col: 0,
         row
@@ -1209,13 +1381,14 @@ var TablePresentation = class {
         col: 0,
         row: 0
       })]: {
-        value: "",
         accessoryHtml: tableControls.checkbox.render({
           rowIndex: 0,
           header: true,
           checked: this.model.selection.allRowsSeleted.value
         }),
-        readonly: true
+        className: "!bg-gridHeader",
+        readonly: true,
+        value: ""
       }
     };
   }
@@ -1225,11 +1398,12 @@ var TablePresentation = class {
         col: 0,
         row: 0
       })]: {
-        value: "",
         accessoryHtml: tableButtons.addColumn.render({
           disabled: (this.model.table.view?.target?.fields?.length ?? 0) >= import_schema2.VIEW_FIELD_LIMIT
         }),
-        readonly: true
+        className: "!bg-gridHeader",
+        readonly: true,
+        value: ""
       }
     };
   }
@@ -1269,7 +1443,7 @@ var completion = ({ debug, onQuery, onMatch }) => {
     })
   ];
 };
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx";
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx";
 var newValue = Symbol.for("newValue");
 var createOption = (text) => ({
   [newValue]: true,
@@ -1287,7 +1461,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     const field = model.projection.view.fields[col];
     const fieldProjection2 = model.projection.getFieldProjection(field.id);
     (0, import_invariant3.invariant)(fieldProjection2, void 0, {
-      F: __dxlog_file4,
+      F: __dxlog_file3,
       L: 67,
       S: void 0,
       A: [
@@ -1361,7 +1535,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     ];
     if (onQuery) {
       switch (fieldProjection.props.format) {
-        case import_echo_schema6.FormatEnum.Ref: {
+        case import_echo_schema7.FormatEnum.Ref: {
           extension2.push([
             completion({
               onQuery: (text) => onQuery(fieldProjection, text),
@@ -1435,7 +1609,7 @@ var determineNavigationDelta = ({ key, shift }) => {
   }
   return shift ? -1 : 1;
 };
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/Table/Table.tsx";
+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 = {
@@ -1503,6 +1677,10 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentat
           modals.showReferencePanel(data.targetId, data.schemaId);
           break;
         }
+        case "sort": {
+          model?.sorting?.toggleSort(data.fieldId);
+          break;
+        }
       }
       return;
     }
@@ -1603,8 +1781,8 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentat
     if (model && props.referenceSchema && field.referencePath) {
       const space = (0, import_echo.getSpace)(model.table);
       (0, import_invariant.invariant)(space, void 0, {
-        F: __dxlog_file5,
-        L: 260,
+        F: __dxlog_file4,
+        L: 264,
         S: void 0,
         A: [
           "space",
@@ -1687,73 +1865,76 @@ var Table = {
   Root: TableRoot,
   Main: TableMain
 };
-var buttonStyles = "min-bs-0 p-2";
-var tooltipProps = {
-  side: "top",
-  classNames: "z-10"
-};
-var ToolbarSeparator = () => /* @__PURE__ */ import_react9.default.createElement("div", {
-  role: "separator",
-  className: "grow"
-});
-var ToolbarButton = ({ icon, children, ...props }) => {
-  return /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.Tooltip.Root, null, /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.Toolbar.Button, {
-    variant: "ghost",
-    ...props,
-    classNames: buttonStyles
-  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.Icon, {
-    icon,
-    size: 5
-  }), /* @__PURE__ */ import_react9.default.createElement("span", {
-    className: "sr-only"
-  }, children))), /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.Tooltip.Portal, null, /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.Tooltip.Content, tooltipProps, children, /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.Tooltip.Arrow, null))));
-};
-var [ToolbarContextProvider, useToolbarContext] = (0, import_react_context.createContext)("Toolbar");
-var ToolbarRoot = ({ classNames, children, onAction }) => {
-  return /* @__PURE__ */ import_react8.default.createElement(ToolbarContextProvider, {
-    onAction
-  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui7.Toolbar.Root, {
-    classNames: [
-      "is-full shrink-0 overflow-x-auto overflow-y-hidden p-1 attention-surface",
-      classNames
-    ]
-  }, children));
-};
-var Editing = () => {
-  const { onAction } = useToolbarContext("Editing");
-  const { t } = (0, import_react_ui7.useTranslation)(translationKey);
-  return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(ToolbarButton, {
-    value: "add-row",
+var createTableToolbarActions = (state) => {
+  const add = (0, import_react_ui_menu.createMenuAction)("add-row", {
+    type: "add-row",
     icon: "ph--plus--regular",
-    "data-testid": "table.toolbar.add-row",
-    onClick: () => onAction?.({
-      type: "add-row"
-    })
-  }, t("add row")));
-};
-var Actions = () => {
-  const { onAction } = useToolbarContext("Actions");
-  const { t } = (0, import_react_ui7.useTranslation)(translationKey);
-  return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(ToolbarButton, {
-    value: "comment",
+    label: [
+      "add row",
+      {
+        ns: translationKey
+      }
+    ],
+    testId: "table.toolbar.add-row"
+  });
+  const save = (0, import_react_ui_menu.createMenuAction)("save-view", {
+    type: "save-view",
+    icon: "ph--floppy-disk--regular",
+    label: [
+      "save view label",
+      {
+        ns: translationKey
+      }
+    ],
+    testId: "table.toolbar.save-view",
+    iconOnly: false,
+    hidden: !state.viewDirty
+  });
+  const gap = (0, import_react_ui_menu.createGapSeparator)();
+  const comment = (0, import_react_ui_menu.createMenuAction)("comment", {
+    type: "comment",
     icon: "ph--chat-text--regular",
-    "data-testid": "table.toolbar.comment",
-    onClick: () => onAction?.({
-      type: "comment"
-    })
-  }, t("create comment")));
+    label: [
+      "create comment",
+      {
+        ns: translationKey
+      }
+    ],
+    testId: "table.toolbar.comment"
+  });
+  const nodes = [
+    add,
+    save,
+    ...gap.nodes,
+    comment
+  ];
+  return {
+    nodes,
+    edges: nodes.map(({ id: target }) => ({
+      source: "root",
+      target
+    }))
+  };
 };
-var Toolbar = {
-  Root: ToolbarRoot,
-  Editing,
-  Actions,
-  Separator: ToolbarSeparator
+var TableToolbar = ({ classNames, viewDirty, attendableId, onAction }) => {
+  const state = (0, import_react8.useMemo)(() => (0, import_live_object2.create)({
+    viewDirty
+  }), []);
+  const actionsCreator = (0, import_react8.useCallback)(() => createTableToolbarActions(state), [
+    state
+  ]);
+  const menu = (0, import_react_ui_menu.useMenuActions)(actionsCreator);
+  return /* @__PURE__ */ import_react8.default.createElement(import_react_ui_menu.MenuProvider, {
+    ...menu,
+    attendableId,
+    onAction
+  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui_menu.ToolbarMenu, {
+    classNames
+  }));
 };
 var useTableModel = ({ objects, table, projection, ...props }) => {
-  const [model, setModel] = (0, import_react10.useState)();
-  (0, import_react10.useEffect)(() => {
+  const [model, setModel] = (0, import_react9.useState)();
+  (0, import_react9.useEffect)(() => {
     if (!table || !projection) {
       return;
     }
@@ -1775,7 +1956,7 @@ var useTableModel = ({ objects, table, projection, ...props }) => {
     table,
     projection
   ]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (objects) {
       model?.setRows(objects);
     }
@@ -1783,6 +1964,26 @@ var useTableModel = ({ objects, table, projection, ...props }) => {
     model,
     objects
   ]);
+  const { select, clear } = (0, import_react_ui_attention2.useSelectionActions)([
+    table?.id,
+    table?.view?.target?.query.type
+  ].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:
@@ -1794,8 +1995,8 @@ var useTableModel = ({ objects, table, projection, ...props }) => {
   TableModel,
   TablePresentation,
   TableSchema,
+  TableToolbar,
   TableType,
-  Toolbar,
   initializeTable,
   renderCheckbox,
   renderSwitch,
@@ -1803,7 +2004,6 @@ var useTableModel = ({ objects, table, projection, ...props }) => {
   tableControls,
   touch,
   translations,
-  useTableModel,
-  useToolbarContext
+  useTableModel
 });
 //# sourceMappingURL=index.cjs.map