@dxos/react-ui-table 0.9.1-main.c7dcc2e112 → 0.9.1-staging.ee54ba693a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.9.1-main.c7dcc2e112",
+  "version": "0.9.1-staging.ee54ba693a",
   "description": "A table component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -58,58 +58,57 @@
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.6.0",
     "lodash.orderby": "^4.6.0",
-    "@dxos/async": "0.9.1-main.c7dcc2e112",
-    "@dxos/echo": "0.9.1-main.c7dcc2e112",
-    "@dxos/debug": "0.9.1-main.c7dcc2e112",
-    "@dxos/effect": "0.9.1-main.c7dcc2e112",
-    "@dxos/context": "0.9.1-main.c7dcc2e112",
-    "@dxos/invariant": "0.9.1-main.c7dcc2e112",
-    "@dxos/log": "0.9.1-main.c7dcc2e112",
-    "@dxos/random": "0.9.1-main.c7dcc2e112",
-    "@dxos/keys": "0.9.1-main.c7dcc2e112",
-    "@dxos/lit-grid": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-attention": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-components": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-editor": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-form": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-grid": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-list": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-menu": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-client": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-search": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-stack": "0.9.1-main.c7dcc2e112",
-    "@dxos/schema": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-syntax-highlighter": "0.9.1-main.c7dcc2e112",
-    "@dxos/types": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui-types": "0.9.1-main.c7dcc2e112",
-    "@dxos/util": "0.9.1-main.c7dcc2e112"
+    "@dxos/context": "0.9.1-staging.ee54ba693a",
+    "@dxos/async": "0.9.1-staging.ee54ba693a",
+    "@dxos/debug": "0.9.1-staging.ee54ba693a",
+    "@dxos/echo": "0.9.1-staging.ee54ba693a",
+    "@dxos/effect": "0.9.1-staging.ee54ba693a",
+    "@dxos/keys": "0.9.1-staging.ee54ba693a",
+    "@dxos/lit-grid": "0.9.1-staging.ee54ba693a",
+    "@dxos/invariant": "0.9.1-staging.ee54ba693a",
+    "@dxos/log": "0.9.1-staging.ee54ba693a",
+    "@dxos/random": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-client": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-attention": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-components": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-editor": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-form": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-grid": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-menu": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-list": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-search": "0.9.1-staging.ee54ba693a",
+    "@dxos/schema": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-syntax-highlighter": "0.9.1-staging.ee54ba693a",
+    "@dxos/types": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-types": "0.9.1-staging.ee54ba693a",
+    "@dxos/util": "0.9.1-staging.ee54ba693a"
   },
   "devDependencies": {
-    "@effect/platform": "0.96.1",
+    "@effect/platform": "0.96.2",
     "@types/lodash.orderby": "^4.6.9",
-    "@types/react": "~19.2.7",
+    "@types/react": "~19.2.17",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.21.3",
+    "effect": "3.21.4",
     "fast-check": "^3.19.0",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
     "vite": "^8.0.16",
-    "@dxos/lit-ui": "0.9.1-main.c7dcc2e112",
-    "@dxos/random": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-client": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui": "0.9.1-main.c7dcc2e112",
-    "@dxos/storybook-utils": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112",
-    "@dxos/test-utils": "0.9.1-main.c7dcc2e112"
+    "@dxos/lit-ui": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-client": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui": "0.9.1-staging.ee54ba693a",
+    "@dxos/random": "0.9.1-staging.ee54ba693a",
+    "@dxos/test-utils": "0.9.1-staging.ee54ba693a",
+    "@dxos/storybook-utils": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "@effect/platform": "0.96.1",
-    "effect": "3.21.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui": "0.9.1-main.c7dcc2e112"
+    "@effect/platform": "0.96.2",
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "@dxos/react-ui": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Table/Table.stories.tsx

@@ -7,7 +7,7 @@ import * as Schema from 'effect/Schema';
 import React, { useCallback } from 'react';
 import { expect, userEvent, waitFor, within } from 'storybook/test';
 
-import { DXN, Annotation, type Database, Format, Obj, type QueryAST, Ref, Type, View } from '@dxos/echo';
+import { Annotation, type Database, DXN, Format, Obj, type QueryAST, Ref, Type, View } from '@dxos/echo';
 import { type Mutable, PropertyMetaAnnotationId } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { random } from '@dxos/random';
@@ -150,7 +150,7 @@ const DefaultStory = () => {
   );
 };
 
