@dxos/react-ui-table 0.8.4-main.7ace549 → 0.8.4-main.937b3ca

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

@@ -2,14 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Registry } from '@effect-atom/atom-react';
 import * as Schema from 'effect/Schema';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { Filter, Query } from '@dxos/echo';
-import { TypedObject } from '@dxos/echo/internal';
+import { Filter, Query, Type } from '@dxos/echo';
 import { createEchoSchema } from '@dxos/echo/testing';
-import { live } from '@dxos/live-object';
-import { ProjectionModel, View } from '@dxos/schema';
+import { ProjectionModel, View, createDirectChangeCallback } from '@dxos/schema';
 
 import { Table } from '../types';
 
@@ -17,48 +16,53 @@ import { TableModel, type TableModelProps } from './table-model';
 import { TablePresentation } from './table-presentation';
 
 describe('TablePresentation', () => {
-  describe('row reactivity', () => {
+  describe('getCells', () => {
+    let registry: Registry.Registry;
     let data: any[];
-    let updateCount: number;
     let model: any;
     let presentation: TablePresentation;
 
     beforeEach(async () => {
-      updateCount = 0;
-      ({ data } = live({
-        data: [
-          { title: 'A', count: 1 },
-          { title: 'B', count: 2 },
-        ],
-      }));
-
-      model = createTableModel({
-        onCellUpdate: () => updateCount++,
-      });
-      model.setRows(data);
+      registry = Registry.make();
+      data = [
+        { id: '1', title: 'A', count: 1 },
+        { id: '2', title: 'B', count: 2 },
+      ];
+
+      model = createTableModel(registry, {});
       await model.open();
-      presentation = new TablePresentation(model);
+      model.setRows(data);
+      presentation = new TablePresentation(registry, model);
     });
 
-    it('should update with row-level reactivity', () => {
-      // Set up visible range to include our test data.
-      presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 1, col: 2 } }, 'grid');
+    it('should return cells for the visible range', () => {
+      const cells = presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 1, col: 2 } }, 'grid');
+
+      // Verify that cells are returned for the range. The exact column indices depend on the projection.
+      const cellKeys = Object.keys(cells);
+      expect(cellKeys.length).toBeGreaterThan(0);
+
+      // Check that values from the data are present in the cells.
+      const values = Object.values(cells).map((c) => c.value);
+      expect(values).toContain('A');
+      expect(values).toContain('B');
+    });
 
-      // Trigger a row update.
+    it('should reflect row data changes', () => {
+      // Update the row data and refresh.
       data[0].title = 'New Value';
-      expect(updateCount).toBe(2);
+      model.setRows(data);
 
       // Verify the new value through getCells.
-      const cells = presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 0, col: 0 } }, 'grid');
-      expect(cells['0,0']?.value).toBe('New Value');
+      const cells = presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 0, col: 2 } }, 'grid');
+      const values = Object.values(cells).map((c) => c.value);
+      expect(values).toContain('New Value');
     });
 
-    it('should update reactively when adding a new row', () => {
-      // Set up visible range to include our test data.
-      presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 2, col: 2 } }, 'grid');
-
-      data.push({ title: 'C', count: 3 });
-      expect(updateCount).toBe(2);
+    it('should reflect new rows', () => {
+      // Add a new row.
+      data.push({ id: '3', title: 'C', count: 3 });
+      model.setRows(data);
 
       const cells = presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 2, col: 2 } }, 'grid');
 
@@ -67,17 +71,12 @@ describe('TablePresentation', () => {
       expect(cells['1,2']?.value).toBe('3');
     });
 
-    it('should handle combined operations reactively', () => {
-      // Set up visible range.
-      presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 2, col: 2 } }, 'grid');
-
-      // Multiple operations.
+    it('should handle row modifications', () => {
+      // Modify the data.
       data[0].title = 'Updated A';
-      data.push({ title: 'C', count: 3, completed: true });
+      data.push({ id: '3', title: 'C', count: 3 });
       data.splice(1, 1);
-
-      // We expect one update per operation affecting visible rows.
-      expect(updateCount).toBe(4);
+      model.setRows(data);
 
       const cells = presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 1, col: 2 } }, 'grid');
 
@@ -88,18 +87,29 @@ describe('TablePresentation', () => {
   });
 });
 
