@dxos/react-ui-table 0.8.4-main.67995b8 → 0.8.4-main.70d3990

package/src/model/table-sorting.ts

@@ -2,15 +2,24 @@
 // Copyright 2025 DXOS.org
 //
 
-import { computed, signal, type Signal, type ReadonlySignal } from '@preact/signals-core';
+import { type ReadonlySignal, type Signal, computed, signal } from '@preact/signals-core';
 import orderBy from 'lodash.orderby';
 
-import { getValue, FormatEnum, TypeEnum, type SortDirectionType, type FieldSortType } from '@dxos/echo-schema';
+import { Format, TypeEnum, getValue } from '@dxos/echo/internal';
 import { formatForDisplay } from '@dxos/react-ui-form';
-import type { PropertyType, FieldType, DataType, ProjectionModel } from '@dxos/schema';
+import {
+  type FieldSortType,
+  type FieldType,
+  type ProjectionModel,
+  type PropertyType,
+  type SortDirectionType,
+  type View,
+} from '@dxos/schema';
 
 import { type TableRow } from './table-model';
 
+// TODO(wittjosiah): Remove. Use ordering in queries instead.
+
 /**
  * Represents the local sort state.
  * - undefined: No local sort set, fallback to view sort.
@@ -43,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: DataType.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.query.sort?.[0];
+      const viewSort = this._getView().sort?.[0];
       if (local?.type === 'cleared') {
         return viewSort !== undefined;
       }
@@ -83,7 +100,7 @@ export class TableSorting<T extends TableRow> {
       return local.sort;
     }
 
-    return this._view.query.sort?.[0];
+    return this._getView().sort?.[0];
   }
 
   /**
@@ -128,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.query.sort = [this._localSort.value.sort];
+        view.sort = [this._localSort.value.sort];
       } else {
-        this._view.query.sort = [];
+        view.sort = [];
       }
       this._localSort.value = undefined;
     }
@@ -193,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;
@@ -206,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.getByLabel(format).click();
     await this.page.getByPlaceholder('Property label.').click();
     await this.page.getByPlaceholder('Property label.').fill(label);
-    await this.page.getByRole('button', { name: 'button save' }).click();
+    await this.page.getByRole('button', { name: 'Save' }).click();
   }
 }

package/src/playwright/smoke.spec.ts

@@ -4,16 +4,20 @@
 
 import { expect, test } from '@playwright/test';
 
+import { type DxGrid } from '@dxos/lit-grid';
+import { faker } from '@dxos/random';
 import { setupPage, storybookUrl } from '@dxos/test-utils/playwright';
 
 import { TableManager } from './TableManager';
 
 const storyUrl = storybookUrl('ui-react-ui-table-table--default', 9004);
+const relationsStoryUrl = storybookUrl('ui-react-ui-table-relations--default', 9004);
 
 // NOTE(ZaymonFC): This test suite relies on the faker seed being set to 0 in the story.
 test.describe('Table', () => {
   test('Loads', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -23,6 +27,7 @@ test.describe('Table', () => {
 
   test('sort', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -39,6 +44,7 @@ test.describe('Table', () => {
 
   test('selection', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -60,6 +66,7 @@ test.describe('Table', () => {
 
   test('delete row', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -71,6 +78,7 @@ test.describe('Table', () => {
 
   test('delete row--select all', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -88,6 +96,7 @@ test.describe('Table', () => {
 
   test('delete column', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -114,56 +123,22 @@ test.describe('Table', () => {
   // Rest of add column test remains the same as it's a more complex flow.
   test('add column', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
     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();
   });
 
-  test('reference > reference / create new object', async ({ browser, browserName }) => {
-    test.skip(browserName === 'webkit');
-    const { page } = await setupPage(browser, { url: storyUrl });
-    const table = new TableManager(page);
-
-    await table.grid.ready();
-
-    // Reference existing object.
-    // Scroll over to the manager column.
-    await table.grid.panByWheel(10000, 0);
-
-    await table.grid.cell(4, 0, 'grid').click();
-    // TODO(wittjosiah): Surprisingly long delay needed here.
-    await page.keyboard.press('A', { delay: 1_000 });
-    await page.keyboard.press('u', { delay: 1_000 });
-    await page.getByRole('option', { name: 'Aut.' }).click();
-
-    // Assert that the value is shown in the cell.
-    await expect(page.getByRole('gridcell', { name: 'Aut.' }).first()).toBeVisible();
-
-    // Create new object.
-    await table.grid.cell(4, 1, 'grid').click();
-    // TODO(wittjosiah): Surprisingly long delay needed here.
-    await page.keyboard.type('t', { delay: 1_000 });
-    await page.keyboard.type('e', { delay: 1_000 });
-    await page.keyboard.type('s', { delay: 1_000 });
-    await page.keyboard.type('t', { delay: 1_000 });
-    await page.getByText('Create new object', { exact: false }).click();
-    await page.getByTestId('save-button').click();
-
-    // Scroll to the left.
-    await page.getByRole('gridcell', { name: 'test' }).first().click();
-
-    await page.close();
-  });
-
-  test('test toggles', async ({ browser, browserName }) => {
+  test.skip('test toggles', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -183,4 +158,123 @@ test.describe('Table', () => {
 
     await page.close();
   });
+
+  // TODO(wittjosiah): Remove? Conflicts with story play function which is run as a unit test anyways.
+  test.skip('extant relations work as expected', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
+    const { page } = await setupPage(browser, { url: relationsStoryUrl });
+
+    // Wait for the page to load
+    await page.locator('dx-grid > .dx-grid').nth(1).waitFor({ state: 'visible' });
+
+    // Find the dx-grid element for the contactModel (second table)
+    // The contactModel is used in the second Table.Main component in the story
+    const dxGrid = page.locator('dx-grid').nth(1);
+    await dxGrid.waitFor({ state: 'visible' });
+
+    // Scroll to the last column (column 4)
+    await dxGrid.evaluate(async (dxGridElement: DxGrid) => {
+      dxGridElement.scrollToColumn(4);
+    });
+
+    // Click on the cell at aria-rowindex=0 aria-colindex=4 to focus it
+    const targetCell = dxGrid.locator('[data-dx-grid-plane="grid"] [aria-rowindex="0"][aria-colindex="4"]');
+    await targetCell.click();
+
+    // Click again to engage edit mode
+    await page.keyboard.press('Enter');
+
+    // Click on the combobox to open options
+    await page.getByRole('combobox').click();
+    await page.pause();
+    await page.getByPlaceholder('Search…').focus();
+
+    // Type the first few letters of an org name.
+    const orgName =
+      (await page
+        .locator('dx-grid')
+        .nth(0)
+        .locator('[data-dx-grid-plane="grid"] [aria-rowindex="0"][aria-colindex="0"] .dx-grid__cell__content')
+        .textContent()) ?? 'never';
+    await page.keyboard.type(orgName.substring(0, 4), { delay: 500 });
+
+    // Assert that there is an element with aria-selected on the page
+    await expect(page.locator('[role="option"][aria-selected]')).toBeVisible();
+
+    // Type the enter key
+    await page.keyboard.press('Enter');
+
+    // Save the result
+    await page.getByTestId('save-button').click();
+
+    // Assert that the cell element has the org name
+    await expect(targetCell).toHaveText(orgName);
+
+    await page.close();
+  });
+
+  // TODO(wittjosiah): Remove? Conflicts with story play function which is run as a unit test anyways.
+  test.skip('new relations work as expected', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
+    const { page } = await setupPage(browser, { url: relationsStoryUrl });
+
+    // Wait for the page to load
+    await page.locator('dx-grid > .dx-grid').nth(1).waitFor({ state: 'visible' });
+
+    // Find the dx-grid element for the contactModel (second table)
+    // The contactModel is used in the second Table.Main component in the story
+    const dxGrid = page.locator('dx-grid').nth(1);
+    await dxGrid.waitFor({ state: 'visible' });
+
+    // Scroll to the last column (column 4)
+    await dxGrid.evaluate(async (dxGridElement: DxGrid) => {
+      dxGridElement.scrollToColumn(4);
+    });
+
+    // Click on the cell at aria-rowindex=0 aria-colindex=8 to focus it
+    const targetCell = dxGrid.locator('[data-dx-grid-plane="grid"] [aria-rowindex="0"][aria-colindex="4"]');
+    await targetCell.click();
+
+    // Click again to engage edit mode
+    await page.keyboard.press('Enter');
+
+    // Click on the combobox to open options
+    await page.getByRole('combobox').click();
+    await page.getByPlaceholder('Search…').focus();
+
+    // Type the first few letters of an org name.
+    const orgName = 'Sally';
+    await page.keyboard.type(orgName, { delay: 500 });
+
+    // Assert that there is an element with aria-selected on the page
+    await expect(page.locator('[role="option"][aria-selected]')).toBeVisible();
+
+    // Type the enter key
+    await page.keyboard.press('Enter');
+    await page.pause();
+
+    // Click the save button in the popover
+    await page.getByTestId('create-referenced-object-form').getByTestId('save-button').click();
+
+    // Assert that the cell element has the org name
+    await expect(targetCell).toHaveText(orgName);
+
+    // Make a change to a non-ref cell to check that populated refs don’t cause problems with snapshots or schemas.
+    await dxGrid.evaluate(async (dxGridElement: DxGrid) => {
+      dxGridElement.scrollToColumn(6);
+    });
+
+    const nonRefContent = faker.lorem.words(3);
+    const nonRefCell = dxGrid.locator('[data-dx-grid-plane="grid"] [aria-rowindex="0"][aria-colindex="6"]');
+    await nonRefCell.click();
+    await page.keyboard.press('Enter');
+    await page.getByTestId('grid.cell-editor').waitFor({ state: 'visible' });
+    await page.keyboard.type(nonRefContent, { delay: 500 });
+    await page.keyboard.press('Enter');
+    await expect(nonRefCell).toHaveText(nonRefContent);
+
+    await page.close();
+  });
 });

package/src/testing/useTestTableModel.ts

@@ -2,40 +2,52 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useCallback, useMemo, useRef } from 'react';
+import type * as Schema from 'effect/Schema';
+import { type RefObject, useCallback, useMemo, useRef } from 'react';
 
-import { isMutable, toJsonSchema } from '@dxos/echo-schema';
+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 { 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 { DataType, ProjectionModel } from '@dxos/schema';
+import { type ProjectionModel, getTypenameFromQuery } from '@dxos/schema';
 
 import { type TableController } from '../components';
-import { useTableModel, useAddRow } 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 = {
+  schema: Schema.Schema.AnyNoContext | undefined;
+  table: Table.Table | undefined;
+  projection: ProjectionModel | undefined;
+  tableRef: RefObject<TableController | null>;
+  model: TableModel | undefined;
+  presentation: TablePresentation | undefined;
+  space: Space | undefined;
+  client: Client | 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 = () => {
+export const useTestTableModel = (): TestTableModel => {
   const client = useClient();
   const { space } = useClientProvider();
 
-  const views = useQuery(space, Filter.type(DataType.View));
-  const view = useMemo(() => views.at(0), [views]);
-  const schema = useSchema(client, space, view?.query.typename);
-  const jsonSchema = useMemo(() => (schema ? toJsonSchema(schema) : undefined), [schema]);
-
-  const projection = useMemo(() => {
-    if (schema && view?.projection) {
-      return new ProjectionModel(toJsonSchema(schema), view.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(client, space, typename);
+  const projection = useProjectionModel(schema, table);
 
   const features = useMemo(
     () => ({
@@ -79,8 +91,7 @@ export const useTestTableModel = () => {
   );
 
   const model = useTableModel({
-    view,
-    schema: jsonSchema,
+    object: table,
     projection,
     features,
     rows: filteredObjects,
@@ -92,7 +103,8 @@ export const useTestTableModel = () => {
   });
 
   const handleInsertRow = useCallback(() => {
-    model?.insertRow();
+    const insertResult = model?.insertRow();
+    tableRef.current?.handleInsertRowResult?.(insertResult);
   }, [model]);
 
   const handleSaveView = useCallback(() => {
@@ -107,7 +119,7 @@ export const useTestTableModel = () => {
 
   return {
     schema,
-    view,
+    table,
     projection,
     tableRef,
     model,

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': 'Schema',
-        'new schema': 'New schema',
+        '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,89 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Match from 'effect/Match';
+import * as Schema from 'effect/Schema';
+
+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';
+
+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 = getSchemaProperties(schema.ast, {});
+    for (const property of properties) {
+      if (sizes?.[property.name]) {
+        table.sizes[property.name] = sizes[property.name];
+        continue;
+      }
+
+      Match.type<SimpleType>().pipe(
+        Match.when('boolean', () => {
+          table.sizes[property.name as JsonPath] = 100;
+        }),
+        Match.when('number', () => {
+          table.sizes[property.name as JsonPath] = 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 * from './schema';
+export * as Table from './Table';

package/src/util/dynamic-table.ts

@@ -2,20 +2,18 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema } from 'effect';
+import type * as Schema from 'effect/Schema';
 
-import { Obj } from '@dxos/echo';
-import { getTypename, toJsonSchema } from '@dxos/echo-schema';
-import type { JsonSchemaType, SortDirectionType } from '@dxos/echo-schema';
+import { Filter, type JsonSchema, Obj, Query, Ref, Type } from '@dxos/echo';
 import {
-  createView,
-  type DataType,
-  getSchemaFromPropertyDefinitions,
   ProjectionModel,
   type SchemaPropertyDefinition,
+  type SortDirectionType,
+  View,
+  getSchemaFromPropertyDefinitions,
 } from '@dxos/schema';
 
-import { TableView } from '../types';
+import { Table } from '../types';
 
 // TODO(ZaymonFC): Upstream these extra fields to SchemaPropertyDefinition to enhance schema-tools schema creation.
 type PropertyDisplayProps = {
@@ -38,14 +36,14 @@ export const getBaseSchema = ({
 }: {
   typename?: string;
   properties?: TablePropertyDefinition[];
-  jsonSchema?: JsonSchemaType;
+  jsonSchema?: JsonSchema.JsonSchema;
   schema?: Schema.Schema.AnyNoContext;
-}): { typename: string; jsonSchema: JsonSchemaType } => {
+}): { 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 {
@@ -54,34 +52,32 @@ export const getBaseSchema = ({
 };
 
 export const makeDynamicTable = ({
-  typename,
   jsonSchema,
   properties,
 }: {
-  typename: string;
-  jsonSchema: JsonSchemaType;
+  jsonSchema: JsonSchema.JsonSchema;
   properties?: TablePropertyDefinition[];
-}): { projection: ProjectionModel; view: DataType.View } => {
-  const table = Obj.make(TableView, { sizes: {} });
-  const view = createView({
-    typename,
+}): { 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 = (
-  view: DataType.View,
+  view: View.View,
   projection: ProjectionModel,
-  table: TableView,
+  table: Table.Table,
   properties: TablePropertyDefinition[],
 ) => {
   for (const property of properties) {
@@ -101,7 +97,7 @@ const setProperties = (
 
       if (property.sort) {
         const fieldId = field.id;
-        view.query.sort = [{ fieldId, direction: property.sort }];
+        view.sort = [{ fieldId, direction: property.sort }];
       }
     }
   }

package/src/util/index.ts

@@ -4,7 +4,6 @@
 
 export * from './dynamic-table';
 export * from './signals';
-export * from './table';
 export * from './table-buttons';
 export * from './table-controls';
 export * from './schema';