@dxos/react-ui-table 0.8.4-main.406dc2a → 0.8.4-main.548089c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.8.4-main.406dc2a",
+  "version": "0.8.4-main.548089c",
   "description": "A table component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -65,61 +65,62 @@
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
     "lodash.orderby": "^4.6.0",
-    "@dxos/async": "0.8.4-main.406dc2a",
-    "@dxos/debug": "0.8.4-main.406dc2a",
-    "@dxos/context": "0.8.4-main.406dc2a",
-    "@dxos/echo": "0.8.4-main.406dc2a",
-    "@dxos/effect": "0.8.4-main.406dc2a",
-    "@dxos/echo-db": "0.8.4-main.406dc2a",
-    "@dxos/keys": "0.8.4-main.406dc2a",
-    "@dxos/invariant": "0.8.4-main.406dc2a",
-    "@dxos/lit-grid": "0.8.4-main.406dc2a",
-    "@dxos/log": "0.8.4-main.406dc2a",
-    "@dxos/plugin-search": "0.8.4-main.406dc2a",
-    "@dxos/random": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-attention": "0.8.4-main.406dc2a",
-    "@dxos/live-object": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-editor": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-components": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-form": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-grid": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-menu": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-searchlist": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-stack": "0.8.4-main.406dc2a",
-    "@dxos/react-client": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-types": "0.8.4-main.406dc2a",
-    "@dxos/schema": "0.8.4-main.406dc2a",
-    "@dxos/util": "0.8.4-main.406dc2a"
+    "@dxos/context": "0.8.4-main.548089c",
+    "@dxos/async": "0.8.4-main.548089c",
+    "@dxos/debug": "0.8.4-main.548089c",
+    "@dxos/echo": "0.8.4-main.548089c",
+    "@dxos/invariant": "0.8.4-main.548089c",
+    "@dxos/effect": "0.8.4-main.548089c",
+    "@dxos/keys": "0.8.4-main.548089c",
+    "@dxos/lit-grid": "0.8.4-main.548089c",
+    "@dxos/echo-db": "0.8.4-main.548089c",
+    "@dxos/live-object": "0.8.4-main.548089c",
+    "@dxos/log": "0.8.4-main.548089c",
+    "@dxos/random": "0.8.4-main.548089c",
+    "@dxos/react-client": "0.8.4-main.548089c",
+    "@dxos/plugin-search": "0.8.4-main.548089c",
+    "@dxos/react-ui-attention": "0.8.4-main.548089c",
+    "@dxos/react-ui-editor": "0.8.4-main.548089c",
+    "@dxos/react-ui-components": "0.8.4-main.548089c",
+    "@dxos/react-ui-form": "0.8.4-main.548089c",
+    "@dxos/react-ui-grid": "0.8.4-main.548089c",
+    "@dxos/react-ui-menu": "0.8.4-main.548089c",
+    "@dxos/react-ui-searchlist": "0.8.4-main.548089c",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.548089c",
+    "@dxos/types": "0.8.4-main.548089c",
+    "@dxos/react-ui-types": "0.8.4-main.548089c",
+    "@dxos/util": "0.8.4-main.548089c",
+    "@dxos/react-ui-stack": "0.8.4-main.548089c",
+    "@dxos/schema": "0.8.4-main.548089c"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "0.42.4",
+    "@effect-atom/atom-react": "^0.3.4",
     "@effect/platform": "0.92.1",
     "@types/lodash.orderby": "^4.6.9",
     "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.1",
+    "@types/react-dom": "~19.2.2",
     "effect": "3.18.3",
     "fast-check": "^3.19.0",
     "react": "~19.2.0",
     "react-dom": "~19.2.0",
     "vite": "7.1.9",
-    "@dxos/echo-signals": "0.8.4-main.406dc2a",
-    "@dxos/plugin-search": "0.8.4-main.406dc2a",
-    "@dxos/react-ui": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-theme": "0.8.4-main.406dc2a",
-    "@dxos/lit-ui": "0.8.4-main.406dc2a",
-    "@dxos/random": "0.8.4-main.406dc2a",
-    "@dxos/storybook-utils": "0.8.4-main.406dc2a",
-    "@dxos/test-utils": "0.8.4-main.406dc2a"
+    "@dxos/lit-ui": "0.8.4-main.548089c",
+    "@dxos/plugin-search": "0.8.4-main.548089c",
+    "@dxos/echo-signals": "0.8.4-main.548089c",
+    "@dxos/random": "0.8.4-main.548089c",
+    "@dxos/react-ui": "0.8.4-main.548089c",
+    "@dxos/react-ui-theme": "0.8.4-main.548089c",
+    "@dxos/storybook-utils": "0.8.4-main.548089c",
+    "@dxos/test-utils": "0.8.4-main.548089c"
   },
   "peerDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