-type DefaultStoryProps = { rows?: number };
+type StoryArgs = { rows?: number };
 
 //
 // Story definitions.
@@ -338,7 +338,7 @@ export const RequiredSchema: StoryObj = {
   },
 };
 
-export const Tags: Meta<DefaultStoryProps> = {
+export const Tags: Meta<StoryArgs> = {
   title: 'ui/react-ui-table/Table',
   render: DefaultStory,
   decorators: [

package/src/components/Table/Table.tsx

@@ -72,5 +72,6 @@ export const Table = {
 };
 
 export type { TableController, TableRootProps };
+export type { TableExportFormat } from './TableToolbar';
 
 export { useTableContext };

package/src/components/Table/TableToolbar.tsx

@@ -15,6 +15,7 @@ import {
   MenuRootProps,
   createGapSeparator,
   createMenuAction,
+  createMenuItemGroup,
   useMenuActions,
 } from '@dxos/react-ui-menu';
 
@@ -24,7 +25,9 @@ export type TableToolbarActionProperties = { type: TableToolbarActionType };
 
 export type TableToolbarAction = MenuAction<TableToolbarActionProperties>;
 
-export type TableToolbarActionType = 'add-row' | 'comment' | 'save-view';
+export type TableToolbarActionType = 'add-row' | 'comment' | 'save-view' | 'export-csv' | 'export-json' | 'export-xml';
+
+export type TableExportFormat = 'csv' | 'json' | 'xml';
 
 type TableToolbarState = Partial<{ viewDirty: boolean }>;
 
@@ -32,15 +35,18 @@ const createTableToolbarActions = ({
   stateAtom,
   onAdd,
   onSave,
+  onExport,
   customActions,
 }: {
   stateAtom: Atom.Atom<TableToolbarState>;
   onAdd?: () => void;
   onSave?: () => void;
+  onExport?: (format: TableExportFormat) => void;
   customActions?: Atom.Atom<ActionGraphProps>;
 }) =>
   Atom.make((get) => {
     const nodes: ActionGraphNodes = [];
+    const edges: ActionGraphEdges = [];
     if (onAdd) {
       const add = createMenuAction<TableToolbarActionProperties>('add-row', onAdd, {
         type: 'add-row' as const,
@@ -49,6 +55,7 @@ const createTableToolbarActions = ({
         testId: 'table.toolbar.add-row',
       });
       nodes.push(add);
+      edges.push({ source: 'root', target: add.id, relation: 'child' });
     }
     if (onSave) {
       const state = get(stateAtom);
@@ -61,10 +68,35 @@ const createTableToolbarActions = ({
         hidden: !state.viewDirty,
       });
       nodes.push(save);
+      edges.push({ source: 'root', target: save.id, relation: 'child' });
+    }
+    if (onExport) {
+      const exportGroup = createMenuItemGroup('export-rows', {
+        label: ['export-rows.menu', { ns: translationKey }],
+        icon: 'ph--export--regular',
+        iconOnly: true,
+        variant: 'dropdownMenu',
+      });
+      nodes.push(exportGroup);
+      edges.push({ source: 'root', target: exportGroup.id, relation: 'child' });
+
+      const formats: Array<{ format: TableExportFormat; type: TableToolbarActionType; label: string }> = [
+        { format: 'csv', type: 'export-csv', label: 'export-rows-csv.menu' },
+        { format: 'json', type: 'export-json', label: 'export-rows-json.menu' },
+        { format: 'xml', type: 'export-xml', label: 'export-rows-xml.menu' },
+      ];
+      for (const { format, type, label } of formats) {
+        const action = createMenuAction<TableToolbarActionProperties>(type, () => onExport(format), {
+          type,
+          label: [label, { ns: translationKey }],
+        });
+        nodes.push(action);
+        edges.push({ source: exportGroup.id, target: action.id, relation: 'child' });
+      }
     }
     const gap = createGapSeparator();
     nodes.push(...gap.nodes);
-    const edges: ActionGraphEdges = nodes.map(({ id: target }) => ({ source: 'root', target, relation: 'child' }));
+    edges.push(...gap.edges);
     if (customActions) {
       const custom = get(customActions);
       nodes.push(...custom.nodes);
@@ -81,11 +113,12 @@ export type TableToolbarProps = Pick<MenuRootProps, 'attendableId'> &
   TableToolbarState & {
     onAdd?: () => void;
     onSave?: () => void;
+    onExport?: (format: TableExportFormat) => void;
     customActions?: Atom.Atom<ActionGraphProps>;
   };
 
 export const TableToolbar = composable<HTMLDivElement, TableToolbarProps>(
-  ({ attendableId, viewDirty, onAdd, onSave, customActions, ...props }, forwardedRef) => {
+  ({ attendableId, viewDirty, onAdd, onSave, onExport, customActions, ...props }, forwardedRef) => {
     const registry = useContext(RegistryContext);
     const stateAtom = useMemo(() => Atom.make<TableToolbarState>({ viewDirty }), []);
 
@@ -95,8 +128,8 @@ export const TableToolbar = composable<HTMLDivElement, TableToolbarProps>(
     }, [registry, stateAtom, viewDirty]);
 
     const actionsCreator = useMemo(
-      () => createTableToolbarActions({ stateAtom, onAdd, onSave, customActions }),
-      [stateAtom, onAdd, onSave, customActions],
+      () => createTableToolbarActions({ stateAtom, onAdd, onSave, onExport, customActions }),
+      [stateAtom, onAdd, onSave, onExport, customActions],
     );
     const menuActions = useMenuActions(actionsCreator);
 

package/src/components/TableCellEditor/TableCellEditor.stories.tsx

@@ -19,12 +19,12 @@ import { useTestTableModel } from '../../testing';
 import { Table } from '../../types';
 import { TableCellEditor } from './TableCellEditor';
 
-type DefaultStoryProps = {
+type StoryArgs = {
   editing: GridEditing;
 };
 
 // TODO(burdon): Broken layout.
-const DefaultStory = ({ editing }: DefaultStoryProps) => {
+const DefaultStory = ({ editing }: StoryArgs) => {
   const { model, table } = useTestTableModel();
 
   if (!model || !table) {

package/src/components/testing.ts

@@ -12,12 +12,14 @@ import { SchemaEx } from '@dxos/effect';
 import { random } from '@dxos/random';
 import { type ProjectionModel } from '@dxos/schema';
 
-export const TestSchema = Schema.Struct({
-  name: Schema.optional(Schema.String),
-  age: Schema.optional(Schema.Number),
-  active: Schema.optional(Schema.Boolean),
-  netWorth: Schema.optional(Schema.Number),
-}).pipe(Type.makeObject(DXN.make('com.example.type.test', '0.1.0')));
+export const TestSchema = Type.makeObject(DXN.make('com.example.type.test', '0.1.0'))(
+  Schema.Struct({
+    name: Schema.optional(Schema.String),
+    age: Schema.optional(Schema.Number),
+    active: Schema.optional(Schema.Boolean),
+    netWorth: Schema.optional(Schema.Number),
+  }),
+);
 
 export type TestItem = {
   name: string;

package/src/hooks/useTableModel.ts

@@ -6,7 +6,7 @@ import { RegistryContext } from '@effect-atom/atom-react';
 import { useContext, useEffect, useMemo, useState } from 'react';
 
 import { type Database, Obj } from '@dxos/echo';
-import { useSelection, useSelectionActions } from '@dxos/react-ui-attention';
+import { useSelection, useSelectionActions, useViewStateManagerOptional } from '@dxos/react-ui-attention';
 import { type ProjectionModel } from '@dxos/schema';
 
 import {
@@ -43,6 +43,7 @@ export const useTableModel = <T extends TableRow = TableRow>({
   ...props
 }: UseTableModelProps<T>): TableModel<T> | undefined => {
   const registry = useContext(RegistryContext);
+  const viewState = useViewStateManagerOptional();
   const selected = useSelection(object && Obj.getURI(object), 'multi');
   const initialSelection = useMemo(() => selected, [object]);
 
@@ -59,6 +60,7 @@ export const useTableModel = <T extends TableRow = TableRow>({
         object,
         projection,
         db,
+        viewState,
         change: createEchoChangeCallback<T>(object),
         features,
         rowActions,
@@ -75,7 +77,7 @@ export const useTableModel = <T extends TableRow = TableRow>({
       void model?.close();
     };
     // TODO(burdon): Trigger if callbacks change?
-  }, [registry, object, projection, features, rowActions, initialSelection]);
+  }, [registry, viewState, object, projection, features, rowActions, initialSelection]);
 
   // Update data when rows change.
   useEffect(() => {

package/src/model/index.ts

@@ -3,6 +3,7 @@
 //
 
 export * from './table-model';
+export * from './table-view-state';
 export * from './modal-controller';
 export * from './table-presentation';
 export type { SelectionMode } from './selection-model';

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

@@ -8,6 +8,7 @@ import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 
 import { DXN, Filter, JsonSchema, Query, Type } from '@dxos/echo';
 import { createEchoSchema } from '@dxos/echo/testing';
+import { LocalBackend, MemoryBackend, ViewStateManager } from '@dxos/react-ui-attention';
 import { ProjectionModel, ViewModel, createDirectChangeCallback } from '@dxos/schema';
 
 import { Table } from '../types';
@@ -115,12 +116,94 @@ describe('TableModel', () => {
   });
 });
 
-const Test = Schema.Struct({
-  title: Schema.String,
-  completed: Schema.Boolean,
-}).pipe(Type.makeObject(DXN.make('com.example.type.test', '0.1.0')));
+describe('TableModel sort view state', () => {
+  // Share `storage` (and the table object) across instances; a fresh registry/manager/model
+  // simulates a reload, proving the sort is externalized to the `local` view state keyed by the
+  // table URI rather than held per-model.
+  const disposables: LocalBackend[] = [];
+  afterEach(() => {
+    disposables.splice(0).forEach((backend) => backend.dispose());
+  });
 
-const createTableModel = (registry: Registry.Registry, props: Partial<TableModelProps> = {}): TableModel => {
+  test('column sort persists to the local view state and is restored after reload', async () => {
+    const storage = fakeStorage();
+    const schema = createEchoSchema(Type.getSchema(Test));
+    const view = ViewModel.make({ query: Query.select(Filter.type(schema)), jsonSchema: schema.jsonSchema });
+    const object = Table.make({ view });
+
+    // Each reopen builds a fresh registry/manager/projection over the SAME table object (and its view),
+    // so it exercises a real reload rather than reusing projection state across instances.
+    const reopen = async (): Promise<TableModel> => {
+      const registry = Registry.make();
+      const local = new LocalBackend({ registry, storage });
+      disposables.push(local);
+      const viewState = new ViewStateManager({ registry, backends: { memory: new MemoryBackend(), local } });
+      const projection = new ProjectionModel({
+        registry,
+        view,
+        baseSchema: schema.jsonSchema,
+        change: createDirectChangeCallback(view.projection, JsonSchema.toJsonSchema(Type.getSchema(schema))),
+      });
+      projection.normalizeView();
+      const model = new TableModel({
+        registry,
+        object,
+        projection,
+        viewState,
+        change: createTableDirectChangeCallback(object),
+      });
+      await model.open();
+      return model;
+    };
+
+    const first = await reopen();
+    const titleFieldId = first.projection.getFields().find((field) => field.path === 'title')!.id;
+    first.setSort(titleFieldId, 'asc');
+    expect(first.getSorting()).toEqual({ fieldId: titleFieldId, direction: 'asc' });
+    expect(JSON.parse(storage.getItem(`dxos:view-state:table-sort:${first.id}`)!)).toEqual({
+      fieldId: titleFieldId,
+      direction: 'asc',
+    });
+    await first.close();
+
+    // Reload: fresh registry/manager/projection over the same storage + table object.
+    const second = await reopen();
+    expect(second.getSorting()).toEqual({ fieldId: titleFieldId, direction: 'asc' });
+
+    second.clearSort();
+    expect(second.getSorting()).toBeUndefined();
+    await second.close();
+
+    // The cleared sort is also persisted: a further reload reads no sort.
+    const third = await reopen();
+    expect(third.getSorting()).toBeUndefined();
+    await third.close();
+  });
+});
+
+// Minimal in-memory Storage stand-in (no real localStorage in the test runner).
+const fakeStorage = (): Storage => {
+  const map = new Map<string, string>();
+  return {
+    get length() {
+      return map.size;
+    },
+    clear: () => map.clear(),
+    getItem: (key) => (map.has(key) ? map.get(key)! : null),
+    key: (index) => [...map.keys()][index] ?? null,
+    removeItem: (key) => void map.delete(key),
+    setItem: (key, value) => void map.set(key, value),
+  };
+};
+
+const Test = Type.makeObject(DXN.make('com.example.type.test', '0.1.0'))(
+  Schema.Struct({
+    title: Schema.String,
+    completed: Schema.Boolean,
+  }),
+);
+
+const createTableInputs = (registry: Registry.Registry): { object: Table.Table; projection: ProjectionModel } => {
   const schema = createEchoSchema(Type.getSchema(Test));
   const view = ViewModel.make({
     query: Query.select(Filter.type(schema)),
@@ -134,6 +217,11 @@ const createTableModel = (registry: Registry.Registry, props: Partial<TableModel
     change: createDirectChangeCallback(view.projection, JsonSchema.toJsonSchema(Type.getSchema(schema))),
   });
   projection.normalizeView();
+  return { object, projection };
+};
+
+const createTableModel = (registry: Registry.Registry, props: Partial<TableModelProps> = {}): TableModel => {
+  const { object, projection } = createTableInputs(registry);
   return new TableModel({
     registry,
     object,

package/src/model/table-model.ts

@@ -7,11 +7,12 @@ import { Atom, type Registry } from '@effect-atom/atom-react';
 import { Resource } from '@dxos/context';
 import { type Database, Format, Obj, Order, Query, type QueryAST, Ref, Type, type View } from '@dxos/echo';
 import { type JsonSchema as JsonSchemaType, toEffectSchema } from '@dxos/echo/JsonSchema';
-import { getSnapshot, type Mutable } from '@dxos/echo/Obj';
+import { type Mutable, getSnapshot } from '@dxos/echo/Obj';
 import { SchemaEx } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 import { EntityId } from '@dxos/keys';
 import { type Label } from '@dxos/react-ui';
+import { type ViewStateManager } from '@dxos/react-ui-attention';
 import { formatForEditing, parseValue } from '@dxos/react-ui-form';
 import {
   type DxGridAxisMeta,
@@ -25,16 +26,8 @@ import { type Table } from '../types';
 import { extractOrder } from '../util';
 import { compareValues } from '../util/sort';
 import { extractTagIds } from '../util/tag';
-
-/**
- * Field sort configuration.
- */
-export type FieldSortType = {
-  fieldId: string;
-  direction: QueryAST.OrderDirection;
-};
-
 import { type SelectionMode, SelectionModel } from './selection-model';
+import { type FieldSortType, tableSortAspect } from './table-view-state';
 
 /**
  * Callback type for wrapping mutations in Obj.update().
@@ -110,6 +103,12 @@ export type TableModelProps<T extends TableRow = TableRow> = {
   object: Table.Table;
   projection: ProjectionModel;
   db?: Database.Database;
+  /**
+   * Per-context UI state manager (from `@dxos/react-ui-attention`). When provided, the column sort is
+   * stored in the `tableSortAspect` view state keyed by the table URI; otherwise it falls back to an
+   * ephemeral atom (e.g. isolated stories/tests with no `ViewStateProvider`).
+   */
+  viewState?: ViewStateManager;
   /**
    * Callbacks to wrap mutations in Obj.update().
    * Use createEchoChangeCallback() for ECHO-backed objects or createDirectChangeCallback() for plain objects.
@@ -148,7 +147,10 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
 
   private readonly _rows: Atom.Writable<T[]>;
   private readonly _draftRows: Atom.Writable<DraftRow<T>[]>;
-  // In-memory sort state - changes are local until saved.
+  // Optional per-context UI state manager; when present the column sort is view-state-backed.
+  private readonly _viewState?: ViewStateManager;
+  // Per-user sort state - backed by the `tableSortAspect` view state (keyed by table URI) when a
+  // ViewStateManager is provided, else an ephemeral atom. Changes are local until saved to the view.
   private readonly _inMemorySort: Atom.Writable<FieldSortType | undefined>;
   // Derived atom for persisted sort from view.query.ast.
   private readonly _persistedSort: Atom.Atom<FieldSortType | undefined>;
@@ -170,6 +172,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     object,
     projection,
     db,
+    viewState,
     change,
     features = {},
     initialSelection = [],
@@ -185,6 +188,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     super();
     this._registry = registry;
     this._object = object;
+    this._viewState = viewState;
     this._projection = projection;
     this._projection.normalizeView();
     this._db = db;
@@ -205,7 +209,11 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     });
     this._rows = Atom.make<T[]>([]);
     this._draftRows = Atom.make<DraftRow<T>[]>([]);
-    this._inMemorySort = Atom.make<FieldSortType | undefined>(undefined);
+    // View-state-backed atom survives remount/reload (local backend, keyed by table URI); the
+    // ephemeral fallback preserves prior behaviour when no ViewStateManager is supplied.
+    this._inMemorySort = this._viewState
+      ? this._viewState.atom(tableSortAspect, this.id)
+      : Atom.make<FieldSortType | undefined>(undefined);
     this._cellUpdateCounter = Atom.make<number>(0);
 
     // Create derived atom for persisted sort from view.query.ast.
@@ -854,11 +862,19 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       return;
     }
 
-    // Update in-memory sort (local changes).
-    this._registry.set(this._inMemorySort, {
-      fieldId,
-      direction,
-    });
+    this._writeSort({ fieldId, direction });
+  }
+
+  /**
+   * Writes the per-user sort, routing through the ViewStateManager (so the `local` backend persists)
+   * when one is configured, otherwise updating the ephemeral atom directly.
+   */
+  private _writeSort(value: FieldSortType | undefined): void {
+    if (this._viewState) {
+      this._viewState.set(tableSortAspect, this.id, value);
+    } else {
+      this._registry.set(this._inMemorySort, value);
+    }
   }
 
   /**
@@ -879,7 +895,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
    * Clears the in-memory sort order.
    */
   public clearSort(): void {
-    this._registry.set(this._inMemorySort, undefined);
+    this._writeSort(undefined);
   }
 
   /**
@@ -912,8 +928,8 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       });
     }
 
-    // Clear in-memory sort since it's now persisted.
-    this._registry.set(this._inMemorySort, undefined);
+    // Clear per-user sort since it's now persisted to the view.
+    this._writeSort(undefined);
   }
 
   /**

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

@@ -86,10 +86,12 @@ describe('TablePresentation', () => {
   });
 });
 
-const Test = Schema.Struct({
-  title: Schema.String,
-  count: Schema.Number,
-}).pipe(Type.makeObject(DXN.make('com.example.type.test', '0.1.0')));
+const Test = Type.makeObject(DXN.make('com.example.type.test', '0.1.0'))(
+  Schema.Struct({
+    title: Schema.String,
+    count: Schema.Number,
+  }),
+);
 
 const createTableModel = (registry: Registry.Registry, props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Type.getSchema(Test));

package/src/model/table-presentation.ts

@@ -214,6 +214,15 @@ export class TablePresentation<T extends TableRow = TableRow> {
       }
     }
 
+    // URLs.
+    if (props.format === Format.TypeFormat.URL) {
+      const value = SchemaEx.getValue(obj, field.path);
+      const href = typeof value === 'string' ? safeHttpUrl(value) : undefined;
+      if (href) {
+        cell.accessoryHtml = `<div role="none" class="absolute end-0 inset-y-0 p-(--dx-grid-cell-content-padding-block)"><a href="${escapeHtmlAttribute(href)}" target="_blank" rel="noopener noreferrer" class="dx-button w-6 aspect-square min-h-0" data-dx-grid-action="accessory"><dx-icon icon="ph--arrow-square-out--regular"/></a></div>`;
+      }
+    }
+
     // Booleans.
     if (props.format === Format.TypeFormat.Boolean) {
       const value = SchemaEx.getValue(obj, field.path);
@@ -462,6 +471,27 @@ export class TablePresentation<T extends TableRow = TableRow> {
   }
 }
 
+/**
+ * Parses a cell value as an HTTP(S) URL, returning the normalized href or `undefined`.
+ * Restricting to http/https keeps `javascript:`/`data:` URLs out of the rendered anchor.
+ */
+const safeHttpUrl = (value: string): string | undefined => {
+  try {
+    const normalized = /^https?:\/\//i.test(value) ? value : `https://${value}`;
+    const url = new URL(normalized);
+    return url.protocol === 'http:' || url.protocol === 'https:' ? url.href : undefined;
+  } catch {
+    return undefined;
+  }
+};
+
+/**
+ * Escapes a string for safe interpolation into a double-quoted HTML attribute, since
+ * `accessoryHtml` is injected into the grid via `unsafeStatic`.
+ */
+const escapeHtmlAttribute = (value: string): string =>
+  value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
 export const cellClassesForRowSelection = (selected: boolean, selectionMode: SelectionMode) => {
   if (!selected) {
     if (selectionMode === 'single') {