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

package/src/components/TableCellEditor/CellValidationMessage.tsx

@@ -12,9 +12,9 @@ export type CellValidationMessageProps = {
 };
 
 export const CellValidationMessage = ({
+  __gridScope,
   validationError,
   variant = 'error',
-  __gridScope,
 }: GridScopedProps<CellValidationMessageProps>) => {
   const { editing, editBox: box } = useGridContext('GridSheetCellEditor', __gridScope);
 

package/src/components/TableCellEditor/FormCellEditor.tsx

@@ -2,97 +2,96 @@
 // Copyright 2025 DXOS.org
 //
 
-import * as Schema from 'effect/Schema';
+import type * as Schema from 'effect/Schema';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { Filter, Obj } from '@dxos/echo';
-import { FormatEnum, Ref, type TypeAnnotation, getValue } from '@dxos/echo/internal';
+import { Filter, Obj, type Type } from '@dxos/echo';
+import { Format, Ref, getValue } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { getSnapshot } from '@dxos/live-object';
-import { type Client } from '@dxos/react-client';
 import { getSpace } from '@dxos/react-client/echo';
-import { Popover } from '@dxos/react-ui';
-import { Form, type FormProps } from '@dxos/react-ui-form';
+import { type Label, Popover } from '@dxos/react-ui';
+import { Form, type FormRootProps, omitId } from '@dxos/react-ui-form';
 import { parseCellIndex, useGridContext } from '@dxos/react-ui-grid';
 import { type FieldProjection } from '@dxos/schema';
 import { getDeep, isTruthy, setDeep } from '@dxos/util';
 
-import { type ModalController, type TableModel } from '../../model';
+import { type ModalController, type TableModel, type TableRow } from '../../model';
 import { translationKey } from '../../translations';
 import { narrowSchema } from '../../util';
 
+const createOptionLabel: Label = ['create new object label', { ns: translationKey }];
+
 export type OnCreateHandler = (schema: Schema.Schema.AnyNoContext, values: any) => Parameters<typeof Ref.make>[0];
 
-export type FormCellEditorProps = {
-  fieldProjection: FieldProjection;
+export type FormCellEditorProps<T extends Type.Entity.Any = Type.Entity.Any> = {
+  __gridScope: any;
+  schema?: T;
   model?: TableModel;
-  schema?: Schema.Schema.AnyNoContext;
+  fieldProjection: FieldProjection;
+  modals?: ModalController; // TODO(burdon): Not used. Remove?
   onSave?: () => void;
   onCreate?: OnCreateHandler;
-  client?: Client;
-  modals?: ModalController;
-  __gridScope: any;
-} & Omit<FormProps<any>, 'values' | 'schema' | 'onCreate'>;
-
-const createOptionLabel = ['create new object label', { ns: translationKey }] as [string, { ns: string }];
+} & Omit<FormRootProps<any>, 'values' | 'schema' | 'onCreate'>;
 
-export const FormCellEditor = ({
-  fieldProjection,
-  model,
+export const FormCellEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
+  __gridScope,
   schema,
+  model,
+  fieldProjection,
   onSave,
-  client,
-  modals,
   onCreate,
-  __gridScope,
   ...formProps
-}: FormCellEditorProps) => {
-  const { editing: contextEditing, setEditing, id: gridId } = useGridContext('ArrayEditor', __gridScope);
-  const [editing, setLocalEditing] = useState(false);
+}: FormCellEditorProps<T>) => {
   const anchorRef = useRef<HTMLButtonElement | null>(null);
+  const { id: _gridId, editing: contextEditing, setEditing } = useGridContext('ArrayEditor', __gridScope);
+  const [editing, setLocalEditing] = useState(false);
+
+  useEffect(() => {
+    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);
+    }
+  }, [contextEditing]);
+
+  const narrowedSchema = useMemo<Schema.Schema.AnyNoContext | undefined>(() => {
+    if (!schema) {
+      return undefined;
+    }
+
+    return narrowSchema(schema, [fieldProjection.field.path]);
+  }, [JSON.stringify(schema), fieldProjection.field.path]); // TODO(burdon): Avoid stringify.
 
   const getSchema = useCallback(
-    (typeAnnotation: Pick<TypeAnnotation, 'typename'>) => {
+    ({ typename }: { typename: string }) => {
       const space = getSpace(model!.view);
       invariant(space);
-
-      let schema;
-      if (client) {
-        schema = client.graph.schemaRegistry.getSchema(typeAnnotation.typename);
-      }
-      if (!schema) {
-        schema = space.db.schemaRegistry.getSchema(typeAnnotation.typename);
-      }
+      const schema = space.db.schemaRegistry.query({ typename, location: ['database', 'runtime'] }).runSync()[0];
       return { space, schema };
     },
-    [client, model],
+    [model],
   );
 
-  const handleQueryRefOptions = useCallback(
-    async (typeAnnotation: TypeAnnotation) => {
-      const { schema, space } = getSchema(typeAnnotation);
-      if (model && schema && space) {
-        const { objects } = await space.db.query(Filter.type(schema)).run();
-        return objects
-          .map((obj) => {
-            return {
-              dxn: Obj.getDXN(obj),
-              label: getValue(obj, fieldProjection.field.referencePath!) || obj.id.toString(),
-            };
-          })
-          .filter(isTruthy);
-      }
+  const refSchema = useMemo(() => {
+    if (fieldProjection.props.format === Format.TypeFormat.Ref && fieldProjection.props.referenceSchema) {
+      const { schema } = getSchema({ typename: fieldProjection.props.referenceSchema });
+      return schema;
+    }
 
-      return [];
-    },
-    [client, model],
-  );
+    return null;
+  }, [fieldProjection.props.format, fieldProjection.props.referenceSchema, getSchema]);
 
-  const originalRow = useMemo(() => {
-    if (model && contextEditing) {
-      const cell = parseCellIndex(contextEditing.index);
+  const createSchema = useMemo(() => (refSchema ? omitId(refSchema) : null), [refSchema]);
 
+  const originalRow = useMemo<TableRow | undefined>(() => {
+    if (model && contextEditing) {
       // Check if this is a draft cell and get the appropriate row data
+      const cell = parseCellIndex(contextEditing.index);
       if (model.isDraftCell(cell)) {
         const draftRow = model.draftRows.value[cell.row];
         invariant(draftRow);
@@ -107,38 +106,6 @@ export const FormCellEditor = ({
     return undefined;
   }, [model, contextEditing]);
 
-  const handleSave = useCallback(
-    (values: any) => {
-      const path = fieldProjection.field.path;
-      const value = getDeep(values, [path]);
-      setDeep(originalRow, [path], value);
-      contextEditing?.cellElement?.focus();
-      setEditing(null);
-      setLocalEditing(false);
-      onSave?.();
-    },
-    [fieldProjection.field.path, onSave, contextEditing, originalRow],
-  );
-
-  useEffect(() => {
-    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);
-    }
-  }, [contextEditing]);
-
-  const narrowedSchema = useMemo(() => {
-    if (!schema) {
-      return undefined;
-    }
-    return narrowSchema(schema, [fieldProjection.field.path]);
-  }, [JSON.stringify(schema), fieldProjection.field.path]); // TODO(burdon): Avoid stringify.
-
   // NOTE: Important to get a snapshot to eject from the live object.
   const formValues = useMemo(() => (originalRow ? getSnapshot(originalRow) : {}), [originalRow]);
 
@@ -150,22 +117,21 @@ export const FormCellEditor = ({
     setLocalEditing(nextOpen);
   }, []);
 
-  const refSchema = useMemo(() => {
-    if (fieldProjection.props.format === FormatEnum.Ref && fieldProjection.props.referenceSchema) {
-      const { schema: refSchema } = getSchema({
-        typename: fieldProjection.props.referenceSchema,
-      });
-      return refSchema;
-    }
-    return null;
-  }, [fieldProjection.props.format, fieldProjection.props.referenceSchema, getSchema]);
-
-  const createSchema = useMemo(() => {
-    return refSchema ? Schema.omit<any, any, ['id']>('id')(refSchema) : null;
-  }, [refSchema]);
+  const handleSave = useCallback<NonNullable<FormRootProps<any>['onSave']>>(
+    (values) => {
+      const path = fieldProjection.field.path;
+      const value = getDeep(values, [path]);
+      setDeep(originalRow, [path], value);
+      contextEditing?.cellElement?.focus();
+      setEditing(null);
+      setLocalEditing(false);
+      onSave?.();
+    },
+    [fieldProjection.field.path, onSave, contextEditing, originalRow],
+  );
 
-  const handleCreate = useCallback(
-    (values: any) => {
+  const handleCreate = useCallback<NonNullable<FormRootProps<any>['onCreate']>>(
+    (values) => {
       if (refSchema && onCreate) {
         const objectWithId = onCreate(refSchema, values);
         if (objectWithId) {
@@ -182,6 +148,26 @@ export const FormCellEditor = ({
     [fieldProjection.field.path, onSave, contextEditing, originalRow, refSchema, onCreate],
   );
 
+  const handleQueryRefOptions = useCallback<NonNullable<FormRootProps<any>['onQueryRefOptions']>>(
+    async ({ typename }) => {
+      const { schema, space } = getSchema({ typename });
+      if (model && schema && space) {
+        const objects = await space.db.query(Filter.type(schema)).run();
+        return objects
+          .map((obj) => {
+            return {
+              dxn: Obj.getDXN(obj),
+              label: getValue(obj, fieldProjection.field.referencePath!) || obj.id.toString(),
+            };
+          })
+          .filter(isTruthy);
+      }
+
+      return [];
+    },
+    [model],
+  );
+
   if (!editing) {
     return null;
   }
@@ -193,21 +179,28 @@ export const FormCellEditor = ({
         <Popover.Content tabIndex={-1} classNames='popover-card-width density-fine'>
           <Popover.Arrow />
           <Popover.Viewport>
-            <Form
+            <Form.Root
+              {...formProps}
               autoFocus
+              schema={narrowedSchema}
               values={formValues}
-              schema={narrowedSchema as any}
               onSave={handleSave}
-              {...formProps}
               onQueryRefOptions={handleQueryRefOptions}
               {...(createSchema && {
-                onCreate: handleCreate,
                 createSchema,
                 createInitialValuePath: fieldProjection.field.referencePath,
                 createOptionIcon: 'ph--plus--regular',
                 createOptionLabel,
+                onCreate: handleCreate,
               })}
-            />
+            >
+              <Form.Viewport>
+                <Form.Content>
+                  <Form.FieldSet />
+                  <Form.Actions />
+                </Form.Content>
+              </Form.Viewport>
+            </Form.Root>
           </Popover.Viewport>
         </Popover.Content>
       </Popover.Portal>

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

@@ -8,7 +8,7 @@ import React from 'react';
 import { Obj } from '@dxos/echo';
 import { faker } from '@dxos/random';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Grid, type GridEditing, defaultRowSize } from '@dxos/react-ui-grid';
 import { View } from '@dxos/schema';
 import { Task } from '@dxos/types';
@@ -23,15 +23,16 @@ type StoryProps = {
   editing: GridEditing;
 };
 
+// TODO(burdon): Broken layout.
 const DefaultStory = ({ editing }: StoryProps) => {
-  const { model, view } = useTestTableModel();
+  const { model, table } = useTestTableModel();
 
-  if (!model || !view) {
+  if (!model || !table) {
     return <div />;
   }
 
   return (
-    <div className='flex is-[300px] border border-separator' style={{ height: defaultRowSize }}>
+    <div className='border border-separator' style={{ height: defaultRowSize }}>
       <Grid.Root id='test' editing={editing}>
         <TableCellEditor model={model} schema={Task.Task} />
       </Grid.Root>
@@ -45,13 +46,15 @@ const meta = {
   render: DefaultStory,
   decorators: [
     withTheme,
+    withLayout({ container: 'column' }),
     withClientProvider({
       types: [View.View, Task.Task, Table.Table],
       createIdentity: true,
       createSpace: true,
-      onCreateSpace: async ({ client, space }) => {
-        const { view } = await Table.makeView({ client, space, typename: Task.Task.typename });
-        space.db.add(view);
+      onCreateSpace: async ({ space }) => {
+        const { view, jsonSchema } = await View.makeFromSpace({ space, typename: Task.Task.typename });
+        const table = Table.make({ view, jsonSchema });
+        space.db.add(table);
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
             Obj.make(Task.Task, {
@@ -65,8 +68,8 @@ const meta = {
     }),
   ],
   parameters: {
+    layout: 'fullscreen',
     translations,
-    layout: 'centered',
   },
 } satisfies Meta<typeof DefaultStory>;
 

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -4,12 +4,11 @@
 
 import { type Completion } from '@codemirror/autocomplete';
 import { EditorView } from '@codemirror/view';
-import type * as Schema from 'effect/Schema';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import { debounce } from '@dxos/async';
-import type { Client } from '@dxos/client';
-import { FormatEnum, TypeEnum } from '@dxos/echo/internal';
+import { type Type } from '@dxos/echo';
+import { Format, TypeEnum } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { type DxGridAxis, type DxGridPosition } from '@dxos/lit-grid';
 import {
@@ -30,34 +29,37 @@ import { type ModalController, type TableModel } from '../../model';
 import { CellValidationMessage } from './CellValidationMessage';
 import { FormCellEditor, type OnCreateHandler } from './FormCellEditor';
 
+const editorSlots = {
+  scroll: {
+    className: '!plb-[--dx-grid-cell-editor-padding-block]',
+  },
+};
+
 /**
  * Option to create new object/value.
  */
-export type QueryResult = Pick<Completion, 'label'> & { data: any };
+export type QueryResult = Pick<Completion, 'label'> & {
+  data: any;
+};
 
-export type TableCellEditorProps = {
+export type TableCellEditorProps<T extends Type.Entity.Any = Type.Entity.Any> = {
+  schema?: T;
   model?: TableModel;
   modals?: ModalController;
-  schema?: Schema.Schema.AnyNoContext;
   onFocus?: (axis?: DxGridAxis, delta?: -1 | 0 | 1, cell?: DxGridPosition) => void;
   onCreate?: OnCreateHandler;
   onSave?: () => void;
-  client?: Client;
 };
 
-const adaptValidationMessage = (message: string | null) =>
-  message ? (message.endsWith('is missing') ? 'Can’t be blank' : message) : null;
-
-export const TableValueEditor = ({
+export const TableValueEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
+  __gridScope,
+  schema,
   model,
   modals,
-  schema,
   onFocus,
   onSave,
   onCreate,
-  client,
-  __gridScope,
-}: GridScopedProps<TableCellEditorProps>) => {
+}: GridScopedProps<TableCellEditorProps<T>>) => {
   const { editing } = useGridContext('TableValueEditor', __gridScope);
 
   const fieldProjection = useMemo<FieldProjection | undefined>(() => {
@@ -74,36 +76,33 @@ export const TableValueEditor = ({
 
   if (
     fieldProjection?.props.type === TypeEnum.Array ||
-    fieldProjection?.props.format === FormatEnum.SingleSelect ||
-    fieldProjection?.props.format === FormatEnum.Ref
-    // TODO(thure): Support `FormatEnum.MultiSelect`
+    fieldProjection?.props.format === Format.TypeFormat.SingleSelect ||
+    fieldProjection?.props.format === Format.TypeFormat.Ref
+    // TODO(thure): Support `Format.TypeFormat.MultiSelect`
   ) {
     return (
-      <FormCellEditor
-        fieldProjection={fieldProjection}
-        model={model}
-        schema={schema}
+      <FormCellEditor<T>
         __gridScope={__gridScope}
+        schema={schema}
+        model={model}
+        fieldProjection={fieldProjection}
+        modals={modals}
         onSave={onSave}
         onCreate={onCreate}
-        client={client}
-        modals={modals}
       />
     );
   }
 
-  // For all other types, use the existing cell editor
+  // For all other types, use the existing cell editor.
   return <TableCellEditor model={model} modals={modals} onFocus={onFocus} onSave={onSave} __gridScope={__gridScope} />;
 };
 
-const editorSlots = { scroll: { className: '!plb-[--dx-grid-cell-editor-padding-block]' } };
-
 export const TableCellEditor = ({
+  __gridScope,
   model,
   modals,
   onFocus,
   onSave,
-  __gridScope,
 }: GridScopedProps<TableCellEditorProps>) => {
   const { editing, setEditing } = useGridContext('TableCellEditor', __gridScope);
   const suppressNextBlur = useRef(false);
@@ -122,6 +121,7 @@ export const TableCellEditor = ({
     return fieldProjection;
   }, [model, editing]);
 
+  // TOOD(burdon): Attach to event handler?
   const handleEnter = useCallback(
     async (value: any) => {
       if (!model || !editing) {
@@ -138,7 +138,7 @@ export const TableCellEditor = ({
         setEditing(null);
         onSave?.();
       } else {
-        setValidationError(adaptValidationMessage(validationResult.error));
+        setValidationError(validationResult.error);
         setValidationVariant('error');
       }
     },

package/src/components/TableToolbar/TableToolbar.tsx

@@ -58,7 +58,7 @@ const createTableToolbarActions = ({
       const add = createMenuAction<TableToolbarActionProperties>('add-row', onAdd, {
         type: 'add-row' as const,
         icon: 'ph--plus--regular',
-        label: ['add row', { ns: translationKey }],
+        label: ['add row label', { ns: translationKey }],
         testId: 'table.toolbar.add-row',
       });
       nodes.push(add);

package/src/components/testing.ts

@@ -5,13 +5,13 @@
 import * as Schema from 'effect/Schema';
 import { useEffect } from 'react';
 
-import { FormatEnum, ObjectId, TypeEnum, TypedObject, setValue } from '@dxos/echo/internal';
+import { Format } from '@dxos/echo';
+import { TypeEnum, TypedObject, setValue } from '@dxos/echo/internal';
 import { live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { type ProjectionModel } from '@dxos/schema';
 
 export const TestSchema = TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
-  id: ObjectId,
   name: Schema.optional(Schema.String),
   age: Schema.optional(Schema.Number),
   active: Schema.optional(Schema.Boolean),
@@ -88,7 +88,7 @@ export const useSimulator = ({ items, projection, insertInterval, updateInterval
 
         if (format) {
           switch (format) {
-            case FormatEnum.Currency: {
+            case Format.TypeFormat.Currency: {
               item[path] = Math.floor(Math.random() * 1000);
               break;
             }

package/src/hooks/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './useTableModel';
 export * from './useAddRow';
+export * from './useProjectionModel';
+export * from './useTableModel';

package/src/hooks/useProjectionModel.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import { Type } from '@dxos/echo';
+import { ProjectionModel } from '@dxos/schema';
+
+import { type Table } from '../types';
+
+export const useProjectionModel = <S extends Type.Entity.Any>(schema: S | undefined, table: Table.Table | undefined) =>
+  useMemo(() => {
+    if (schema && table?.view.target?.projection) {
+      const projection = new ProjectionModel(Type.toJsonSchema(schema), table.view.target.projection);
+      projection.normalizeView();
+      return projection;
+    }
+  }, [schema, table?.view.target?.projection]);

package/src/hooks/useTableModel.ts

@@ -7,17 +7,16 @@ import orderBy from 'lodash.orderby';
 import { useEffect, useMemo, useState } from 'react';
 
 import { Obj } from '@dxos/echo';
-import { type JsonSchemaType } from '@dxos/echo/internal';
 import { type Live } from '@dxos/live-object';
 import { useSelected, useSelectionActions } from '@dxos/react-ui-attention';
-import { type ProjectionModel, type View } from '@dxos/schema';
+import { type ProjectionModel } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
 import { TableModel, type TableModelProps, type TableRow, type TableRowAction } from '../model';
+import { type Table } from '../types';
 
 export type UseTableModelParams<T extends TableRow = TableRow> = {
-  view?: View.View;
-  schema?: JsonSchemaType;
+  object?: Table.Table;
   projection?: ProjectionModel;
   rows?: Live<T>[];
   rowActions?: TableRowAction[];
@@ -29,8 +28,7 @@ export type UseTableModelParams<T extends TableRow = TableRow> = {
 >;
 
 export const useTableModel = <T extends TableRow = TableRow>({
-  view,
-  schema,
+  object,
   projection,
   rows,
   rowActions,
@@ -39,20 +37,19 @@ export const useTableModel = <T extends TableRow = TableRow>({
   onRowAction,
   ...props
 }: UseTableModelParams<T>): TableModel<T> | undefined => {
-  const selected = useSelected(view && Obj.getDXN(view).toString(), 'multi');
-  const initialSelection = useMemo(() => selected, [view]);
+  const selected = useSelected(object && Obj.getDXN(object).toString(), 'multi');
+  const initialSelection = useMemo(() => selected, [object]);
 
   const [model, setModel] = useState<TableModel<T>>();
   useEffect(() => {
-    if (!view || !schema) {
+    if (!object || !projection) {
       return;
     }
 
     let model: TableModel<T> | undefined;
     const t = setTimeout(async () => {
       model = new TableModel<T>({
-        view,
-        schema,
+        object,
         projection,
         features,
         rowActions,
@@ -68,16 +65,17 @@ export const useTableModel = <T extends TableRow = TableRow>({
       clearTimeout(t);
       void model?.close();
     };
-  }, [view, schema, projection, features, rowActions, initialSelection]); // TODO(burdon): Trigger if callbacks change?
+    // TODO(burdon): Trigger if callbacks change?
+  }, [object, projection, features, rowActions, initialSelection]);
 
   // Update data.
   useEffect(() => {
     if (rows) {
-      // TODO(ZaymonFC): Remove this workaround once unstable query ordering issue is resolved
       /*
        * Sort all objects by string id field as a temporary workaround for query ordering issues
        * Reference: https://github.com/dxos/dxos/pull/9409
        */
+      // TODO(ZaymonFC): Remove this workaround once unstable query ordering issue is resolved
       const sortedRows = orderBy(rows, [(row) => String(row.id)], ['asc']);
       model?.setRows(sortedRows);
     }

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

@@ -12,7 +12,7 @@ import { updateCounter } from '@dxos/echo/testing';
 import { createEchoSchema } from '@dxos/echo/testing';
 import { registerSignalsRuntime } from '@dxos/echo-signals';
 import { live } from '@dxos/live-object';
-import { View } from '@dxos/schema';
+import { ProjectionModel, View } from '@dxos/schema';
 
 import { Table } from '../types';
 
@@ -112,11 +112,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 });
 };