+    "@effect-atom/atom-react": "^0.3.4",
     "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-theme": "0.8.4-main.406dc2a"
+    "@dxos/react-ui": "0.8.4-main.548089c",
+    "@dxos/react-ui-theme": "0.8.4-main.548089c"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Table/DynamicTable.stories.tsx

@@ -132,7 +132,7 @@ export const WithEchoSchema: StoryObj = {
   render: () => {
     const client = useClient();
     const { space } = useClientProvider();
-    const schema = useSchema(client, space, Testing.Contact.typename);
+    const schema = useSchema(client, space, Testing.Person.typename);
     const objects = useQuery(space, schema ? Filter.type(schema) : Filter.nothing());
     if (!schema) {
       return <div>Loading schema...</div>;
@@ -142,13 +142,13 @@ export const WithEchoSchema: StoryObj = {
   },
   decorators: [
     withClientProvider({
-      types: [Testing.Contact],
+      types: [Testing.Person],
       createIdentity: true,
       createSpace: true,
       onCreateSpace: async ({ space }) => {
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
-            Obj.make(Testing.Contact, {
+            Obj.make(Testing.Person, {
               name: faker.person.fullName(),
               email: faker.internet.email(),
             }),

package/src/components/Table/Relations.stories.tsx

@@ -15,10 +15,11 @@ import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { translations as formTranslations } from '@dxos/react-ui-form';
-import { DataType } from '@dxos/schema';
+import { View } from '@dxos/schema';
 import { type ValueGenerator, createAsyncGenerator } from '@dxos/schema/testing';
+import { Organization, Person } from '@dxos/types';
 
 import { useTableModel } from '../../hooks';
 import { type TableFeatures, TablePresentation, type TableRow } from '../../model';
@@ -37,7 +38,7 @@ const generator: ValueGenerator = faker as any;
 const useTestModel = <S extends Type.Obj.Any>(schema: S, count: number) => {
   const client = useClient();
   const { space } = useClientProvider();
-  const [view, setView] = useState<DataType.View>();
+  const [view, setView] = useState<View.View>();
   const [jsonSchema, setJsonSchema] = useState<JsonSchemaType>();
 
   const features = useMemo<TableFeatures>(
@@ -87,8 +88,8 @@ const useTestModel = <S extends Type.Obj.Any>(schema: S, count: number) => {
 
 const DefaultStory = () => {
   const client = useClient();
-  const { model: orgModel, presentation: orgPresentation } = useTestModel(DataType.Organization, 50);
-  const { model: contactModel, presentation: contactPresentation } = useTestModel(DataType.Person, 50);
+  const { model: orgModel, presentation: orgPresentation } = useTestModel(Organization.Organization, 50);
+  const { model: contactModel, presentation: contactPresentation } = useTestModel(Person.Person, 50);
   const { space } = useClientProvider();
 
   const handleCreate = useCallback(
@@ -103,7 +104,7 @@ const DefaultStory = () => {
       <TableComponent.Root>
         <TableComponent.Main
           model={orgModel}
-          schema={DataType.Organization}
+          schema={Organization.Organization}
           presentation={orgPresentation}
           onCreate={handleCreate}
           client={client}
@@ -114,7 +115,7 @@ const DefaultStory = () => {
       <TableComponent.Root>
         <TableComponent.Main
           model={contactModel}
-          schema={DataType.Person}
+          schema={Person.Person}
           presentation={contactPresentation}
           onCreate={handleCreate}
           client={client}
@@ -131,8 +132,10 @@ const meta = {
   render: DefaultStory,
   decorators: [
     withTheme,
+    // TODO(thure): Shouldn’t `layout: 'fullscreen'` below make this unnecessary?
+    withLayout({ classNames: 'fixed inset-0' }),
     withClientProvider({
-      types: [DataType.View, DataType.Organization, DataType.Person, Table.Table],
+      types: [View.View, Organization.Organization, Person.Person, Table.Table],
       createIdentity: true,
       createSpace: true,
     }),
@@ -149,9 +152,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  // TODO(wittjosiah): This test is flaky, especially in CI.
-  //   Most typical failure is `targetCell` returns `null`.
-  _play: async ({ canvasElement }: any) => {
+  play: async ({ canvasElement }: any) => {
     const canvas = within(canvasElement);
     const body = within(document.body);
 
@@ -165,11 +166,8 @@ export const Default: Story = {
     // Scroll to the relations column (column 4) - this mimics the scrollToColumn call
     (secondGrid.closest('dx-grid') as DxGrid).scrollToColumn(4);
 
-    // Wait for scroll to complete
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-
     // Find and click the target cell (first row, relations column)
-    const targetCell = secondGrid.querySelector('[data-dx-grid-plane="grid"] [aria-rowindex="0"][aria-colindex="4"]');
+    const targetCell = await within(secondGrid).findByTestId('grid.4.0', undefined, { timeout: 10_000 });
     await expect(targetCell).toBeVisible();
 
     // Click to focus the cell
@@ -185,11 +183,9 @@ export const Default: Story = {
     await userEvent.click(searchField);
 
     // Get the first organization name from the first table to search for
-    const orgCell = firstGrid.querySelector(
-      '[data-dx-grid-plane="grid"] [aria-rowindex="0"][aria-colindex="0"] .dx-grid__cell__content',
-    ) as HTMLElement;
+    const orgCell = await within(firstGrid).findByTestId('grid.0.0', undefined, { timeout: 10_000 });
 
-    const orgName = orgCell.textContent;
+    const orgName = (orgCell.querySelector('.dx-grid__cell__content') as HTMLElement).textContent;
     // Type the first 4 characters to search
     await userEvent.type(searchField, orgName.substring(0, 4));
 
@@ -209,9 +205,7 @@ export const Default: Story = {
 
     // Test object creation (new relations) - equivalent to "new relations work as expected" test
     // Find a different cell to test object creation (second row, relations column)
-    const newTargetCell = secondGrid.querySelector(
-      '[data-dx-grid-plane="grid"] [aria-rowindex="1"][aria-colindex="4"]',
-    );
+    const newTargetCell = await within(secondGrid).findByTestId('grid.4.1', undefined, { timeout: 10_000 });
     await expect(newTargetCell).toBeTruthy();
 
     // Click to focus the cell

package/src/components/Table/RowActionsMenu.tsx

@@ -23,24 +23,32 @@ export const RowActionsMenu = ({ model, modals }: RowActionsMenuProps) => {
       <DropdownMenu.VirtualTrigger virtualRef={modals.trigger} />
       <DropdownMenu.Content>
         <DropdownMenu.Viewport>
+          {/* Custom actions */}
+          {model.rowActions?.length > 0 && (
+            <>
+              <DropdownMenu.Group>
+                {model.rowActions?.map((action) => (
+                  <DropdownMenu.Item
+                    key={action.id}
+                    data-testid={`row-action-${action.id}`}
+                    onClick={() => {
+                      modals.close();
+                      model.handleRowAction(action.id, state.rowIndex);
+                    }}
+                  >
+                    {toLocalizedString(action.label, t)}
+                  </DropdownMenu.Item>
+                ))}
+              </DropdownMenu.Group>
+              <DropdownMenu.Separator />
+            </>
+          )}
+          {/* Default actions */}
           {model.features.dataEditable !== false && (
             <DropdownMenu.Item data-testid='row-menu-delete' onClick={() => model.deleteRow(state.rowIndex)}>
               {t(hasSelection ? 'bulk delete row label' : 'delete row label')}
             </DropdownMenu.Item>
           )}
-          {/* Custom actions */}
-          {model.rowActions?.map((action) => (
-            <DropdownMenu.Item
-              key={action.id}
-              data-testid={`row-action-${action.id}`}
-              onClick={() => {
-                modals.close();
-                model.handleRowAction(action.id, state.rowIndex);
-              }}
-            >
-              {toLocalizedString(action.label, t)}
-            </DropdownMenu.Item>
-          ))}
         </DropdownMenu.Viewport>
         <DropdownMenu.Arrow />
       </DropdownMenu.Content>

package/src/components/Table/Table.stories.tsx

@@ -24,7 +24,7 @@ import { withClientProvider } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/react-ui/testing';
 import { ViewEditor } from '@dxos/react-ui-form';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { DataType, getSchemaFromPropertyDefinitions, getTypenameFromQuery } from '@dxos/schema';
+import { View, getSchemaFromPropertyDefinitions, getTypenameFromQuery } from '@dxos/schema';
 import { Testing, createObjectFactory } from '@dxos/schema/testing';
 
 import { useTestTableModel } from '../../testing';
@@ -70,7 +70,7 @@ const StoryViewEditor = ({
   space,
   handleDeleteColumn,
 }: {
-  view?: DataType.View;
+  view?: View.View;
   schema?: Schema.Schema.AnyNoContext;
   space?: Space;
   handleDeleteColumn: (fieldId: string) => void;
@@ -138,7 +138,7 @@ const DefaultStory = () => {
           />
         </TableComponent.Root>
       </div>
-      <div className='flex flex-col h-full border-l border-separator overflow-y-auto'>
+      <div className='flex flex-col bs-full border-l border-separator overflow-y-auto'>
         <StoryViewEditor view={view} schema={schema} space={space} handleDeleteColumn={handleDeleteColumn} />
         <SyntaxHighlighter language='json' className='text-xs'>
           {JSON.stringify({ view, schema }, null, 2)}
@@ -162,15 +162,15 @@ const meta = {
   decorators: [
     withTheme,
     withClientProvider({
-      types: [DataType.View, Table.Table],
+      types: [View.View, Table.Table],
       createIdentity: true,
       createSpace: true,
       onCreateSpace: async ({ client, space }) => {
         const [schema] = await space.db.schemaRegistry.register([TestSchema]);
         const { view } = await Table.makeView({ client, space, typename: schema.typename });
         view.projection.fields = [
-          view.projection.fields.find((field) => field.path === 'name')!,
-          ...view.projection.fields.filter((field) => field.path !== 'name'),
+          view.projection.fields.find((field: any) => field.path === 'name')!,
+          ...view.projection.fields.filter((field: any) => field.path !== 'name'),
         ];
 
         space.db.add(view);
@@ -206,16 +206,16 @@ export const StaticSchema: StoryObj = {
   render: DefaultStory,
   decorators: [
     withClientProvider({
-      types: [DataType.View, Table.Table, Testing.Contact, Testing.Organization],
+      types: [View.View, Table.Table],
       createIdentity: true,
       createSpace: true,
       onCreateSpace: async ({ client, space }) => {
-        const { view } = await Table.makeView({ client, space, typename: Testing.Contact.typename });
+        const { view } = await Table.makeView({ client, space, typename: Testing.Person.typename });
         space.db.add(view);
 
         const factory = createObjectFactory(space.db, faker as any);
         await factory([
-          { type: Testing.Contact, count: 10 },
+          { type: Testing.Person, count: 10 },
           // { type: Testing.Organization, count: 1 },
         ]);
       },
@@ -248,7 +248,7 @@ export const ArrayOfObjects: StoryObj = {
   render: DefaultStory,
   decorators: [
     withClientProvider({
-      types: [DataType.View, Table.Table, Testing.Contact, Testing.Organization, ContactWithArrayOfEmails],
+      types: [View.View, Table.Table, Testing.Person, Testing.Organization, ContactWithArrayOfEmails],
       createIdentity: true,
       createSpace: true,
       onCreateSpace: async ({ client, space }) => {
@@ -257,7 +257,7 @@ export const ArrayOfObjects: StoryObj = {
 
         const factory = createObjectFactory(space.db, faker as any);
         await factory([
-          // { type: Testing.Contact, count: 10 },
+          // { type: Testing.Person, count: 10 },
           // { type: Testing.Organization, count: 1 },
           { type: ContactWithArrayOfEmails, count: 10 },
         ]);
@@ -275,7 +275,7 @@ export const Tags: Meta<StoryProps> = {
   render: DefaultStory,
   decorators: [
     withClientProvider({
-      types: [DataType.View, Table.Table],
+      types: [View.View, Table.Table],
       createIdentity: true,
       createSpace: true,
       onCreateSpace: async ({ client, space }) => {

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

@@ -10,7 +10,8 @@ import { faker } from '@dxos/random';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/react-ui/testing';
 import { Grid, type GridEditing, defaultRowSize } from '@dxos/react-ui-grid';
-import { DataType } from '@dxos/schema';
+import { View } from '@dxos/schema';
+import { Task } from '@dxos/types';
 
 import { useTestTableModel } from '../../testing';
 import { translations } from '../../translations';
@@ -32,7 +33,7 @@ const DefaultStory = ({ editing }: StoryProps) => {
   return (
     <div className='flex w-[300px] border border-separator' style={{ height: defaultRowSize }}>
       <Grid.Root id='test' editing={editing}>
-        <TableCellEditor model={model} schema={DataType.Task} />
+        <TableCellEditor model={model} schema={Task.Task} />
       </Grid.Root>
     </div>
   );
@@ -45,15 +46,15 @@ const meta = {
   decorators: [
     withTheme,
     withClientProvider({
-      types: [DataType.View, DataType.Task, Table.Table],
+      types: [View.View, Task.Task, Table.Table],
       createIdentity: true,
       createSpace: true,
       onCreateSpace: async ({ client, space }) => {
-        const { view } = await Table.makeView({ client, space, typename: DataType.Task.typename });
+        const { view } = await Table.makeView({ client, space, typename: Task.Task.typename });
         space.db.add(view);
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
-            Obj.make(DataType.Task, {
+            Obj.make(Task.Task, {
               title: faker.person.fullName(),
               status: faker.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
               description: faker.lorem.sentence(),

package/src/components/TableToolbar/TableToolbar.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
+import { Atom } from '@effect-atom/atom-react';
 import React, { useMemo } from 'react';
 
 import { live } from '@dxos/live-object';
@@ -30,12 +30,14 @@ export type TableToolbarActionType = 'add-row' | 'comment' | 'save-view';
 
 type TableToolbarState = Partial<{ viewDirty: boolean }>;
 
+// TODO(burdon): Radix style layout.
+
 export type TableToolbarProps = ThemedClassName<
   TableToolbarState & {
     onAdd: () => void;
     onSave: () => void;
     attendableId?: string;
-    customActions?: Rx.Rx<ActionGraphProps>;
+    customActions?: Atom.Atom<ActionGraphProps>;
   }
 >;
 
@@ -46,33 +48,41 @@ const createTableToolbarActions = ({
   customActions,
 }: {
   state: TableToolbarState;
-  onAdd: () => void;
-  onSave: () => void;
-  customActions?: Rx.Rx<ActionGraphProps>;
+  onAdd?: () => void;
+  onSave?: () => void;
+  customActions?: Atom.Atom<ActionGraphProps>;
 }) =>
-  Rx.make((get) => {
-    const add = createMenuAction<TableToolbarActionProperties>('add-row', onAdd, {
-      type: 'add-row' as const,
-      icon: 'ph--plus--regular',
-      label: ['add row', { ns: translationKey }],
-      testId: 'table.toolbar.add-row',
-    });
-    const save = createMenuAction<TableToolbarActionProperties>('save-view', onSave, {
-      type: 'save-view' as const,
-      icon: 'ph--floppy-disk--regular',
-      label: ['save view label', { ns: translationKey }],
-      testId: 'table.toolbar.save-view',
-      iconOnly: false,
-      hidden: get(rxFromSignal(() => !state.viewDirty)),
-    });
+  Atom.make((get) => {
+    const nodes: ActionGraphNodes = [];
+    if (onAdd) {
+      const add = createMenuAction<TableToolbarActionProperties>('add-row', onAdd, {
+        type: 'add-row' as const,
+        icon: 'ph--plus--regular',
+        label: ['add row', { ns: translationKey }],
+        testId: 'table.toolbar.add-row',
+      });
+      nodes.push(add);
+    }
+    if (onSave) {
+      const save = createMenuAction<TableToolbarActionProperties>('save-view', onSave, {
+        type: 'save-view' as const,
+        icon: 'ph--floppy-disk--regular',
+        label: ['save view label', { ns: translationKey }],
+        testId: 'table.toolbar.save-view',
+        iconOnly: false,
+        hidden: get(rxFromSignal(() => !state.viewDirty)),
+      });
+      nodes.push(save);
+    }
     const gap = createGapSeparator();
-    const nodes: ActionGraphNodes = [add, save, ...gap.nodes];
+    nodes.push(...gap.nodes);
     const edges: ActionGraphEdges = nodes.map(({ id: target }) => ({ source: 'root', target }));
     if (customActions) {
       const custom = get(customActions);
       nodes.push(...custom.nodes);
       edges.push(...custom.edges);
     }
+
     return {
       nodes,
       edges,

package/src/hooks/useTableModel.ts

@@ -6,17 +6,17 @@ import { effect } from '@preact/signals-core';
 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 { fullyQualifiedId } from '@dxos/react-client/echo';
 import { useSelected, useSelectionActions } from '@dxos/react-ui-attention';
-import { type DataType, type ProjectionModel } from '@dxos/schema';
+import { type ProjectionModel, type View } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
 import { TableModel, type TableModelProps, type TableRow, type TableRowAction } from '../model';
 
 export type UseTableModelParams<T extends TableRow = TableRow> = {
-  view?: DataType.View;
+  view?: View.View;
   schema?: JsonSchemaType;
   projection?: ProjectionModel;
   rows?: Live<T>[];
@@ -39,7 +39,7 @@ export const useTableModel = <T extends TableRow = TableRow>({
   onRowAction,
   ...props
 }: UseTableModelParams<T>): TableModel<T> | undefined => {
-  const selected = useSelected(view && fullyQualifiedId(view), 'multi');
+  const selected = useSelected(view && Obj.getDXN(view).toString(), 'multi');
   const initialSelection = useMemo(() => selected, [view]);
 
   const [model, setModel] = useState<TableModel<T>>();

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 { createView } from '@dxos/schema';
+import { View } from '@dxos/schema';
 
 import { Table } from '../types';
 
@@ -113,7 +113,7 @@ 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 = createView({
+  const view = View.make({
     query: Query.select(Filter.type(schema)),
     jsonSchema: schema.jsonSchema,
     presentation: table,

package/src/model/table-model.ts

@@ -18,7 +18,6 @@ import {
 import { invariant } from '@dxos/invariant';
 import { ObjectId } from '@dxos/keys';
 import { getSnapshot, isLiveObject } from '@dxos/live-object';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
 import { type Label } from '@dxos/react-ui';
 import { formatForEditing, parseValue } from '@dxos/react-ui-form';
 import {
@@ -28,11 +27,11 @@ import {
   type DxGridPosition,
 } from '@dxos/react-ui-grid';
 import {
-  type DataType,
   type FieldSortType,
   ProjectionModel,
   type PropertyType,
   type ValidationError,
+  type View,
   validateSchema,
 } from '@dxos/schema';
 
@@ -78,7 +77,7 @@ const defaultFeatures: TableFeatures = {
 export type InsertRowResult = 'draft' | 'final';
 
 export type TableModelProps<T extends TableRow = TableRow> = {
-  view: DataType.View;
+  view: View.View;
   schema: JsonSchemaType;
   projection?: ProjectionModel;
   features?: Partial<TableFeatures>;
@@ -96,7 +95,7 @@ export type TableModelProps<T extends TableRow = TableRow> = {
 };
 
 export class TableModel<T extends TableRow = TableRow> extends Resource {
-  private readonly _view: DataType.View;
+  private readonly _view: View.View;
   private readonly _projection: ProjectionModel;
   private _table?: Table.Table;
 
@@ -176,10 +175,10 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   }
 
   public get id(): string {
-    return fullyQualifiedId(this._view);
+    return Obj.getDXN(this._view).toString();
   }
 
-  public get view(): DataType.View {
+  public get view(): View.View {
     return this._view;
   }
 
@@ -480,7 +479,11 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       }
 
       default: {
-        return formatForEditing({ type: props.type, format: props.format, value });
+        return formatForEditing({
+          type: props.type,
+          format: props.format,
+          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 { createView } from '@dxos/schema';
+import { View } from '@dxos/schema';
 
 import { Table } from '../types';
 
@@ -96,7 +96,7 @@ 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 = createView({
+  const view = View.make({
     query: Query.select(Filter.type(schema)),
     jsonSchema: schema.jsonSchema,
     presentation: table,