@dxos/react-ui-table 0.8.4-main.2c6827d → 0.8.4-main.3c1ae3b

package/src/model/table-model.ts

@@ -5,16 +5,8 @@
 import { type ReadonlySignal, computed, effect, signal } from '@preact/signals-core';
 
 import { Resource } from '@dxos/context';
-import { Obj, Ref } from '@dxos/echo';
-import {
-  FormatEnum,
-  type JsonProp,
-  type JsonSchemaType,
-  getSchema,
-  getValue,
-  setValue,
-  toEffectSchema,
-} from '@dxos/echo/internal';
+import { Format, Obj, Ref } from '@dxos/echo';
+import { type JsonProp, type JsonSchemaType, getValue, setValue, toEffectSchema } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { ObjectId } from '@dxos/keys';
 import { getSnapshot, isLiveObject } from '@dxos/live-object';
@@ -28,14 +20,14 @@ import {
 } from '@dxos/react-ui-grid';
 import {
   type FieldSortType,
-  ProjectionModel,
+  type ProjectionModel,
   type PropertyType,
   type ValidationError,
   type View,
   validateSchema,
 } from '@dxos/schema';
 
-import { Table } from '../types';
+import { type Table } from '../types';
 import { touch } from '../util';
 import { extractTagIds } from '../util/tag';
 