-class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
+const Test = Schema.Struct({
   title: Schema.String,
   count: Schema.Number,
-}) {}
-
-const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
+}).pipe(
+  Type.object({
+    typename: 'example.com/type/Test',
+    version: '0.1.0',
+  }),
+);
+
+const createTableModel = (registry: Registry.Registry, props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
   const view = View.make({
     query: Query.select(Filter.type(schema)),
     jsonSchema: schema.jsonSchema,
   });
   const object = Table.make({ view });
-  const projection = new ProjectionModel(schema.jsonSchema, view.projection);
-  return new TableModel({ object, projection, ...props });
+  const projection = new ProjectionModel({
+    registry,
+    view,
+    baseSchema: schema.jsonSchema,
+    change: createDirectChangeCallback(view.projection, schema.jsonSchema),
+  });
+  projection.normalizeView();
+  return new TableModel({ registry, object, projection, ...props });
 };

package/src/model/table-presentation.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { signal } from '@preact/signals-core';
+import { Atom, type Registry } from '@effect-atom/atom-react';
 import * as Predicate from 'effect/Predicate';
 
 import { Obj } from '@dxos/echo';
@@ -15,8 +15,8 @@ import {
   type DxGridPlaneRange,
   toPlaneCellIndex,
 } from '@dxos/react-ui-grid';
-import { mx } from '@dxos/react-ui-theme';
 import { type FieldType, VIEW_FIELD_LIMIT } from '@dxos/schema';
+import { mx } from '@dxos/ui-theme';
 
 import { tableButtons, tableControls } from '../util';
 
@@ -29,15 +29,20 @@ import { type TableModel, type TableRow } from './table-model';
  * different grid planes.
  */
 export class TablePresentation<T extends TableRow = TableRow> {
+  private readonly _registry: Registry.Registry;
+  private readonly _visibleRange: Atom.Writable<DxGridPlaneRange>;
   private fieldProjectionCache = new Map<string, ReturnType<typeof this.model.projection.getFieldProjection>>();
 
   constructor(
+    registry: Registry.Registry,
     private readonly model: TableModel<T>,
-    private readonly _visibleRange = signal<DxGridPlaneRange>({
+  ) {
+    this._registry = registry;
+    this._visibleRange = Atom.make<DxGridPlaneRange>({
       start: { row: 0, col: 0 },
       end: { row: 0, col: 0 },
-    }),
-  ) {}
+    });
+  }
 
   public getCells(range: DxGridPlaneRange, plane: DxGridPlane): DxGridPlaneCells {
     // Clear cache at the start of each render pass
@@ -47,7 +52,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
 
     switch (plane) {
       case 'grid':
-        this._visibleRange.value = range;
+        this._registry.set(this._visibleRange, range);
         cells = this.getMainGridCells(range);
         break;
       case 'frozenRowsStart':
@@ -260,7 +265,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
 
   private getMainGridCells(range: DxGridPlaneRange): DxGridPlaneCells {
     const cells: DxGridPlaneCells = {};
-    const fields = this.model.projection?.fields ?? [];
+    const fields = this.model.projection?.getFields() ?? [];
 
     for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
       for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
@@ -269,7 +274,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
           continue;
         }
 
-        this.createDataCell(cells, this.model.rows.value[row], field, col, row);
+        this.createDataCell(cells, this.model.getRows()[row], field, col, row);
       }
     }
 
