@dxos/react-ui-table 0.8.4-main.f9ba587 → 0.8.4-main.fd6878d

package/src/components/TableCellEditor/FormCellEditor.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type Schema } from 'effect';
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { getSnapshot } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
@@ -20,18 +20,26 @@ type FormCellEditorProps = {
   fieldProjection: FieldProjection;
   model?: TableModel;
   schema?: Schema.Schema.AnyNoContext;
+  onSave?: () => void;
   __gridScope: any;
 };
 
-export const FormCellEditor = ({ fieldProjection, model, schema, __gridScope }: FormCellEditorProps) => {
-  const { editing, setEditing } = useGridContext('ArrayEditor', __gridScope);
-  const cellRef = useRef<HTMLButtonElement | null>(null);
+export const FormCellEditor = ({ fieldProjection, model, schema, onSave, __gridScope }: FormCellEditorProps) => {
+  const { editing: contextEditing, setEditing } = useGridContext('ArrayEditor', __gridScope);
+  const [editing, setLocalEditing] = useState(false);
+  const anchorRef = useRef<HTMLButtonElement | null>(null);
 
   useEffect(() => {
-    if (editing && editing.cellElement) {
-      cellRef.current = editing.cellElement as HTMLButtonElement;
+    if (contextEditing && contextEditing.cellElement) {
+      anchorRef.current = (contextEditing.cellElement as HTMLElement).querySelector(
+        '.dx-grid__cell__content',
+      ) as HTMLButtonElement;
+      setLocalEditing(true);
+    } else {
+      anchorRef.current = null;
+      setLocalEditing(false);
     }
-  }, [editing?.cellElement]);
+  }, [contextEditing]);
 
   const narrowedSchema = useMemo(() => {
     if (!schema) {
@@ -41,8 +49,8 @@ export const FormCellEditor = ({ fieldProjection, model, schema, __gridScope }:
   }, [JSON.stringify(schema), fieldProjection.field.path]); // TODO(burdon): Avoid stringify.
 
   const originalRow = useMemo(() => {
-    if (model && editing) {
-      const cell = parseCellIndex(editing.index);
+    if (model && contextEditing) {
+      const cell = parseCellIndex(contextEditing.index);
       const row = model.getRowAt(cell.row);
       invariant(row);
 
@@ -50,7 +58,7 @@ export const FormCellEditor = ({ fieldProjection, model, schema, __gridScope }:
     }
 
     return undefined;
-  }, [model, editing]);
+  }, [model, contextEditing]);
 
   const formValues = useMemo(() => {
     if (originalRow) {
@@ -65,27 +73,28 @@ export const FormCellEditor = ({ fieldProjection, model, schema, __gridScope }:
       const value = getDeep(values, [path]);
       setDeep(originalRow, [path], value);
       setEditing(null);
+      setLocalEditing(false);
+      onSave?.();
     },
     [fieldProjection.field.path, originalRow],
   );
 
-  const handleOpenChange = useCallback(
-    (nextOpen: boolean) => {
-      if (nextOpen === false) {
-        setEditing(null);
-      }
-    },
-    [setEditing],
-  );
+  const handleOpenChange = useCallback((nextOpen: boolean) => {
+    if (nextOpen === false) {
+      setEditing(null);
+      onSave?.();
+    }
+    setLocalEditing(nextOpen);
+  }, []);
 
   if (!editing) {
     return null;
   }
 
   return (
-    <Popover.Root open={editing !== null} onOpenChange={handleOpenChange}>
-      <Popover.VirtualTrigger virtualRef={cellRef} />
-      <Popover.Content tabIndex={-1} classNames='popover-card-width'>
+    <Popover.Root open={editing} onOpenChange={handleOpenChange}>
+      <Popover.VirtualTrigger virtualRef={anchorRef} />
+      <Popover.Content tabIndex={-1} classNames='popover-card-width density-fine'>
         <Popover.Arrow />
         <Popover.Viewport>
           <Form values={formValues} schema={narrowedSchema as any} onSave={handleSave} />

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

@@ -11,18 +11,19 @@ import { Obj } from '@dxos/echo';
 import { type EchoSchema, isMutable } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
-import { Filter, useQuery, live } from '@dxos/react-client/echo';
+import { Filter, useQuery } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { defaultRowSize, Grid, type GridEditing } from '@dxos/react-ui-grid';
-import { ViewProjection, ViewType } from '@dxos/schema';
+import { Grid, type GridEditing, defaultRowSize } from '@dxos/react-ui-grid';
+import { DataType, createDefaultSchema } from '@dxos/schema';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { TableCellEditor, type TableCellEditorProps } from './TableCellEditor';
 import { useTableModel } from '../../hooks';
 import { type TableFeatures } from '../../model';
 import { translations } from '../../translations';
-import { TableType } from '../../types';
-import { initializeTable } from '../../util';
+import { TableView } from '../../types';
+import { createTable } from '../../util';
+
+import { TableCellEditor, type TableCellEditorProps } from './TableCellEditor';
 
 type StoryProps = {
   editing: GridEditing;
@@ -32,23 +33,16 @@ const DefaultStory = ({ editing }: StoryProps) => {
   const { space } = useClientProvider();
   invariant(space);
 
-  const tables = useQuery(space, Filter.type(TableType));
-  const [table, setTable] = useState<TableType>();
+  const views = useQuery(space, Filter.type(DataType.View));
+  const [view, setView] = useState<DataType.View>();
   const [schema, setSchema] = useState<EchoSchema>();
   useEffect(() => {
-    if (space && tables.length && !table) {
-      const table = tables[0];
-      invariant(table.view);
-      setTable(table);
-      setSchema(space.db.schemaRegistry.getSchema(table.view.target!.query.typename!));
-    }
-  }, [space, tables]);
-
-  const projection = useMemo(() => {
-    if (schema && table?.view) {
-      return new ViewProjection(schema.jsonSchema, table.view.target!);
+    if (space && views.length && !view) {
+      const view = views[0];
+      setView(view);
+      setSchema(space.db.schemaRegistry.getSchema(view.query.typename!));
     }
-  }, [schema, table?.view]);
+  }, [space, views, view]);
 
   const features: Partial<TableFeatures> = useMemo(
     () => ({
@@ -59,7 +53,7 @@ const DefaultStory = ({ editing }: StoryProps) => {
     [schema],
   );
 
-  const model = useTableModel({ table, projection, features });
+  const model = useTableModel({ view, schema: schema?.jsonSchema, features });
 
   const handleQuery: TableCellEditorProps['onQuery'] = async ({ field }) => {
     // TODO(dmaretskyi): If no schema query nothing
@@ -73,7 +67,7 @@ const DefaultStory = ({ editing }: StoryProps) => {
     });
   };
 
-  if (!model || !schema || !table) {
+  if (!model || !schema || !view) {
     return <div />;
   }
 
@@ -93,16 +87,19 @@ const meta: Meta<StoryProps> = {
   parameters: { translations, layout: 'centered' },
   decorators: [
     withClientProvider({
-      types: [TableType, ViewType],
+      types: [DataType.View, TableView],
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(Obj.make(TableType, {}));
-        const schema = await initializeTable({ client, space, table });
+        const schema = createDefaultSchema();
+        const { view } = await createTable({ client, space, typename: schema.typename });
+        space.db.add(view);
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
-            live(schema, {
-              name: faker.person.fullName(),
+            Obj.make(schema, {
+              title: faker.person.fullName(),
+              status: faker.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
+              description: faker.lorem.sentence(),
             }),
           );
         });

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -8,29 +8,29 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { FormatEnum, TypeEnum } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
-import { type DxGrid } from '@dxos/lit-grid';
+import { type DxGridAxis, type DxGridPosition } from '@dxos/lit-grid';
 import { useThemeContext } from '@dxos/react-ui';
 import { createMarkdownExtensions } from '@dxos/react-ui-editor';
 import {
-  cellQuery,
-  editorKeys,
-  parseCellIndex,
-  useGridContext,
-  type DxGridPlanePosition,
+  type EditorBlurHandler,
   type EditorKeyEvent,
   type EditorKeyOrBlurHandler,
-  type EditorBlurHandler,
   GridCellEditor,
   type GridCellEditorProps,
   type GridScopedProps,
+  cellQuery,
+  editorKeys,
+  parseCellIndex,
+  useGridContext,
 } from '@dxos/react-ui-grid';
-import { tagPicker, createLinks } from '@dxos/react-ui-tag-picker';
+import { createLinks, tagPicker } from '@dxos/react-ui-tag-picker';
 import { type FieldProjection } from '@dxos/schema';
 
+import { type ModalController, type TableModel } from '../../model';
+
 import { CellValidationMessage } from './CellValidationMessage';
-import { FormCellEditor } from './FormCellEditor';
 import { completion } from './extension';
-import { type TableModel, type ModalController } from '../../model';
+import { FormCellEditor } from './FormCellEditor';
 
 const newValue = Symbol.for('newValue');
 
@@ -47,8 +47,9 @@ export type TableCellEditorProps = {
   model?: TableModel;
   modals?: ModalController;
   schema?: Schema.AnyNoContext;
-  onEnter?: (cell: DxGridPlanePosition) => void;
-  onFocus?: DxGrid['refocus'];
+  onEnter?: (cell: DxGridPosition) => void;
+  onFocus?: (axis?: DxGridAxis, delta?: -1 | 0 | 1, cell?: DxGridPosition) => void;
+  onSave?: () => void;
   onQuery?: (field: FieldProjection, text: string) => Promise<QueryResult[]>;
 };
 
@@ -58,6 +59,7 @@ export const TableValueEditor = ({
   schema,
   onEnter,
   onFocus,
+  onSave,
   onQuery,
   __gridScope,
 }: GridScopedProps<TableCellEditorProps>) => {
@@ -69,14 +71,26 @@ export const TableValueEditor = ({
     }
 
     const { col } = parseCellIndex(editing.index);
-    const field = model.projection.view.fields[col];
+    const field = model.projection.fields[col];
     const fieldProjection = model.projection.getFieldProjection(field.id);
     invariant(fieldProjection);
     return fieldProjection;
   }, [model, editing]);
 
-  if (fieldProjection?.props.type === TypeEnum.Array) {
-    return <FormCellEditor fieldProjection={fieldProjection} model={model} schema={schema} __gridScope={__gridScope} />;
+  if (
+    fieldProjection?.props.type === TypeEnum.Array ||
+    fieldProjection?.props.format === FormatEnum.SingleSelect
+    // TODO(thure): Support `FormatEnum.MultiSelect`
+  ) {
+    return (
+      <FormCellEditor
+        fieldProjection={fieldProjection}
+        model={model}
+        schema={schema}
+        __gridScope={__gridScope}
+        onSave={onSave}
+      />
+    );
   }
 
   // For all other types, use the existing cell editor
@@ -87,6 +101,7 @@ export const TableValueEditor = ({
       onEnter={onEnter}
       onFocus={onFocus}
       onQuery={onQuery}
+      onSave={onSave}
       __gridScope={__gridScope}
     />
   );
@@ -100,13 +115,14 @@ export const TableCellEditor = ({
   onEnter,
   onFocus,
   onQuery,
+  onSave,
   __gridScope,
 }: GridScopedProps<TableCellEditorProps>) => {
   const { id: gridId, editing, setEditing } = useGridContext('TableCellEditor', __gridScope);
   const suppressNextBlur = useRef(false);
   const { themeMode } = useThemeContext();
-  const [_validationError, setValidationError] = useState<string | null>(null);
-  const [_validationVariant, setValidationVariant] = useState<'error' | 'warning'>('error');
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const [validationVariant, setValidationVariant] = useState<'error' | 'warning'>('error');
 
   const fieldProjection = useMemo<FieldProjection | undefined>(() => {
     if (!model || !editing) {
@@ -114,7 +130,7 @@ export const TableCellEditor = ({
     }
 
     const { col } = parseCellIndex(editing.index);
-    const field = model.projection.view.fields[col];
+    const field = model.projection.fields[col];
     const fieldProjection = model.projection.getFieldProjection(field.id);
     invariant(fieldProjection);
     return fieldProjection;
@@ -131,7 +147,7 @@ export const TableCellEditor = ({
     const { row, col } = cell;
 
     if (model.isDraftCell(cell)) {
-      const field = model.projection.view.fields[col];
+      const field = model.projection.fields[col];
       const hasValidationError = model.hasDraftRowValidationError(row, field.path);
 
       if (hasValidationError) {
@@ -167,6 +183,7 @@ export const TableCellEditor = ({
         onEnter?.(cell);
         onFocus?.();
         setEditing(null);
+        onSave?.();
       } else {
         setValidationError(validationResult.error);
         setValidationVariant('error');
@@ -205,9 +222,10 @@ export const TableCellEditor = ({
           setValidationError(null);
           model.setCellData(cell, value);
           setEditing(null);
+          onSave?.();
           onEnter?.(cell);
           if (event && onFocus) {
-            onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+            onFocus(determineNavigationAxis(event), determineNavigationDelta(event), cell);
           }
         } else {
           setValidationError(result.error);
@@ -216,12 +234,13 @@ export const TableCellEditor = ({
       } else {
         setValidationError(null);
         setEditing(null);
+        onSave?.();
         if (event && onFocus) {
           onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
         }
       }
     },
-    [model, editing, onFocus, onEnter, fieldProjection, setEditing],
+    [model, editing, onFocus, onEnter, fieldProjection, setEditing, onSave],
   );
 
   const extension = useMemo(() => {
@@ -322,7 +341,7 @@ export const TableCellEditor = ({
     if (model && editing) {
       const cell = parseCellIndex(editing.index);
       const { col } = cell;
-      const field = model.projection.view.fields[col];
+      const field = model.projection.fields[col];
       const fieldProjection = model.projection.getFieldProjection(field.id);
 
       if (
@@ -376,11 +395,7 @@ export const TableCellEditor = ({
 
   return (
     <>
-      <CellValidationMessage
-        validationError={_validationError}
-        variant={_validationVariant}
-        __gridScope={__gridScope}
-      />
+      <CellValidationMessage validationError={validationError} variant={validationVariant} __gridScope={__gridScope} />
       <GridCellEditor extension={extension} getCellContent={getCellContent} onBlur={handleBlur} slots={editorSlots} />
     </>
   );

package/src/components/TableCellEditor/extension.ts

@@ -3,10 +3,10 @@
 //
 
 import {
-  autocompletion,
-  pickedCompletion,
   type CompletionContext,
   type CompletionResult,
+  autocompletion,
+  pickedCompletion,
 } from '@codemirror/autocomplete';
 import { type Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';

package/src/components/TableToolbar/TableToolbar.tsx

@@ -11,11 +11,11 @@ import {
   type ActionGraphEdges,
   type ActionGraphNodes,
   type ActionGraphProps,
-  createGapSeparator,
-  createMenuAction,
   type MenuAction,
   MenuProvider,
   ToolbarMenu,
+  createGapSeparator,
+  createMenuAction,
   useMenuActions,
 } from '@dxos/react-ui-menu';
 import { rxFromSignal } from '@dxos/react-ui-menu';

package/src/components/testing.ts

@@ -5,13 +5,10 @@
 import { Schema } from 'effect';
 import { useEffect } from 'react';
 
-import { Obj, Ref } from '@dxos/echo';
-import { FormatEnum, ObjectId, setValue, toJsonSchema, TypedObject, TypeEnum } from '@dxos/echo-schema';
+import { FormatEnum, ObjectId, TypeEnum, TypedObject, setValue } from '@dxos/echo-schema';
+import { live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
-import { live } from '@dxos/react-client/echo';
-import { createView, type ViewProjection } from '@dxos/schema';
-
-import { TableType } from '../types';
+import { type ProjectionModel } from '@dxos/schema';
 
 export const TestSchema = TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
   id: ObjectId,
@@ -21,18 +18,6 @@ export const TestSchema = TypedObject({ typename: 'example.com/type/Test', versi
   netWorth: Schema.optional(Schema.Number),
 });
 
-export const createTable = (schema = TestSchema) => {
-  return Obj.make(TableType, {
-    view: Ref.make(
-      createView({
-        name: 'Test',
-        typename: schema.typename,
-        jsonSchema: toJsonSchema(schema),
-      }),
-    ),
-  });
-};
-
 export const createItems = (n: number) => {
   const { data } = live({
     data: Array.from({ length: n }, () => ({
@@ -47,13 +32,13 @@ export const createItems = (n: number) => {
 };
 
 export type SimulatorProps = {
-  table: TableType;
+  projection: ProjectionModel;
   items: any[];
   insertInterval?: number;
   updateInterval?: number;
 };
 
-export const useSimulator = ({ items, table, insertInterval, updateInterval }: SimulatorProps) => {
+export const useSimulator = ({ items, projection, insertInterval, updateInterval }: SimulatorProps) => {
   useEffect(() => {
     if (!insertInterval) {
       return;
@@ -74,10 +59,8 @@ export const useSimulator = ({ items, table, insertInterval, updateInterval }: S
 
     const i = setInterval(() => {
       const rowIdx = Math.floor(Math.random() * items.length);
-      const fields = table.view?.target?.fields ?? [];
+      const fields = projection.fields ?? [];
       const columnIdx = Math.floor(Math.random() * fields.length);
-      // TODO(ZaymonFC): ... This is borked.
-      const projection: ViewProjection = (table as any)._projection;
       const field = fields[columnIdx];
       const item = items[rowIdx];
 
@@ -115,5 +98,5 @@ export const useSimulator = ({ items, table, insertInterval, updateInterval }: S
     }, updateInterval);
 
     return () => clearInterval(i);
-  }, [items, table.view?.target?.fields, updateInterval]);
+  }, [items, projection.fields, updateInterval]);
 };

package/src/hooks/useTableModel.ts

@@ -4,19 +4,21 @@
 
 import { effect } from '@preact/signals-core';
 import orderBy from 'lodash.orderby';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
-import { fullyQualifiedId, getSpace, type Live } from '@dxos/react-client/echo';
-import { useSelectionActions } from '@dxos/react-ui-attention';
-import { type ViewProjection } from '@dxos/schema';
+import { type JsonSchemaType } from '@dxos/echo-schema';
+import { type Live } from '@dxos/live-object';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { useSelected, useSelectionActions } from '@dxos/react-ui-attention';
+import { type DataType, type ProjectionModel } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
-import { type TableRow, TableModel, type TableModelProps, type TableRowAction } from '../model';
-import { type TableType } from '../types';
+import { TableModel, type TableModelProps, type TableRow, type TableRowAction } from '../model';
 
 export type UseTableModelParams<T extends TableRow = TableRow> = {
-  table?: TableType;
-  projection?: ViewProjection;
+  view?: DataType.View;
+  schema?: JsonSchemaType;
+  projection?: ProjectionModel;
   rows?: Live<T>[];
   rowActions?: TableRowAction[];
   onSelectionChanged?: (selection: string[]) => void;
@@ -27,7 +29,8 @@ export type UseTableModelParams<T extends TableRow = TableRow> = {
 >;
 
 export const useTableModel = <T extends TableRow = TableRow>({
-  table,
+  view,
+  schema,
   projection,
   rows,
   rowActions,
@@ -36,21 +39,24 @@ export const useTableModel = <T extends TableRow = TableRow>({
   onRowAction,
   ...props
 }: UseTableModelParams<T>): TableModel<T> | undefined => {
+  const selected = useSelected(view && fullyQualifiedId(view), 'multi');
+  const initialSelection = useMemo(() => selected, [view]);
+
   const [model, setModel] = useState<TableModel<T>>();
   useEffect(() => {
-    if (!table || !projection) {
+    if (!view || !schema) {
       return;
     }
 
     let model: TableModel<T> | undefined;
     const t = setTimeout(async () => {
       model = new TableModel<T>({
-        id: fullyQualifiedId(table),
-        space: getSpace(table),
-        view: table.view?.target,
+        view,
+        schema,
         projection,
         features,
         rowActions,
+        initialSelection,
         onRowAction,
         ...props,
       });
@@ -62,7 +68,7 @@ export const useTableModel = <T extends TableRow = TableRow>({
       clearTimeout(t);
       void model?.close();
     };
-  }, [table, projection, table?.view?.target, features, rowActions]); // TODO(burdon): Trigger if callbacks change?
+  }, [view, schema, projection, features, rowActions, initialSelection]); // TODO(burdon): Trigger if callbacks change?
 
   // Update data.
   useEffect(() => {
@@ -77,9 +83,7 @@ export const useTableModel = <T extends TableRow = TableRow>({
     }
   }, [model, rows]);
 
-  const { multiSelect, clear } = useSelectionActions(
-    [table?.id, table?.view?.target?.query.typename].filter(isNonNullable),
-  );
+  const { multiSelect, clear } = useSelectionActions([model?.id].filter(isNonNullable));
 
   useEffect(() => {
     if (!model) {

package/src/index.ts

@@ -7,7 +7,6 @@ import { translations } from './translations';
 export * from './components';
 export * from './hooks';
 export * from './model';
-export * from './types';
 export * from './util';
 
 export { translations };

package/src/model/modal-controller.ts

@@ -3,7 +3,7 @@
 //
 
 import { signal } from '@preact/signals-core';
-import { type RefObject, type MutableRefObject } from 'react';
+import { type MutableRefObject, type RefObject } from 'react';
 
 import { type Live } from '@dxos/live-object';
 import { log } from '@dxos/log';

package/src/model/selection-model.ts

@@ -2,17 +2,18 @@
 // Copyright 2024 DXOS.org
 //
 
-import { computed, effect, signal, type ReadonlySignal } from '@preact/signals-core';
+import { type ReadonlySignal, type Signal, computed, effect, signal } from '@preact/signals-core';
 
 import { Resource } from '@dxos/context';
 
-import { type TableRow } from './table-model';
 import { touch } from '../util';
 
+import { type TableRow } from './table-model';
+
 export type SelectionMode = 'single' | 'multiple';
 
 export class SelectionModel<T extends TableRow> extends Resource {
-  private readonly _selection = signal<Set<string>>(new Set());
+  private readonly _selection: Signal<Set<string>>;
 
   private readonly _validSelectedIds = computed<Set<string>>(() => {
     const rows = this._rows.value;
@@ -38,9 +39,11 @@ export class SelectionModel<T extends TableRow> extends Resource {
   constructor(
     private readonly _rows: ReadonlySignal<T[]>,
     private readonly _selectionMode: SelectionMode,
+    private readonly _initialSelection: string[],
     private readonly _onSelectionChanged?: () => void,
   ) {
     super();
+    this._selection = signal(new Set(this._initialSelection));
   }
 
   protected override async _open(): Promise<void> {

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

@@ -6,16 +6,17 @@ import { computed } from '@preact/signals-core';
 import { Schema } from 'effect';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
-import { Obj, Ref } from '@dxos/echo';
+import { Obj } from '@dxos/echo';
 import { TypedObject } from '@dxos/echo-schema';
 import { updateCounter } from '@dxos/echo-schema/testing';
 import { registerSignalsRuntime } from '@dxos/echo-signals';
+import { live } from '@dxos/live-object';
 import { createEchoSchema } from '@dxos/live-object/testing';
-import { live } from '@dxos/react-client/echo';
-import { createView, ViewProjection } from '@dxos/schema';
+import { createView } from '@dxos/schema';
+
+import { TableView } from '../types';
 
 import { TableModel, type TableModelProps } from './table-model';
-import { TableType } from '../types';
 
 // TODO(burdon): Tests are disabled in project.json since they bring in plugin deps.
 //  Restore once factored out into react-ui-table.
@@ -107,8 +108,7 @@ class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.
 
 const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
-  const view = createView({ name: 'Test', typename: schema.typename, jsonSchema: schema.jsonSchema });
-  const projection = new ViewProjection(schema.jsonSchema, view);
-  const table = Obj.make(TableType, { view: Ref.make(view) });
-  return new TableModel({ id: table.id, space: undefined, view, projection, ...props });
+  const table = Obj.make(TableView, { sizes: {} });
+  const view = createView({ typename: schema.typename, jsonSchema: schema.jsonSchema, presentation: table });
+  return new TableModel({ view, schema: schema.jsonSchema, ...props });
 };