@dxos/react-ui-table 0.8.3 → 0.8.4-main.c1de068

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.8.3",
+  "version": "0.8.4-main.c1de068",
   "description": "A table component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -19,6 +19,11 @@
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
     },
+    "./testing": {
+      "types": "./dist/types/src/testing/index.d.ts",
+      "browser": "./dist/lib/browser/testing/index.mjs",
+      "node": "./dist/lib/node-esm/testing/index.mjs"
+    },
     "./types": {
       "types": "./dist/types/src/types/index.d.ts",
       "browser": "./dist/lib/browser/types/index.mjs",
@@ -31,6 +36,9 @@
       "deprecated": [
         "dist/types/src/deprecated/index.d.ts"
       ],
+      "testing": [
+        "dist/types/src/testing/index.d.ts"
+      ],
       "types": [
         "dist/types/src/types/index.d.ts"
       ]
@@ -53,60 +61,60 @@
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
     "lodash.orderby": "^4.6.0",
-    "@dxos/context": "0.8.3",
-    "@dxos/debug": "0.8.3",
-    "@dxos/echo": "0.8.3",
-    "@dxos/invariant": "0.8.3",
-    "@dxos/keys": "0.8.3",
-    "@dxos/effect": "0.8.3",
-    "@dxos/lit-grid": "0.8.3",
-    "@dxos/live-object": "0.8.3",
-    "@dxos/echo-schema": "0.8.3",
-    "@dxos/log": "0.8.3",
-    "@dxos/plugin-search": "0.8.3",
-    "@dxos/react-client": "0.8.3",
-    "@dxos/react-ui-attention": "0.8.3",
-    "@dxos/plugin-space": "0.8.3",
-    "@dxos/react-ui-editor": "0.8.3",
-    "@dxos/react-ui-form": "0.8.3",
-    "@dxos/react-ui-grid": "0.8.3",
-    "@dxos/react-ui-menu": "0.8.3",
-    "@dxos/react-ui-searchlist": "0.8.3",
-    "@dxos/react-ui-syntax-highlighter": "0.8.3",
-    "@dxos/react-ui-tag-picker": "0.8.3",
-    "@dxos/react-ui-stack": "0.8.3",
-    "@dxos/react-ui-types": "0.8.3",
-    "@dxos/util": "0.8.3",
-    "@dxos/schema": "0.8.3"
+    "@dxos/context": "0.8.4-main.c1de068",
+    "@dxos/debug": "0.8.4-main.c1de068",
+    "@dxos/echo": "0.8.4-main.c1de068",
+    "@dxos/effect": "0.8.4-main.c1de068",
+    "@dxos/echo-schema": "0.8.4-main.c1de068",
+    "@dxos/echo-db": "0.8.4-main.c1de068",
+    "@dxos/invariant": "0.8.4-main.c1de068",
+    "@dxos/lit-grid": "0.8.4-main.c1de068",
+    "@dxos/keys": "0.8.4-main.c1de068",
+    "@dxos/live-object": "0.8.4-main.c1de068",
+    "@dxos/plugin-search": "0.8.4-main.c1de068",
+    "@dxos/log": "0.8.4-main.c1de068",
+    "@dxos/react-client": "0.8.4-main.c1de068",
+    "@dxos/react-ui-attention": "0.8.4-main.c1de068",
+    "@dxos/random": "0.8.4-main.c1de068",
+    "@dxos/react-ui-form": "0.8.4-main.c1de068",
+    "@dxos/react-ui-grid": "0.8.4-main.c1de068",
+    "@dxos/react-ui-editor": "0.8.4-main.c1de068",
+    "@dxos/react-ui-menu": "0.8.4-main.c1de068",
+    "@dxos/react-ui-searchlist": "0.8.4-main.c1de068",
+    "@dxos/react-ui-stack": "0.8.4-main.c1de068",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.c1de068",
+    "@dxos/react-ui-tag-picker": "0.8.4-main.c1de068",
+    "@dxos/react-ui-types": "0.8.4-main.c1de068",
+    "@dxos/schema": "0.8.4-main.c1de068",
+    "@dxos/util": "0.8.4-main.c1de068"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
-    "@phosphor-icons/react": "^2.1.5",
+    "@effect-rx/rx-react": "0.38.0",
+    "@effect/platform": "0.89.0",
     "@types/lodash.orderby": "^4.6.9",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "effect": "3.14.21",
+    "effect": "3.17.0",
     "fast-check": "^3.19.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.8.3",
-    "@dxos/echo-signals": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/test-utils": "0.8.3"
+    "@dxos/echo-signals": "0.8.4-main.c1de068",
+    "@dxos/plugin-search": "0.8.4-main.c1de068",
+    "@dxos/random": "0.8.4-main.c1de068",
+    "@dxos/react-ui": "0.8.4-main.c1de068",
+    "@dxos/react-ui-theme": "0.8.4-main.c1de068",
+    "@dxos/storybook-utils": "0.8.4-main.c1de068",
+    "@dxos/test-utils": "0.8.4-main.c1de068"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
-    "@phosphor-icons/react": "^2.1.5",
+    "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "@dxos/react-ui": "0.8.4-main.c1de068",
+    "@dxos/react-ui-theme": "0.8.4-main.c1de068"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Table/ColumnSettings.tsx

@@ -4,20 +4,25 @@
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
+// TODO(burdon): Remove dependency on echo-db.
+import { type SchemaRegistry } from '@dxos/echo-db';
 import { Popover } from '@dxos/react-ui';
 import { FieldEditor } from '@dxos/react-ui-form';
 import { type FieldType } from '@dxos/schema';
 
 import { type TableModel, type ModalController } from '../../model';
 
-type ColumnSettingsProps = { model?: TableModel; modals: ModalController; onNewColumn: () => void };
+type ColumnSettingsProps = {
+  registry?: SchemaRegistry;
+  model?: TableModel;
+  modals: ModalController;
+  onNewColumn: () => void;
+};
 
-export const ColumnSettings = ({ model, modals, onNewColumn }: ColumnSettingsProps) => {
+export const ColumnSettings = ({ registry, model, modals, onNewColumn }: ColumnSettingsProps) => {
   const [newField, setNewField] = useState<FieldType>();
   const state = modals.state.value;
 
-  const space = model?.space;
-
   useEffect(() => {
     if (state?.type === 'columnSettings' && state.mode.type === 'create' && model?.projection) {
       setNewField(model.projection.createFieldProjection());
@@ -33,11 +38,11 @@ export const ColumnSettings = ({ model, modals, onNewColumn }: ColumnSettingsPro
     if (state?.type === 'columnSettings') {
       const { mode } = state;
       if (mode.type === 'edit') {
-        return model?.view?.fields.find((f) => f.id === mode.fieldId);
+        return model?.projection?.fields.find((f) => f.id === mode.fieldId);
       }
     }
     return undefined;
-  }, [model?.view?.fields, state]);
+  }, [model?.projection?.fields, state]);
 
   const field = existingField ?? newField;
 
@@ -47,11 +52,11 @@ export const ColumnSettings = ({ model, modals, onNewColumn }: ColumnSettingsPro
 
   const handleCancel = useCallback(() => {
     if (state?.type === 'columnSettings' && state.mode.type === 'create' && newField) {
-      model?.projection?.deleteFieldProjection(newField.id);
+      model?.projection.deleteFieldProjection(newField.id);
     }
   }, [model?.projection, state, newField]);
 
-  if (!model?.view || !model.projection || !field) {
+  if (!model?.projection || !field) {
     return null;
   }
 
@@ -62,10 +67,9 @@ export const ColumnSettings = ({ model, modals, onNewColumn }: ColumnSettingsPro
         <Popover.Content classNames='md:is-64'>
           <Popover.Viewport>
             <FieldEditor
-              view={model.view!}
               projection={model.projection}
               field={field}
-              registry={space?.db.schemaRegistry}
+              registry={registry}
               onSave={handleSave}
               onCancel={handleCancel}
             />

package/src/components/Table/CreateRefPanel.tsx

@@ -5,7 +5,9 @@
 import { Schema } from 'effect';
 import React, { useCallback, useMemo } from 'react';
 
-import { live } from '@dxos/react-client/echo';
+import { live } from '@dxos/live-object';
+// TODO(wittjosiah): Remove dependency on react-client.
+import { getSpace } from '@dxos/react-client/echo';
 import { Popover } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 import { type GridScopedProps, useGridContext } from '@dxos/react-ui-grid';
@@ -17,7 +19,7 @@ export type CreateRefPanelProps = { model?: TableModel; modals: ModalController
 // TODO(burdon): Factor out Space dependency (to plugin?)
 export const CreateRefPanel = ({ model, modals, __gridScope }: GridScopedProps<CreateRefPanelProps>) => {
   const { id: gridId } = useGridContext('TableCellEditor', __gridScope);
-  const space = model?.space;
+  const space = model && getSpace(model?.view);
   const state = modals.state.value;
 
   const schema = useMemo<Schema.Schema<any> | undefined>(() => {
@@ -54,7 +56,7 @@ export const CreateRefPanel = ({ model, modals, __gridScope }: GridScopedProps<C
     }
   }, [modals]);
 
-  if (!model?.view || !model.projection) {
+  if (!model?.projection) {
     return null;
   }
 

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

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react';
+import { type StoryObj, type Meta } from '@storybook/react-vite';
 import React, { useMemo, useState } from 'react';
 
 import { Obj } from '@dxos/echo';
@@ -19,7 +19,7 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { DynamicTable } from './DynamicTable';
 import { type TableFeatures } from '../../model';
-import translations from '../../translations';
+import { translations } from '../../translations';
 
 faker.seed(0);
 

package/src/components/Table/DynamicTable.tsx

@@ -36,18 +36,23 @@ export const DynamicTable = ({
   name = 'example.com/dynamic-table', // Rmove default or make random; this will lead to type collisions.
   rows,
   properties,
-  jsonSchema,
+  jsonSchema: _jsonSchema,
   schema,
   rowActions,
   onRowClick,
   onRowAction,
   ...props
 }: DynamicTableProps) => {
-  const { table, projection } = useMemo(() => {
-    // TODO(burdon): Remove variance from the props (should be normalized externally; possibly via hooks).
-    const props = getBaseSchema({ typename: name, properties, jsonSchema, schema });
-    return makeDynamicTable({ ...props, properties });
-  }, [name, properties, schema, jsonSchema]);
+  // TODO(burdon): Remove variance from the props (should be normalized externally; possibly via hooks).
+  const { typename, jsonSchema } = useMemo(
+    () => getBaseSchema({ typename: name, properties, jsonSchema: _jsonSchema, schema }),
+    [name, properties, _jsonSchema, schema],
+  );
+
+  const { projection, view } = useMemo(
+    () => makeDynamicTable({ typename, jsonSchema, properties }),
+    [typename, jsonSchema, properties],
+  );
 
   const tableRef = useRef<TableController>(null);
   const handleCellUpdate = useCallback((cell: any) => {
@@ -68,8 +73,9 @@ export const DynamicTable = ({
   );
 
   const model = useTableModel({
-    table,
     rows,
+    view,
+    schema: jsonSchema,
     projection,
     features,
     rowActions,

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

@@ -4,150 +4,86 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react';
+import { type StoryObj, type Meta } from '@storybook/react-vite';
 import { Schema } from 'effect';
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback } from 'react';
 
 import { Obj, Type } from '@dxos/echo';
-import { FormatEnum, isMutable, toJsonSchema, EchoObject, GeneratorAnnotation } from '@dxos/echo-schema';
+import {
+  FormatEnum,
+  EchoObject,
+  GeneratorAnnotation,
+  FormatAnnotation,
+  PropertyMetaAnnotationId,
+} from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
-import { useGlobalFilteredObjects } from '@dxos/plugin-search';
 import { faker } from '@dxos/random';
-import { useClient } from '@dxos/react-client';
-import { Filter, useQuery, useSchema, live } from '@dxos/react-client/echo';
-import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
+import { PublicKey } from '@dxos/react-client';
+import { live, type Space } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
 import { ViewEditor } from '@dxos/react-ui-form';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { getSchemaFromPropertyDefinitions, ViewProjection, ViewType } from '@dxos/schema';
+import { getSchemaFromPropertyDefinitions, DataType } from '@dxos/schema';
 import { Testing, createObjectFactory } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { Table, type TableController } from './Table';
-import { useTableModel } from '../../hooks';
-import { TablePresentation } from '../../model';
-import translations from '../../translations';
-import { TableType } from '../../types';
-import { initializeTable } from '../../util';
+import { Table } from './Table';
+import { useTestTableModel } from '../../testing';
+import { translations } from '../../translations';
+import { TableView } from '../../types';
+import { createTable } from '../../util';
 import { TableToolbar } from '../TableToolbar';
 
-faker.seed(0); // NOTE(ZaymonFC): Required for smoke tests.
-
-/**
- * Custom hook to create and manage a test table model for storybook demonstrations.
- * Provides table data, schema, and handlers for table operations.
- */
-const useTestTableModel = () => {
-  const client = useClient();
-  const { space } = useClientProvider();
-
-  const filter = useMemo(() => Filter.type(TableType), []);
-  const tables = useQuery(space, filter);
-  const table = useMemo(() => tables.at(0), [tables]);
-  const schema = useSchema(client, space, table?.view?.target?.query.typename);
-
-  const projection = useMemo(() => {
-    if (schema && table?.view?.target) {
-      return new ViewProjection(toJsonSchema(schema), table.view.target);
-    }
-  }, [schema, table?.view?.target]);
-
-  const features = useMemo(
-    () => ({
-      selection: { enabled: true, mode: 'multiple' as const },
-      dataEditable: true,
-      schemaEditable: schema && isMutable(schema),
-    }),
-    [schema],
-  );
-
-  const objects = useQuery(space, schema ? Filter.type(schema) : Filter.nothing());
-  const filteredObjects = useGlobalFilteredObjects(objects);
-
-  const tableRef = useRef<TableController>(null);
-  const handleCellUpdate = useCallback((cell: any) => {
-    tableRef.current?.update?.(cell);
-  }, []);
-
-  const handleRowOrderChange = useCallback(() => {
-    tableRef.current?.update?.();
-  }, []);
-
-  const handleInsertRow = useCallback(() => {
-    if (space && schema) {
-      space.db.add(live(schema, {}));
-    }
-  }, [space, schema]);
-
-  const handleDeleteRows = useCallback(
-    (_: number, objects: any[]) => {
-      for (const object of objects) {
-        space?.db.remove(object);
-      }
-    },
-    [space],
-  );
-
-  const handleDeleteColumn = useCallback(
-    (fieldId: string) => {
-      if (projection) {
-        projection.deleteFieldProjection(fieldId);
-      }
-    },
-    [projection],
-  );
-
-  const model = useTableModel({
-    table,
-    projection,
-    features,
-    rows: filteredObjects,
-    onInsertRow: handleInsertRow,
-    onDeleteRows: handleDeleteRows,
-    onDeleteColumn: handleDeleteColumn,
-    onCellUpdate: handleCellUpdate,
-    onRowOrderChange: handleRowOrderChange,
-  });
-
-  const handleSaveView = useCallback(() => {
-    model?.saveView();
-  }, [model]);
-
-  const presentation = useMemo(() => {
-    if (model) {
-      return new TablePresentation(model);
-    }
-  }, [model]);
-
-  return {
-    schema,
-    table,
-    tableRef,
-    model,
-    presentation,
-    space,
-    client,
-    handleInsertRow,
-    handleSaveView,
-    handleDeleteRows,
-    handleDeleteColumn,
-  };
-};
-
-const StoryViewEditor = () => {
-  const { table, space, schema, handleDeleteColumn } = useTestTableModel();
-
+const TestSchema = Schema.Struct({
+  // TODO(wittjosiah): Should be title. Currently name to work with default label.
+  name: Schema.optional(Schema.String).annotations({ title: 'Title' }),
+  urgent: Schema.optional(Schema.Boolean).annotations({ title: 'Urgent' }),
+  status: Schema.optional(
+    Schema.Literal('todo', 'in-progress', 'done')
+      .pipe(FormatAnnotation.set(FormatEnum.SingleSelect))
+      .annotations({
+        title: 'Status',
+        [PropertyMetaAnnotationId]: {
+          singleSelect: {
+            options: [
+              { id: 'todo', title: 'Todo', color: 'indigo' },
+              { id: 'in-progress', title: 'In Progress', color: 'purple' },
+              { id: 'done', title: 'Done', color: 'amber' },
+            ],
+          },
+        },
+      }),
+  ),
+  description: Schema.optional(Schema.String).annotations({ title: 'Description' }),
+  parent: Schema.optional(Schema.suspend((): Type.Ref<TestSchema> => Type.Ref(TestSchema))).annotations({
+    title: 'Parent',
+  }),
+}).pipe(Type.Obj({ typename: `example.com/type/${PublicKey.random().truncate()}`, version: '0.1.0' }));
+interface TestSchema extends Schema.Schema.Type<typeof TestSchema> {}
+
+const StoryViewEditor = ({
+  view,
+  schema,
+  space,
+  handleDeleteColumn,
+}: {
+  view?: DataType.View;
+  schema?: Schema.Schema.AnyNoContext;
+  space?: Space;
+  handleDeleteColumn: (fieldId: string) => void;
+}) => {
   const handleTypenameChanged = useCallback(
     (typename: string) => {
       invariant(schema);
       invariant(Type.isMutable(schema));
       schema.updateTypename(typename);
-      invariant(table?.view?.target);
-      table.view.target.query.typename = typename;
+      invariant(view);
+      view.query.typename = typename;
     },
-    [schema, table?.view?.target],
+    [schema, view],
   );
 
-  if (!table || !schema || !table.view?.target) {
+  if (!view || !schema) {
     return null;
   }
 
@@ -155,7 +91,7 @@ const StoryViewEditor = () => {
     <ViewEditor
       registry={space?.db.schemaRegistry}
       schema={schema}
-      view={table.view.target!}
+      view={view}
       onTypenameChanged={handleTypenameChanged}
       onDelete={handleDeleteColumn}
     />
@@ -167,9 +103,20 @@ const StoryViewEditor = () => {
 //
 
 const DefaultStory = () => {
-  const { schema, table, tableRef, model, presentation, client, handleInsertRow, handleSaveView } = useTestTableModel();
+  const {
+    space,
+    schema,
+    view,
+    tableRef,
+    model,
+    presentation,
+    client,
+    handleInsertRow,
+    handleSaveView,
+    handleDeleteColumn,
+  } = useTestTableModel();
 
-  if (!schema || !table) {
+  if (!schema || !view) {
     return <div />;
   }
 
@@ -189,9 +136,9 @@ const DefaultStory = () => {
         </Table.Root>
       </div>
       <div className='flex flex-col h-full border-l border-separator overflow-y-auto'>
-        <StoryViewEditor />
+        <StoryViewEditor view={view} schema={schema} space={space} handleDeleteColumn={handleDeleteColumn} />
         <SyntaxHighlighter language='json' className='w-full text-xs'>
-          {JSON.stringify({ view: table.view?.target, schema }, null, 2)}
+          {JSON.stringify({ view, schema }, null, 2)}
         </SyntaxHighlighter>
       </div>
     </div>
@@ -209,26 +156,36 @@ type StoryProps = { rows?: number };
 const meta: Meta<StoryProps> = {
   title: 'ui/react-ui-table/Table',
   render: DefaultStory,
-  parameters: { translations, controls: { disable: true } },
+  parameters: {
+    translations,
+    layout: 'fullscreen',
+    controls: {
+      disable: true,
+    },
+  },
   decorators: [
+    withTheme,
+    withLayout({ fullscreen: true }),
     withClientProvider({
-      types: [TableType, ViewType],
+      types: [DataType.View, TableView],
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(Obj.make(TableType, {}));
-        const schema = await initializeTable({ client, space, table, initialRow: false });
+        const [schema] = await space.db.schemaRegistry.register([TestSchema]);
+        const { view } = await createTable({ client, space, typename: schema.typename });
+        space.db.add(view);
+
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
-            live(schema, {
-              name: faker.person.fullName(),
+            Obj.make(schema, {
+              name: faker.lorem.sentence(),
+              status: faker.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
+              description: faker.lorem.paragraph(),
             }),
           );
         });
       },
     }),
-    withLayout({ fullscreen: true }),
-    withTheme,
   ],
 };
 
@@ -241,18 +198,17 @@ export const StaticSchema: StoryObj = {
   parameters: { translations },
   decorators: [
     withClientProvider({
-      types: [TableType, ViewType, Testing.Contact, Testing.Organization],
+      types: [DataType.View, TableView, Testing.Contact, Testing.Organization],
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(Obj.make(TableType, {}));
-        await initializeTable({ client, space, table, typename: Testing.Organization.typename });
+        const { view } = await createTable({ client, space, typename: Testing.Contact.typename });
+        space.db.add(view);
 
         const factory = createObjectFactory(space.db, faker as any);
         await factory([
-          // { type: Testing.Contact, count: 10 },
+          { type: Testing.Contact, count: 10 },
           // { type: Testing.Organization, count: 1 },
-          { type: ContactWithArrayOfEmails, count: 10 },
         ]);
       },
     }),
@@ -283,12 +239,12 @@ export const ArrayOfObjects: StoryObj = {
   parameters: { translations },
   decorators: [
     withClientProvider({
-      types: [TableType, ViewType, Testing.Contact, Testing.Organization, ContactWithArrayOfEmails],
+      types: [DataType.View, TableView, Testing.Contact, Testing.Organization, ContactWithArrayOfEmails],
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(Obj.make(TableType, {}));
-        await initializeTable({ client, space, table, typename: ContactWithArrayOfEmails.typename });
+        const { view } = await createTable({ client, space, typename: ContactWithArrayOfEmails.typename });
+        space.db.add(view);
 
         const factory = createObjectFactory(space.db, faker as any);
         await factory([
@@ -309,7 +265,7 @@ export const Tags: Meta<StoryProps> = {
   parameters: { translations },
   decorators: [
     withClientProvider({
-      types: [TableType, ViewType],
+      types: [DataType.View, TableView],
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
@@ -340,8 +296,8 @@ export const Tags: Meta<StoryProps> = {
         const [storedSchema] = await space.db.schemaRegistry.register([schema]);
 
         // Initialize table.
-        const table = space.db.add(Obj.make(TableType, {}));
-        await initializeTable({ client, space, table, initialRow: false, typename });
+        const { view } = await createTable({ client, space, typename });
+        space.db.add(view);
 
         // Populate.
         Array.from({ length: 10 }).map(() => {