@@ -278,8 +283,8 @@ export class TablePresentation<T extends TableRow = TableRow> {
 
   private getDraftRowCells(range: DxGridPlaneRange): DxGridPlaneCells {
     const cells: DxGridPlaneCells = {};
-    const fields = this.model.projection?.fields ?? [];
-    const draftRows = this.model.draftRows.value;
+    const fields = this.model.projection?.getFields() ?? [];
+    const draftRows = this.model.getDraftRows();
 
     // Return cells of the CTA row if no draft row is active
     if (draftRows.length === 0) {
@@ -319,11 +324,11 @@ export class TablePresentation<T extends TableRow = TableRow> {
 
   private getHeaderCells(range: DxGridPlaneRange): DxGridPlaneCells {
     const cells: DxGridPlaneCells = {};
-    const fields = this.model.projection?.fields ?? [];
+    const fields = this.model.projection?.getFields() ?? [];
+    const currentSort = this.model.getSorting();
     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 : undefined;
+      const direction = currentSort?.fieldId === field.id ? currentSort.direction : undefined;
 
       cells[toPlaneCellIndex({ col, row: 0 })] = {
         // TODO(burdon): Use same logic as form for fallback title.
@@ -389,7 +394,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
         accessoryHtml: tableControls.checkbox.render({
           rowIndex: 0,
           header: true,
-          checked: this.model.selection.allRowsSeleted.value,
+          checked: this.model.selection.allRowsSelected,
         }),
         className: '!bg-toolbarSurface',
         readonly: true,
@@ -403,7 +408,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
       [toPlaneCellIndex({ col: 0, row: 0 })]: {
         accessoryHtml: this.model.features.schemaEditable
           ? tableButtons.addColumn.render({
-              disabled: (this.model.projection?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT,
+              disabled: (this.model.projection?.getFields()?.length ?? 0) >= VIEW_FIELD_LIMIT,
             })
           : undefined,
         className: '!bg-toolbarSurface',
@@ -415,7 +420,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
 
   private getDraftActionCells(range: DxGridPlaneRange): DxGridPlaneCells {
     const cells: DxGridPlaneCells = {};
-    const draftRows = this.model.draftRows.value;
+    const draftRows = this.model.getDraftRows();
 
     // Return cells of the CTA row if no draft row is active
     if (draftRows.length === 0) {
@@ -442,7 +447,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
 
   private getDraftIconCells(range: DxGridPlaneRange): DxGridPlaneCells {
     const cells: DxGridPlaneCells = {};
-    const draftRows = this.model.draftRows.value;
+    const draftRows = this.model.getDraftRows();
 
     for (let row = range.start.row; row <= range.end.row; row++) {
       cells[toPlaneCellIndex({ col: 0, row })] = {

package/src/playwright/TableManager.ts

@@ -57,8 +57,8 @@ export class TableManager {
     await this.page.getByTestId(TABLE_SELECTORS.newColumnButton).click();
     await this.page.getByRole('combobox').click();
     await this.page.getByLabel(format).click();
-    await this.page.getByPlaceholder('Property label.').click();
-    await this.page.getByPlaceholder('Property label.').fill(label);
+    await this.page.getByPlaceholder('Property label').click();
+    await this.page.getByPlaceholder('Property label').fill(label);
     await this.page.getByRole('button', { name: 'Save' }).click();
   }
 }

package/src/playwright/playwright.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
   ...e2ePreset(import.meta.dirname),
   // TODO(wittjosiah): Avoid hard-coding ports.
   webServer: {
-    command: 'moon run storybook:serve-e2e -- --port=9004',
+    command: 'moon run storybook-react:serve-e2e -- --port=9004',
     port: 9004,
     reuseExistingServer: false,
   },

package/src/playwright/smoke.spec.ts

@@ -71,6 +71,7 @@ test.describe('Table', () => {
     const table = new TableManager(page);
 
     await table.grid.ready();
+    await expect(page.getByRole('gridcell', { name: 'Sapiente.' })).toHaveCount(1);
     await table.deleteRow(0);
     await expect(page.getByRole('gridcell', { name: 'Sapiente.' })).toHaveCount(0);
     await page.close();
@@ -88,7 +89,7 @@ test.describe('Table', () => {
     // Delete action affects all selected rows.
     await table.deleteRow(0);
 
-    await expect(page.getByRole('gridcell', { name: 'Sapiente.' })).toHaveCount(0);
+    await expect(page.getByRole('gridcell', { name: 'Aut.' })).toHaveCount(0);
     await expect(page.getByRole('gridcell', { name: 'Beatae.' })).toHaveCount(0);
     await expect(table.grid.cellsWithinPlane('grid')).toHaveCount(0);
     await page.close();
@@ -153,7 +154,7 @@ test.describe('Table', () => {
     // Assert the first two switch checkboxes are checked.
     await expect(page.getByTestId('table-switch').first()).toBeChecked();
     await expect(page.getByTestId('table-switch').nth(1)).toBeChecked();
-    await expect(table.grid.cell(0, 0, 'grid')).toHaveText('Sapiente.');
+    await expect(table.grid.cell(0, 0, 'grid')).toHaveText('Aut.');
     await expect(table.grid.cell(0, 1, 'grid')).toHaveText('Beatae.');
 
     await page.close();

package/src/testing/useTestTableModel.ts

@@ -2,15 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
-import type * as Schema from 'effect/Schema';
-import { type RefObject, useCallback, useMemo, useRef } from 'react';
+import { RegistryContext } from '@effect-atom/atom-react';
+import { type RefObject, useCallback, useContext, useMemo, useRef } from 'react';
 
+import { type Database, type Type } from '@dxos/echo';
 import { isMutable } from '@dxos/echo/internal';
-import { useGlobalFilteredObjects } from '@dxos/plugin-search';
 import { faker } from '@dxos/random';
-import { type Client, useClient } from '@dxos/react-client';
-import { Filter, type Space, useQuery, useSchema } from '@dxos/react-client/echo';
-import { useClientProvider } from '@dxos/react-client/testing';
+import { Filter, useQuery, useSchema } from '@dxos/react-client/echo';
+import { useClientStory } from '@dxos/react-client/testing';
+import { useGlobalFilteredObjects } from '@dxos/react-ui-searchlist';
 import { type ProjectionModel, getTypenameFromQuery } from '@dxos/schema';
 
 import { type TableController } from '../components';
@@ -20,15 +20,14 @@ import { Table } from '../types';
 
 faker.seed(0); // NOTE(ZaymonFC): Required for smoke tests.
 
-export type TestTableModel = {
-  schema: Schema.Schema.AnyNoContext | undefined;
+export type TestTableModel<T extends Type.Obj.Any = Type.Obj.Any> = {
+  schema: T | undefined;
   table: Table.Table | undefined;
   projection: ProjectionModel | undefined;
   tableRef: RefObject<TableController | null>;
   model: TableModel | undefined;
   presentation: TablePresentation | undefined;
-  space: Space | undefined;
-  client: Client | undefined;
+  db: Database.Database | undefined;
   handleInsertRow: () => void;
   handleSaveView: () => void;
   handleDeleteRows: (rowIndex: number, objects: any[]) => void;
@@ -39,15 +38,16 @@ export type TestTableModel = {
  * Custom hook to create and manage a test table model for storybook demonstrations.
  * Provides table data, schema, and handlers for table operations.
  */
-export const useTestTableModel = (): TestTableModel => {
-  const client = useClient();
-  const { space } = useClientProvider();
+export const useTestTableModel = <T extends Type.Obj.Any = Type.Obj.Any>(): TestTableModel<T> => {
+  const registry = useContext(RegistryContext);
+  const { space } = useClientStory();
+  const db = space?.db;
 
-  const tables = useQuery(space, Filter.type(Table.Table));
+  const tables = useQuery(space?.db, Filter.type(Table.Table));
   const table = tables.at(0);
   const typename = table?.view.target?.query ? getTypenameFromQuery(table.view.target.query.ast) : undefined;
-  const schema = useSchema(client, space, typename);
-  const projection = useProjectionModel(schema, table);
+  const schema = useSchema<T>(space?.db, typename);
+  const projection = useProjectionModel(schema, table, registry);
 
   const features = useMemo(
     () => ({
@@ -58,7 +58,7 @@ export const useTestTableModel = (): TestTableModel => {
     [schema],
   );
 
-  const objects = useQuery(space, schema ? Filter.type(schema) : Filter.nothing());
+  const objects = useQuery(db, schema ? Filter.type(schema) : Filter.nothing());
   const filteredObjects = useGlobalFilteredObjects(objects);
 
   const tableRef = useRef<TableController>(null);
@@ -70,15 +70,15 @@ export const useTestTableModel = (): TestTableModel => {
     tableRef.current?.update?.();
   }, []);
 
-  const addRow = useAddRow({ space, schema });
+  const addRow = useAddRow({ db, schema });
 
   const handleDeleteRows = useCallback(
     (_: number, objects: any[]) => {
       for (const object of objects) {
-        space?.db.remove(object);
+        db?.remove(object);
       }
     },
-    [space],
+    [db],
   );
 
   const handleDeleteColumn = useCallback(
@@ -113,9 +113,9 @@ export const useTestTableModel = (): TestTableModel => {
 
   const presentation = useMemo(() => {
     if (model) {
-      return new TablePresentation(model);
+      return new TablePresentation(registry, model);
     }
-  }, [model]);
+  }, [registry, model]);
 
   return {
     schema,
@@ -124,8 +124,7 @@ export const useTestTableModel = (): TestTableModel => {
     tableRef,
     model,
     presentation,
-    space,
-    client,
+    db,
     handleInsertRow,
     handleSaveView,
     handleDeleteRows,

package/src/translations.ts

@@ -4,7 +4,7 @@
 
 import { type Resource } from '@dxos/react-ui';
 
-export const translationKey = 'react-ui-table';
+export const translationKey = '@dxos/react-ui-table';
 
 export const translations = [
   {

package/src/types/Table.ts

@@ -4,13 +4,13 @@
 
 import * as Match from 'effect/Match';
 import * as Schema from 'effect/Schema';
+import * as SchemaAST from 'effect/SchemaAST';
 
 import { Obj, Ref, Type } from '@dxos/echo';
 import { FormInputAnnotation, type JsonPath, type JsonSchemaType, LabelAnnotation } from '@dxos/echo/internal';
-import { type SimpleType } from '@dxos/effect';
-import { View, ViewAnnotation, getSchemaProperties } from '@dxos/schema';
+import { View, ViewAnnotation } from '@dxos/schema';
 
-const TableSchema = Schema.Struct({
+export const Table = Schema.Struct({
   name: Schema.String.pipe(Schema.optional),
 
   view: Type.Ref(View.View).pipe(FormInputAnnotation.set(false)),
@@ -21,7 +21,7 @@ const TableSchema = Schema.Struct({
     value: Schema.Number,
   }).pipe(Schema.mutable, FormInputAnnotation.set(false)),
 }).pipe(
-  Type.Obj({
+  Type.object({
     typename: 'dxos.org/type/Table',
     version: '0.2.0',
   }),
@@ -29,11 +29,11 @@ const TableSchema = Schema.Struct({
   ViewAnnotation.set(true),
 );
 
-export interface Table extends Schema.Schema.Type<typeof TableSchema> {}
-export interface TableEncoded extends Schema.Schema.Encoded<typeof TableSchema> {}
-export const Table: Schema.Schema<Table, TableEncoded> = TableSchema;
+export interface Table extends Schema.Schema.Type<typeof Table> {}
 
-type MakeProps = Omit<Partial<Obj.MakeProps<typeof Table>>, 'view'> & {
+type MakeProps = {
+  name?: string;
+  sizes?: Record<string, number>;
   view: View.View;
   /** Required to auto-size columns. */
   jsonSchema?: JsonSchemaType;
@@ -43,24 +43,25 @@ type MakeProps = Omit<Partial<Obj.MakeProps<typeof Table>>, 'view'> & {
  * Make a table as a view of a data set.
  */
 export const make = ({ name, sizes = {}, view, jsonSchema }: MakeProps): Table => {
-  const table = Obj.make(Table, { name, view: Ref.make(view), sizes });
+  const table = Obj.make(Table, { name, view: Ref.make(view), sizes } as Obj.MakeProps<typeof Table>);
 
   // Preset sizes.
   if (jsonSchema) {
     const schema = Type.toEffectSchema(jsonSchema);
-    const properties = getSchemaProperties(schema.ast, {});
+    const properties = SchemaAST.getPropertySignatures(schema.ast);
     for (const property of properties) {
-      if (sizes?.[property.name]) {
-        table.sizes[property.name] = sizes[property.name];
+      const name = property.name.toString() as JsonPath;
+      if (sizes?.[name]) {
+        table.sizes[name] = sizes[name];
         continue;
       }
 
-      Match.type<SimpleType>().pipe(
-        Match.when('boolean', () => {
-          table.sizes[property.name as JsonPath] = 100;
+      Match.type<SchemaAST.AST>().pipe(
+        Match.when({ _tag: 'BooleanKeyword' }, () => {
+          table.sizes[name] = 100;
         }),
-        Match.when('number', () => {
-          table.sizes[property.name as JsonPath] = 100;
+        Match.when({ _tag: 'NumberKeyword' }, () => {
+          table.sizes[name] = 100;
         }),
         Match.orElse(() => {
           // Noop.
@@ -82,7 +83,7 @@ export const TableV1 = Schema.Struct({
     value: Schema.Number,
   }).pipe(Schema.mutable),
 }).pipe(
-  Type.Obj({
+  Type.object({
     typename: 'dxos.org/type/Table',
     version: '0.1.0',
   }),

package/src/util/dynamic-table.ts

@@ -2,14 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-import type * as Schema from 'effect/Schema';
+import { type Registry } from '@effect-atom/atom-react';
 
-import { Filter, type JsonSchema, Obj, Query, Ref, Type } from '@dxos/echo';
+import { Filter, type JsonSchema, Obj, Order, Query, type QueryAST, Ref, Type } from '@dxos/echo';
 import {
   ProjectionModel,
   type SchemaPropertyDefinition,
-  type SortDirectionType,
   View,
+  createDirectChangeCallback,
   getSchemaFromPropertyDefinitions,
 } from '@dxos/schema';
 
@@ -19,7 +19,7 @@ import { Table } from '../types';
 type PropertyDisplayProps = {
   size: number;
   title: string;
-  sort: SortDirectionType;
+  sort: QueryAST.OrderDirection;
 };
 
 export type TablePropertyDefinition = SchemaPropertyDefinition & Partial<PropertyDisplayProps>;
@@ -29,15 +29,15 @@ export type TablePropertyDefinition = SchemaPropertyDefinition & Partial<Propert
  */
 // TODO(burdon): Remove variance.
 export const getBaseSchema = ({
+  schema,
   typename,
   properties,
   jsonSchema,
-  schema,
 }: {
+  schema?: Type.Entity.Any;
   typename?: string;
   properties?: TablePropertyDefinition[];
   jsonSchema?: JsonSchema.JsonSchema;
-  schema?: Schema.Schema.AnyNoContext;
 }): { typename: string; jsonSchema: JsonSchema.JsonSchema } => {
   if (typename && properties) {
     const schema = getSchemaFromPropertyDefinitions(typename, properties);
@@ -52,9 +52,11 @@ export const getBaseSchema = ({
 };
 
 export const makeDynamicTable = ({
+  registry,
   jsonSchema,
   properties,
 }: {
+  registry: Registry.Registry;
   jsonSchema: JsonSchema.JsonSchema;
   properties?: TablePropertyDefinition[];
 }): { projection: ProjectionModel; object: Table.Table } => {
@@ -65,9 +67,15 @@ export const makeDynamicTable = ({
   });
   const object = Obj.make(Table.Table, { view: Ref.make(view), sizes: {} });
 
-  const projection = new ProjectionModel(jsonSchema, view.projection);
+  // Use direct change callback for in-memory objects (non-ECHO backed).
+  const projection = new ProjectionModel({
+    registry,
+    view,
+    baseSchema: jsonSchema,
+    change: createDirectChangeCallback(view.projection, jsonSchema),
+  });
   projection.normalizeView();
-  if (properties && projection.fields) {
+  if (properties && projection.getFields()) {
     setProperties(view, projection, object, properties);
   }
 
@@ -81,10 +89,12 @@ const setProperties = (
   properties: TablePropertyDefinition[],
 ) => {
   for (const property of properties) {
-    const field = projection.fields.find((field) => field.path === property.name);
+    const field = projection.getFields().find((field) => field.path === property.name);
     if (field) {
       if (property.size !== undefined) {
-        table.sizes[field.path] = property.size;
+        Obj.change(table, (t) => {
+          t.sizes[field.path] = property.size!;
+        });
       }
 
       if (property.title !== undefined) {
@@ -96,8 +106,14 @@ const setProperties = (
       }
 
       if (property.sort) {
-        const fieldId = field.id;
-        view.sort = [{ fieldId, direction: property.sort }];
+        // Apply sort to query instead of deprecated view.sort
+        const currentQuery = Query.fromAst(Obj.getSnapshot(view).query.ast);
+        // Use any type parameter since we're working with dynamic field paths
+        const newQuery = currentQuery.orderBy(Order.property<any>(field.path as string, property.sort));
+        Obj.change(view, (v) => {
+          // Type assertion needed because Query AST types have some variance issues.
+          v.query.ast = newQuery.ast as typeof v.query.ast;
+        });
       }
     }
   }

package/src/util/index.ts

@@ -3,7 +3,9 @@
 //
 
 export * from './dynamic-table';
+export * from './query-ast';
 export * from './signals';
+export * from './sort';
 export * from './table-buttons';
 export * from './table-controls';
 export * from './schema';