@@ -77,9 +69,8 @@ const defaultFeatures: TableFeatures = {
 export type InsertRowResult = 'draft' | 'final';
 
 export type TableModelProps<T extends TableRow = TableRow> = {
-  view: View.View;
-  schema: JsonSchemaType;
-  projection?: ProjectionModel;
+  object: Table.Table;
+  projection: ProjectionModel;
   features?: Partial<TableFeatures>;
   sorting?: FieldSortType[];
   initialSelection?: string[];
@@ -95,9 +86,8 @@ export type TableModelProps<T extends TableRow = TableRow> = {
 };
 
 export class TableModel<T extends TableRow = TableRow> extends Resource {
-  private readonly _view: View.View;
+  private readonly _object: Table.Table;
   private readonly _projection: ProjectionModel;
-  private _table?: Table.Table;
 
   private readonly _visibleRange = signal<DxGridPlaneRange>({
     start: { row: 0, col: 0 },
@@ -122,8 +112,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   private _columnMeta?: ReadonlySignal<DxGridAxisMeta>;
 
   constructor({
-    view,
-    schema,
+    object,
     projection,
     features = {},
     sorting = [],
@@ -138,8 +127,8 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     onRowAction,
   }: TableModelProps<T>) {
     super();
-    this._view = view;
-    this._projection = projection ?? new ProjectionModel(schema, view.projection);
+    this._object = object;
+    this._projection = projection;
     this._projection.normalizeView();
 
     // TODO(ZaymonFC): Use our more robust config merging module?
@@ -150,11 +139,15 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       'Single selection is not compatible with editable tables.',
     );
 
-    this._sorting = new TableSorting(this._rows, this._view, this._projection);
+    this._sorting = new TableSorting({
+      rows: this._rows,
+      getView: () => this.view,
+      projection: this._projection,
+    });
 
     if (sorting.length > 0) {
-      const [sort] = sorting;
-      this._sorting.setSort(sort.fieldId, sort.direction);
+      const { fieldId, direction } = sorting[0];
+      this._sorting.setSort(fieldId, direction);
     }
 
     this._selection = new SelectionModel(
@@ -175,16 +168,17 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   }
 
   public get id(): string {
-    return Obj.getDXN(this._view).toString();
+    return Obj.getDXN(this._object).toString();
   }
 
   public get view(): View.View {
-    return this._view;
+    const view = this._object.view.target;
+    invariant(view, 'Table model not initialized');
+    return view;
   }
 
   public get table(): Table.Table {
-    invariant(this._table, 'Model not initialized');
-    return this._table;
+    return this._object;
   }
 
   public get projection(): ProjectionModel {
@@ -244,10 +238,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   //
 
   protected override async _open(): Promise<void> {
-    const presentation = this._view.presentation.target ?? (await this._view.presentation.load());
-    invariant(Obj.instanceOf(Table.Table, presentation));
-    this._table = presentation;
-
+    await this._object.view.load();
     this.initializeColumnMeta();
     this.initializeEffects();
     await this._selection.open(this._ctx);
@@ -470,7 +461,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
 
     const { props } = this._projection.getFieldProjection(field.id);
     switch (props.format) {
-      case FormatEnum.Ref: {
+      case Format.TypeFormat.Ref: {
         if (!field.referencePath) {
           return ''; // TODO(burdon): Show error.
         }
@@ -527,7 +518,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       const snapshot = getSnapshot(currentRow);
       setValue(snapshot, field.path, transformedValue);
 
-      const schema = getSchema(currentRow);
+      const schema = Obj.getSchema(currentRow);
       invariant(schema);
 
       const validationResult = validateSchema(schema, snapshot);
@@ -553,7 +544,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     const transformedValue = editorTextToCellValue(props, value);
 
     // Special handling for Ref format to preserve existing behavior
-    if (props.format === FormatEnum.Ref && !isLiveObject(value)) {
+    if (props.format === Format.TypeFormat.Ref && !isLiveObject(value)) {
       return;
     }
 
@@ -668,7 +659,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
 
 const editorTextToCellValue = (props: PropertyType, value: any): any => {
   switch (props.format) {
-    case FormatEnum.Ref: {
+    case Format.TypeFormat.Ref: {
       if (isLiveObject(value)) {
         return Ref.make(value);
       } else {
@@ -676,7 +667,7 @@ const editorTextToCellValue = (props: PropertyType, value: any): any => {
       }
     }
 
-    case FormatEnum.SingleSelect: {
+    case Format.TypeFormat.SingleSelect: {
       const ids = extractTagIds(value);
       if (ids && ids.length > 0) {
         return ids[0];
@@ -685,7 +676,7 @@ const editorTextToCellValue = (props: PropertyType, value: any): any => {
       }
     }
 
-    case FormatEnum.MultiSelect: {
+    case Format.TypeFormat.MultiSelect: {
       const ids = extractTagIds(value);
       return ids || value;
     }

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

@@ -9,7 +9,7 @@ import { Filter, Query } from '@dxos/echo';
 import { TypedObject } from '@dxos/echo/internal';
 import { createEchoSchema } from '@dxos/echo/testing';
 import { live } from '@dxos/live-object';
-import { View } from '@dxos/schema';
+import { ProjectionModel, View } from '@dxos/schema';
 
 import { Table } from '../types';
 
@@ -95,11 +95,11 @@ class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.
 
 const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
-  const table = Table.make();
   const view = View.make({
     query: Query.select(Filter.type(schema)),
     jsonSchema: schema.jsonSchema,
-    presentation: table,
   });
-  return new TableModel({ view, schema: schema.jsonSchema, ...props });
+  const object = Table.make({ view });
+  const projection = new ProjectionModel(schema.jsonSchema, view.projection);
+  return new TableModel({ object, projection, ...props });
 };

package/src/model/table-presentation.ts

@@ -6,7 +6,7 @@ import { signal } from '@preact/signals-core';
 import * as Predicate from 'effect/Predicate';
 
 import { Obj } from '@dxos/echo';
-import { FormatEnum, TypeEnum, getValue } from '@dxos/echo/internal';
+import { Format, TypeEnum, getValue } from '@dxos/echo/internal';
 import { cellClassesForFieldType, formatForDisplay } from '@dxos/react-ui-form';
 import {
   type DxGridCellValue,
@@ -120,12 +120,12 @@ export class TablePresentation<T extends TableRow = TableRow> {
         }
 
         switch (props.format) {
-          case FormatEnum.Boolean:
-          case FormatEnum.SingleSelect:
-          case FormatEnum.MultiSelect: {
+          case Format.TypeFormat.Boolean:
+          case Format.TypeFormat.SingleSelect:
+          case Format.TypeFormat.MultiSelect: {
             return '';
           }
-          case FormatEnum.Ref: {
+          case Format.TypeFormat.Ref: {
             if (!field.referencePath) {
               return ''; // TODO(burdon): Show error.
             }
@@ -201,7 +201,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
     }
 
     // References.
-    if (props.format === FormatEnum.Ref && props.referenceSchema) {
+    if (props.format === Format.TypeFormat.Ref && props.referenceSchema) {
       const targetObj = getValue(obj, field.path)?.target;
       if (targetObj) {
         const dxn = Obj.getDXN(targetObj)?.toString();
@@ -210,7 +210,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
     }
 
     // Booleans.
-    if (props.format === FormatEnum.Boolean) {
+    if (props.format === Format.TypeFormat.Boolean) {
       const value = getValue(obj, field.path);
       cell.accessoryHtml = tableControls.switch.render({
         colIndex,
@@ -221,7 +221,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
     }
 
     // Single-Selects.
-    if (props.format === FormatEnum.SingleSelect) {
+    if (props.format === Format.TypeFormat.SingleSelect) {
       const value = getValue(obj, field.path);
       const options = this.model.projection.getFieldProjection(field.id).props.options;
       if (options) {
@@ -233,7 +233,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
     }
 
     // Multi-Selects.
-    if (props.format === FormatEnum.MultiSelect) {
+    if (props.format === Format.TypeFormat.MultiSelect) {
       const values = getValue(obj, field.path) as string[] | undefined;
       const options = this.model.projection.getFieldProjection(field.id).props.options;
       if (options && values && values.length > 0) {

package/src/model/table-sorting.ts

@@ -5,7 +5,7 @@
 import { type ReadonlySignal, type Signal, computed, signal } from '@preact/signals-core';
 import orderBy from 'lodash.orderby';
 
-import { FormatEnum, TypeEnum, getValue } from '@dxos/echo/internal';
+import { Format, TypeEnum, getValue } from '@dxos/echo/internal';
 import { formatForDisplay } from '@dxos/react-ui-form';
 import {
   type FieldSortType,
@@ -52,19 +52,27 @@ type LocalSort = { type: 'cleared' } | { type: 'active'; sort: FieldSortType } |
 export class TableSorting<T extends TableRow> {
   private readonly _displayToDataIndex = new Map<number, number>();
   private readonly _rows: Signal<T[]>;
+  private readonly _getView: () => View.View;
+  private readonly _projection: ProjectionModel;
   private readonly _localSort = signal<LocalSort>(undefined);
   private readonly _isDirty: ReadonlySignal<boolean>;
   public readonly sortedRows: ReadonlySignal<T[]>;
 
-  constructor(
-    rows: Signal<T[]>,
-    private readonly _view: View.View,
-    private readonly _projection: ProjectionModel,
-  ) {
+  constructor({
+    rows,
+    projection,
+    getView,
+  }: {
+    rows: Signal<T[]>;
+    getView: () => View.View;
+    projection: ProjectionModel;
+  }) {
     this._rows = rows;
+    this._getView = getView;
+    this._projection = projection;
     this._isDirty = computed(() => {
       const local = this._localSort.value;
-      const viewSort = this._view.sort?.[0];
+      const viewSort = this._getView().sort?.[0];
       if (local?.type === 'cleared') {
         return viewSort !== undefined;
       }
@@ -92,7 +100,7 @@ export class TableSorting<T extends TableRow> {
       return local.sort;
     }
 
-    return this._view.sort?.[0];
+    return this._getView().sort?.[0];
   }
 
   /**
@@ -137,10 +145,11 @@ export class TableSorting<T extends TableRow> {
 
   public save(): void {
     if (this._localSort.value !== undefined) {
+      const view = this._getView();
       if (this._localSort.value.type === 'active') {
-        this._view.sort = [this._localSort.value.sort];
+        view.sort = [this._localSort.value.sort];
       } else {
-        this._view.sort = [];
+        view.sort = [];
       }
       this._localSort.value = undefined;
     }
@@ -202,7 +211,7 @@ export class TableSorting<T extends TableRow> {
      * For single select fields, the sort value is determined by the index of the option in the
      * options array. This ensures sort order matches the configured option order.
      */
-    if (format === FormatEnum.SingleSelect) {
+    if (format === Format.TypeFormat.SingleSelect) {
       const options = props.options;
       if (!options) {
         return undefined;
@@ -215,7 +224,7 @@ export class TableSorting<T extends TableRow> {
     // TODO(ZaymonFC): Should we format this returned value for display based on the referenced prop format?
     //   Right now we're going to be sorting based on the raw values.
     //   Maybe we need to recurse this function with the referenced prop format and field?
-    if (format === FormatEnum.Ref && field.referencePath) {
+    if (format === Format.TypeFormat.Ref && field.referencePath) {
       const refValue = getValue(value.target, field.referencePath);
       return refValue;
     }

package/src/playwright/TableManager.ts

@@ -53,12 +53,12 @@ export class TableManager {
     await this.page.getByTestId(TABLE_SELECTORS.columnSort[direction]).click();
   }
 
-  public async addColumn({ label, format }: { label: string; format: 'number' }): Promise<void> {
+  public async addColumn({ label, format }: { label: string; format: string }): Promise<void> {
     await this.page.getByTestId(TABLE_SELECTORS.newColumnButton).click();
     await this.page.getByRole('combobox').click();
-    await this.page.getByLabel(`format ${format}`).click();
-    await this.page.getByPlaceholder('Property label.').click();
-    await this.page.getByPlaceholder('Property label.').fill(label);
-    await this.page.getByRole('button', { name: 'save button' }).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.getByRole('button', { name: 'Save' }).click();
   }
 }

package/src/playwright/smoke.spec.ts

@@ -130,7 +130,7 @@ test.describe('Table', () => {
     await table.grid.ready();
     const newColumnLabel = 'TEST LABEL';
 
-    await table.addColumn({ label: newColumnLabel, format: 'number' });
+    await table.addColumn({ label: newColumnLabel, format: 'Number' });
 
     await expect(page.getByRole('gridcell', { name: newColumnLabel })).toBeVisible();
     await page.close();

package/src/testing/useTestTableModel.ts

@@ -2,43 +2,49 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useCallback, useMemo, useRef } from 'react';
+import { type RefObject, useCallback, useMemo, useRef } from 'react';
 
-import { isMutable, toJsonSchema } from '@dxos/echo/internal';
+import { type Type } from '@dxos/echo';
+import { isMutable } from '@dxos/echo/internal';
 import { useGlobalFilteredObjects } from '@dxos/plugin-search';
 import { faker } from '@dxos/random';
-import { useClient } from '@dxos/react-client';
-import { Filter, useQuery, useSchema } from '@dxos/react-client/echo';
+import { Filter, type Space, useQuery, useSchema } from '@dxos/react-client/echo';
 import { useClientProvider } from '@dxos/react-client/testing';
-import { ProjectionModel, View, getTypenameFromQuery } from '@dxos/schema';
+import { type ProjectionModel, getTypenameFromQuery } from '@dxos/schema';
 
 import { type TableController } from '../components';
-import { useAddRow, useTableModel } from '../hooks';
-import { TablePresentation } from '../model';
+import { useAddRow, useProjectionModel, useTableModel } from '../hooks';
+import { type TableModel, TablePresentation } from '../model';
+import { Table } from '../types';
 
 faker.seed(0); // NOTE(ZaymonFC): Required for smoke tests.
 
+export type TestTableModel<T extends Type.Entity.Any = Type.Entity.Any> = {
+  schema: T | undefined;
+  table: Table.Table | undefined;
+  projection: ProjectionModel | undefined;
+  tableRef: RefObject<TableController | null>;
+  model: TableModel | undefined;
+  presentation: TablePresentation | undefined;
+  space: Space | undefined;
+  handleInsertRow: () => void;
+  handleSaveView: () => void;
+  handleDeleteRows: (rowIndex: number, objects: any[]) => void;
+  handleDeleteColumn: (fieldId: string) => void;
+};
+
 /**
  * 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 = () => {
-  const client = useClient();
+export const useTestTableModel = <T extends Type.Entity.Any = Type.Entity.Any>(): TestTableModel<T> => {
   const { space } = useClientProvider();
 
-  const views = useQuery(space, Filter.type(View.View));
-  const view = useMemo(() => views.at(0), [views]);
-  const typename = view?.query ? getTypenameFromQuery(view.query.ast) : undefined;
-  const schema = useSchema(client, space, typename);
-  const jsonSchema = useMemo(() => (schema ? toJsonSchema(schema) : undefined), [schema]);
-
-  const projection = useMemo(() => {
-    if (schema && view?.projection) {
-      const projection = new ProjectionModel(toJsonSchema(schema), view.projection);
-      projection.normalizeView();
-      return projection;
-    }
-  }, [schema, view?.projection]);
+  const tables = useQuery(space, 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<T>(space, typename);
+  const projection = useProjectionModel(schema, table);
 
   const features = useMemo(
     () => ({
@@ -82,8 +88,7 @@ export const useTestTableModel = () => {
   );
 
   const model = useTableModel({
-    view,
-    schema: jsonSchema,
+    object: table,
     projection,
     features,
     rows: filteredObjects,
@@ -97,7 +102,7 @@ export const useTestTableModel = () => {
   const handleInsertRow = useCallback(() => {
     const insertResult = model?.insertRow();
     tableRef.current?.handleInsertRowResult?.(insertResult);
-  }, [model, tableRef.current]);
+  }, [model]);
 
   const handleSaveView = useCallback(() => {
     model?.saveView();
@@ -111,13 +116,12 @@ export const useTestTableModel = () => {
 
   return {
     schema,
-    view,
+    table,
     projection,
     tableRef,
     model,
     presentation,
     space,
-    client,
     handleInsertRow,
     handleSaveView,
     handleDeleteRows,

package/src/translations.ts

@@ -14,8 +14,8 @@ export const translations = [
         'create object label': 'Create table',
         'table name placeholder': 'Table name',
         'settings title': 'Table settings',
-        'table schema label': 'Record type',
-        'new schema': 'New record type',
+        'table schema label': 'Type',
+        'new schema': 'New type',
         'continue label': 'Continue',
         'create stack section label': 'Create table',
         'add row label': 'Add row',

package/src/types/Table.ts

@@ -0,0 +1,90 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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 { View, ViewAnnotation } from '@dxos/schema';
+
+const TableSchema = Schema.Struct({
+  name: Schema.String.pipe(Schema.optional),
+
+  view: Type.Ref(View.View).pipe(FormInputAnnotation.set(false)),
+
+  sizes: Schema.Record({
+    // TODO(wittjosiah): Should be JsonPath.
+    key: Schema.String,
+    value: Schema.Number,
+  }).pipe(Schema.mutable, FormInputAnnotation.set(false)),
+}).pipe(
+  Type.Obj({
+    typename: 'dxos.org/type/Table',
+    version: '0.2.0',
+  }),
+  LabelAnnotation.set(['name']),
+  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;
+
+type MakeProps = Omit<Partial<Obj.MakeProps<typeof Table>>, 'view'> & {
+  view: View.View;
+  /** Required to auto-size columns. */
+  jsonSchema?: JsonSchemaType;
+};
+
+/**
+ * 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 });
+
+  // Preset sizes.
+  if (jsonSchema) {
+    const schema = Type.toEffectSchema(jsonSchema);
+    const properties = SchemaAST.getPropertySignatures(schema.ast);
+    for (const property of properties) {
+      const name = property.name.toString() as JsonPath;
+      if (sizes?.[name]) {
+        table.sizes[name] = sizes[name];
+        continue;
+      }
+
+      Match.type<SchemaAST.AST>().pipe(
+        Match.when({ _tag: 'BooleanKeyword' }, () => {
+          table.sizes[name] = 100;
+        }),
+        Match.when({ _tag: 'NumberKeyword' }, () => {
+          table.sizes[name] = 100;
+        }),
+        Match.orElse(() => {
+          // Noop.
+        }),
+      )(property.type);
+    }
+  }
+
+  return table;
+};
+
+//
+// V1
+//
+
+export const TableV1 = Schema.Struct({
+  sizes: Schema.Record({
+    key: Schema.String,
+    value: Schema.Number,
+  }).pipe(Schema.mutable),
+}).pipe(
+  Type.Obj({
+    typename: 'dxos.org/type/Table',
+    version: '0.1.0',
+  }),
+);

package/src/types/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * as Table from './schema';
+export * as Table from './Table';

package/src/util/dynamic-table.ts

@@ -2,11 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import type * as Schema from 'effect/Schema';
-
-import { Filter, Obj, Query } from '@dxos/echo';
-import { getTypename, toJsonSchema } from '@dxos/echo/internal';
-import type { JsonSchemaType } from '@dxos/echo/internal';
+import { Filter, type JsonSchema, Obj, Query, Ref, Type } from '@dxos/echo';
 import {
   ProjectionModel,
   type SchemaPropertyDefinition,
@@ -31,21 +27,21 @@ 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?: JsonSchemaType;
-  schema?: Schema.Schema.AnyNoContext;
-}): { typename: string; jsonSchema: JsonSchemaType } => {
+  jsonSchema?: JsonSchema.JsonSchema;
+}): { typename: string; jsonSchema: JsonSchema.JsonSchema } => {
   if (typename && properties) {
     const schema = getSchemaFromPropertyDefinitions(typename, properties);
     return { typename: schema.typename, jsonSchema: schema.jsonSchema };
   } else if (schema) {
-    return { typename: getTypename(schema)!, jsonSchema: toJsonSchema(schema) };
+    return { typename: Type.getTypename(schema)!, jsonSchema: Type.toJsonSchema(schema) };
   } else if (typename && jsonSchema) {
     return { typename, jsonSchema };
   } else {
@@ -57,24 +53,23 @@ export const makeDynamicTable = ({
   jsonSchema,
   properties,
 }: {
-  jsonSchema: JsonSchemaType;
+  jsonSchema: JsonSchema.JsonSchema;
   properties?: TablePropertyDefinition[];
-}): { projection: ProjectionModel; view: View.View } => {
-  const table = Obj.make(Table.Table, { sizes: {} });
+}): { projection: ProjectionModel; object: Table.Table } => {
   const view = View.make({
     query: Query.select(Filter.everything()),
     jsonSchema,
-    presentation: table,
     ...(properties && { fields: properties.map((property) => property.name) }),
   });
+  const object = Obj.make(Table.Table, { view: Ref.make(view), sizes: {} });
 
   const projection = new ProjectionModel(jsonSchema, view.projection);
   projection.normalizeView();
   if (properties && projection.fields) {
-    setProperties(view, projection, table, properties);
+    setProperties(view, projection, object, properties);
   }
 
-  return { projection, view };
+  return { projection, object };
 };
 
 const setProperties = (