@dxos/react-ui-table 0.8.0 → 0.8.1-main.81238a8

package/dist/types/src/util/dynamic-table.d.ts

@@ -0,0 +1,40 @@
+import { type SortDirectionType } from '@dxos/echo-schema';
+import { ViewProjection, type SchemaPropertyDefinition } from '@dxos/schema';
+type PropertyDisplayProps = {
+    size: number;
+    title: string;
+    sort: SortDirectionType;
+};
+export type TablePropertyDefinition = SchemaPropertyDefinition & Partial<PropertyDisplayProps>;
+export declare const makeDynamicTable: (typename: string, properties: TablePropertyDefinition[]) => {
+    table: import("@dxos/live-object").ReactiveObject<{
+        readonly id: string;
+        name?: string | undefined;
+        view?: import("@dxos/echo-schema").Ref<import("@dxos/echo-schema").TypedObjectFields<{
+            name: import("effect/Schema").SchemaClass<string, string, never>;
+            query: import("effect/Schema").Schema<import("@dxos/echo-schema").QueryType, import("@dxos/echo-schema").QueryType, never>;
+            schema: import("effect/Schema").optional<import("effect/Schema").Schema<import("@dxos/echo-schema").JsonSchemaType, import("@dxos/echo-schema").JsonSchemaType, never>>;
+            fields: import("effect/Schema").mutable<import("effect/Schema").Array$<import("effect/Schema").mutable<import("effect/Schema").Struct<{
+                id: typeof import("effect/Schema").String;
+                path: import("effect/Schema").Schema<import("@dxos/effect").JsonPath, import("@dxos/effect").JsonPath, never>;
+                visible: import("effect/Schema").optional<typeof import("effect/Schema").Boolean>;
+                size: import("effect/Schema").optional<typeof import("effect/Schema").Number>;
+                referencePath: import("effect/Schema").optional<import("effect/Schema").Schema<import("@dxos/effect").JsonPath, import("@dxos/effect").JsonPath, never>>;
+            }>>>>;
+            hiddenFields: import("effect/Schema").optional<import("effect/Schema").mutable<import("effect/Schema").Array$<import("effect/Schema").mutable<import("effect/Schema").Struct<{
+                id: typeof import("effect/Schema").String;
+                path: import("effect/Schema").Schema<import("@dxos/effect").JsonPath, import("@dxos/effect").JsonPath, never>;
+                visible: import("effect/Schema").optional<typeof import("effect/Schema").Boolean>;
+                size: import("effect/Schema").optional<typeof import("effect/Schema").Number>;
+                referencePath: import("effect/Schema").optional<import("effect/Schema").Schema<import("@dxos/effect").JsonPath, import("@dxos/effect").JsonPath, never>>;
+            }>>>>>;
+            metadata: import("effect/Schema").optional<import("effect/Schema").mutable<import("effect/Schema").Record$<typeof import("effect/Schema").String, typeof import("effect/Schema").Any>>>;
+        }, import("@dxos/echo-schema").TypedObjectOptions>> | undefined;
+        threads?: readonly import("@dxos/echo-schema").Ref<import("@dxos/echo-schema").Expando>[] | undefined;
+    }>;
+    schema: import("@dxos/echo-schema").EchoSchema;
+    view: import("@dxos/live-object").ReactiveObject<import("@dxos/schema").ViewType>;
+    viewProjection: ViewProjection;
+};
+export {};
+//# sourceMappingURL=dynamic-table.d.ts.map

package/dist/types/src/util/dynamic-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../../../../src/util/dynamic-table.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D,OAAO,EAGL,cAAc,EACd,KAAK,wBAAwB,EAC9B,MAAM,cAAc,CAAC;AAItB,KAAK,oBAAoB,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,iBAAiB,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,wBAAwB,GAAG,OAAO,CAAC,oBAAoB,CAAC,CAAC;AAE/F,eAAO,MAAM,gBAAgB,aAAc,MAAM,cAAc,uBAAuB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CvF,CAAC"}

package/dist/types/src/util/index.d.ts

@@ -1,3 +1,4 @@
+export * from './dynamic-table';
 export * from './signals';
 export * from './table';
 export * from './table-buttons';

package/dist/types/src/util/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.8.0",
+  "version": "0.8.1-main.81238a8",
   "description": "A table component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,9 +10,9 @@
   "type": "module",
   "exports": {
     "./deprecated": {
-      "types": "./dist/types/src/_deprecated/index.d.ts",
-      "browser": "./dist/lib/browser/_deprecated/index.mjs",
-      "node": "./dist/lib/node-esm/_deprecated/index.mjs"
+      "types": "./dist/types/src/deprecated/index.d.ts",
+      "browser": "./dist/lib/browser/deprecated/index.mjs",
+      "node": "./dist/lib/node-esm/deprecated/index.mjs"
     },
     ".": {
       "types": "./dist/types/src/index.d.ts",
@@ -29,7 +29,7 @@
   "typesVersions": {
     "*": {
       "deprecated": [
-        "dist/types/src/_deprecated/index.d.ts"
+        "dist/types/src/deprecated/index.d.ts"
       ],
       "types": [
         "dist/types/src/types/index.d.ts"
@@ -44,7 +44,7 @@
     "@codemirror/autocomplete": "^6.18.1",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.34.1",
-    "@fluentui/react-tabster": "9.23.3",
+    "@fluentui/react-tabster": "^9.24.2",
     "@preact/signals-core": "^1.6.0",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-primitive": "2.0.2",
@@ -54,27 +54,27 @@
     "@tanstack/react-virtual": "^3.9.0",
     "date-fns": "^3.3.1",
     "lodash.orderby": "^4.6.0",
-    "@dxos/context": "0.8.0",
-    "@dxos/echo-schema": "0.8.0",
-    "@dxos/debug": "0.8.0",
-    "@dxos/invariant": "0.8.0",
-    "@dxos/lit-grid": "0.8.0",
-    "@dxos/keys": "0.8.0",
-    "@dxos/log": "0.8.0",
-    "@dxos/live-object": "0.8.0",
-    "@dxos/plugin-search": "0.8.0",
-    "@dxos/plugin-space": "0.8.0",
-    "@dxos/react-client": "0.8.0",
-    "@dxos/react-ui-attention": "0.8.0",
-    "@dxos/react-ui-form": "0.8.0",
-    "@dxos/react-ui-grid": "0.8.0",
-    "@dxos/react-ui-searchlist": "0.8.0",
-    "@dxos/react-ui-stack": "0.8.0",
-    "@dxos/react-ui-syntax-highlighter": "0.8.0",
-    "@dxos/react-ui-menu": "0.8.0",
-    "@dxos/react-ui-types": "0.8.0",
-    "@dxos/schema": "0.8.0",
-    "@dxos/util": "0.8.0"
+    "@dxos/context": "0.8.1-main.81238a8",
+    "@dxos/echo-schema": "0.8.1-main.81238a8",
+    "@dxos/invariant": "0.8.1-main.81238a8",
+    "@dxos/debug": "0.8.1-main.81238a8",
+    "@dxos/keys": "0.8.1-main.81238a8",
+    "@dxos/lit-grid": "0.8.1-main.81238a8",
+    "@dxos/log": "0.8.1-main.81238a8",
+    "@dxos/live-object": "0.8.1-main.81238a8",
+    "@dxos/plugin-search": "0.8.1-main.81238a8",
+    "@dxos/plugin-space": "0.8.1-main.81238a8",
+    "@dxos/react-client": "0.8.1-main.81238a8",
+    "@dxos/react-ui-attention": "0.8.1-main.81238a8",
+    "@dxos/react-ui-form": "0.8.1-main.81238a8",
+    "@dxos/react-ui-grid": "0.8.1-main.81238a8",
+    "@dxos/react-ui-menu": "0.8.1-main.81238a8",
+    "@dxos/react-ui-searchlist": "0.8.1-main.81238a8",
+    "@dxos/react-ui-stack": "0.8.1-main.81238a8",
+    "@dxos/react-ui-syntax-highlighter": "0.8.1-main.81238a8",
+    "@dxos/react-ui-types": "0.8.1-main.81238a8",
+    "@dxos/schema": "0.8.1-main.81238a8",
+    "@dxos/util": "0.8.1-main.81238a8"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -85,19 +85,19 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.8.0",
-    "@dxos/random": "0.8.0",
-    "@dxos/react-ui": "0.8.0",
-    "@dxos/react-ui-theme": "0.8.0",
-    "@dxos/storybook-utils": "0.8.0",
-    "@dxos/test-utils": "0.8.0"
+    "@dxos/echo-signals": "0.8.1-main.81238a8",
+    "@dxos/react-ui": "0.8.1-main.81238a8",
+    "@dxos/storybook-utils": "0.8.1-main.81238a8",
+    "@dxos/test-utils": "0.8.1-main.81238a8",
+    "@dxos/random": "0.8.1-main.81238a8",
+    "@dxos/react-ui-theme": "0.8.1-main.81238a8"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.0",
-    "@dxos/react-ui-theme": "0.8.0"
+    "@dxos/react-ui-theme": "0.8.1-main.81238a8",
+    "@dxos/react-ui": "0.8.1-main.81238a8"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Table/ColumnSettings.tsx

@@ -4,7 +4,6 @@
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { getSpace } from '@dxos/react-client/echo';
 import { DropdownMenu } from '@dxos/react-ui';
 import { FieldEditor } from '@dxos/react-ui-form';
 import { type FieldType } from '@dxos/schema';
@@ -17,7 +16,7 @@ export const ColumnSettings = ({ model, modals, onNewColumn }: ColumnSettingsPro
   const [newField, setNewField] = useState<FieldType>();
   const state = modals.state.value;
 
-  const space = getSpace(model?.table);
+  const space = model?.space;
 
   useEffect(() => {
     if (state?.type === 'columnSettings' && state.mode.type === 'create' && model?.projection) {
@@ -34,11 +33,11 @@ export const ColumnSettings = ({ model, modals, onNewColumn }: ColumnSettingsPro
     if (state?.type === 'columnSettings') {
       const { mode } = state;
       if (mode.type === 'edit') {
-        return model?.table?.view?.target?.fields.find((f) => f.id === mode.fieldId);
+        return model?.view?.fields.find((f) => f.id === mode.fieldId);
       }
     }
     return undefined;
-  }, [model?.table?.view?.target?.fields, state]);
+  }, [model?.view?.fields, state]);
 
   const field = existingField ?? newField;
 
@@ -52,7 +51,7 @@ export const ColumnSettings = ({ model, modals, onNewColumn }: ColumnSettingsPro
     }
   }, [model?.projection, state, newField]);
 
-  if (!model?.table?.view?.target || !model.projection || !field) {
+  if (!model?.view || !model.projection || !field) {
     return null;
   }
 
@@ -63,7 +62,7 @@ export const ColumnSettings = ({ model, modals, onNewColumn }: ColumnSettingsPro
         <DropdownMenu.Content classNames='md:is-64'>
           <DropdownMenu.Viewport>
             <FieldEditor
-              view={model.table.view.target!}
+              view={model.view!}
               projection={model.projection}
               field={field}
               registry={space?.db.schemaRegistry}

package/src/components/Table/CreateRefPanel.tsx

@@ -5,7 +5,7 @@
 import React, { useCallback, useMemo } from 'react';
 
 import { S } from '@dxos/echo-schema';
-import { create, getSpace } from '@dxos/react-client/echo';
+import { create } 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 +17,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 = getSpace(model?.table);
+  const space = model?.space;
   const state = modals.state.value;
 
   const schema = useMemo<S.Schema<any> | undefined>(() => {
@@ -54,7 +54,7 @@ export const CreateRefPanel = ({ model, modals, __gridScope }: GridScopedProps<C
     }
   }, [modals]);
 
-  if (!model?.table?.view || !model.projection) {
+  if (!model?.view || !model.projection) {
     return null;
   }
 

package/src/components/Table/DynamicTable.tsx

@@ -0,0 +1,86 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useRef, useMemo, useCallback } from 'react';
+
+import { mx } from '@dxos/react-ui-theme';
+
+import { Table, type TableFeatures, type TableController } from './Table';
+import { useTableModel } from '../../hooks';
+import { TablePresentation, type TableRowAction } from '../../model';
+import { makeDynamicTable, type TablePropertyDefinition } from '../../util';
+
+type DynamicTableProps = {
+  data: any[];
+  properties: TablePropertyDefinition[];
+  tableName?: string;
+  classNames?: string;
+  onRowClicked?: (row: any) => void;
+  rowActions?: TableRowAction[];
+  onRowAction?: (actionId: string, datum: any) => void;
+};
+
+/**
+ * A dynamic table component that renders data using the specified properties.
+ * Properties define both the schema and display characteristics of the table columns.
+ */
+export const DynamicTable = ({
+  data,
+  properties,
+  classNames,
+  tableName = 'com.example/dynamic_table',
+  onRowClicked,
+  rowActions,
+  onRowAction,
+}: DynamicTableProps) => {
+  // TODO(ZaymonFC): Consider allowing the user to supply a schema directly instead of deriving it from
+  //  the properties array. (Both should be viable).
+  const { table, viewProjection } = useMemo(() => {
+    return makeDynamicTable(tableName, properties);
+  }, [tableName, properties]);
+
+  const tableRef = useRef<TableController>(null);
+  const handleCellUpdate = useCallback((cell: any) => {
+    tableRef.current?.update?.(cell);
+  }, []);
+
+  const handleRowOrderChanged = useCallback(() => {
+    tableRef.current?.update?.();
+  }, []);
+
+  const model = useTableModel({
+    table,
+    objects: data,
+    projection: viewProjection,
+    onCellUpdate: handleCellUpdate,
+    onRowOrderChanged: handleRowOrderChanged,
+    rowActions,
+    onRowAction,
+  });
+
+  const presentation = useMemo(() => {
+    if (model) {
+      return new TablePresentation(model);
+    }
+  }, [model]);
+
+  const features: TableFeatures = useMemo(() => ({ selection: false }), []);
+
+  return (
+    <div className={mx('is-full bs-full grow grid', classNames)}>
+      <div className='grid min-bs-0 overflow-hidden'>
+        <Table.Root>
+          <Table.Main
+            ref={tableRef}
+            model={model}
+            presentation={presentation}
+            features={features}
+            onRowClicked={onRowClicked}
+            ignoreAttention
+          />
+        </Table.Root>
+      </div>
+    </div>
+  );
+};

package/src/components/Table/RefPanel.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { getSpace, type Space } from '@dxos/react-client/echo';
+import { type Space } from '@dxos/react-client/echo';
 import { Popover } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 
@@ -22,11 +22,11 @@ const getRefTargetObj = (space?: Space, id?: string) => {
 
 export const RefPanel = ({ model, modals }: RefPanelProps) => {
   const state = modals.state.value;
-  const space = getSpace(model.table);
+  const space = model?.space;
   const targetObj = getRefTargetObj(space, state?.type === 'refPanel' ? state.targetId : undefined);
   const schema = space && state?.type === 'refPanel' ? space.db.schemaRegistry.getSchema(state.typename) : undefined;
 
-  if (!model.table?.view || !model.projection) {
+  if (!model.view || !model.projection) {
     return null;
   }
 

package/src/components/Table/RowActionsMenu.tsx

@@ -26,6 +26,19 @@ export const RowActionsMenu = ({ model, modals }: RowActionsMenuProps) => {
           <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);
+              }}
+            >
+              {t(action.translationKey)}
+            </DropdownMenu.Item>
+          ))}
         </DropdownMenu.Viewport>
         <DropdownMenu.Arrow />
       </DropdownMenu.Content>

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

@@ -4,9 +4,10 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react';
+import { type StoryObj, type Meta } from '@storybook/react';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
+import { FormatEnum } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { useGlobalFilteredObjects } from '@dxos/plugin-search';
 import { faker } from '@dxos/random';
@@ -15,9 +16,10 @@ import { useClientProvider, withClientProvider } from '@dxos/react-client/testin
 import { useDefaultValue } from '@dxos/react-ui';
 import { ViewEditor } from '@dxos/react-ui-form';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { ViewProjection, ViewType } from '@dxos/schema';
+import { type SchemaPropertyDefinition, ViewProjection, ViewType } from '@dxos/schema';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
+import { DynamicTable as DynamicTableComponent } from './DynamicTable';
 import { Table, type TableController } from './Table';
 import { useTableModel, type UseTableModelParams } from '../../hooks';
 import { TablePresentation } from '../../model';
@@ -170,6 +172,25 @@ const DefaultStory = () => {
   );
 };
 
+const DynamicTableStory = () => {
+  const properties = useMemo<SchemaPropertyDefinition[]>(
+    () => [
+      { name: 'name', format: FormatEnum.String },
+      { name: 'age', format: FormatEnum.Number },
+    ],
+    [],
+  );
+
+  const [objects, _setObjects] = useState<any[]>(
+    Array.from({ length: 100 }, () => ({
+      name: faker.person.fullName(),
+      age: faker.number.int({ min: 18, max: 80 }),
+    })),
+  );
+
+  return <DynamicTableComponent properties={properties} data={objects} />;
+};
+
 type StoryProps = {
   rows?: number;
 } & Pick<SimulatorProps, 'insertInterval' | 'updateInterval'>;
@@ -249,6 +270,10 @@ export default meta;
 
 export const Default = {};
 
+export const DynamicTable: StoryObj = {
+  render: DynamicTableStory,
+};
+
 // TODO(ZaymonFC): Restore the performance stories.
 // type Story = StoryObj<StoryProps>;
 // export const Mutations: Story = {

package/src/components/Table/Table.tsx

@@ -15,12 +15,12 @@ import React, {
 
 import { getValue } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
-import { Filter, getSpace, fullyQualifiedId } from '@dxos/react-client/echo';
-import { useTranslation } from '@dxos/react-ui';
+import { Filter } from '@dxos/react-client/echo';
+import { useDefaultValue, useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 import { type DxGridElement, Grid, type GridContentProps, closestCell, type DxGridPosition } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
-import { isNotFalsy } from '@dxos/util';
+import { isNotFalsy, safeParseInt } from '@dxos/util';
 
 import { ColumnActionsMenu } from './ColumnActionsMenu';
 import { ColumnSettings } from './ColumnSettings';
@@ -39,8 +39,6 @@ const inlineEndLine =
 const blockEndLine =
   '[&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-inline-0 [&>.dx-grid]:before:-block-end-px [&>.dx-grid]:before:bs-px [&>.dx-grid]:before:bg-separator';
 
-const frozen = { frozenRowsStart: 1, frozenColsStart: 1, frozenColsEnd: 1 };
-
 //
 // Root
 //
@@ -71,19 +69,32 @@ export type TableController = {
   update?: (cell?: DxGridPosition) => void;
 };
 
+export type TableFeatures = { selection?: boolean };
+
 export type TableMainProps = {
   model?: TableModel;
   presentation?: TablePresentation;
   ignoreAttention?: boolean;
+  features?: TableFeatures;
+  onRowClicked?: (row: any) => void;
 };
 
 const TableMain = forwardRef<TableController, TableMainProps>(
-  ({ model, presentation, ignoreAttention }, forwardedRef) => {
+  ({ model, presentation, ignoreAttention, onRowClicked, features }, forwardedRef) => {
     const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
-    const { hasAttention } = useAttention(model?.table ? fullyQualifiedId(model.table) : 'table');
+    const { hasAttention } = useAttention(model?.id ?? 'table');
     const { t } = useTranslation(translationKey);
     const modals = useMemo(() => new ModalController(), []);
 
+    const { selection } = useDefaultValue(features, () => ({
+      selection: true,
+    }));
+
+    const frozen = useMemo(
+      () => ({ frozenRowsStart: 1, frozenColsStart: selection ? 1 : 0, frozenColsEnd: 1 }),
+      [selection],
+    );
+
     /**
      * Provides an external controller that can be called to repaint the table.
      */
@@ -111,6 +122,14 @@ const TableMain = forwardRef<TableController, TableMainProps>(
 
     const handleGridClick = useCallback(
       (event: MouseEvent) => {
+        if (onRowClicked) {
+          const rowIndex = safeParseInt((event.target as HTMLElement).ariaRowIndex ?? '');
+          if (rowIndex != null) {
+            const row = model?.getRowAt(rowIndex);
+            row && onRowClicked(row);
+          }
+        }
+
         if (!modals) {
           return;
         }
@@ -260,7 +279,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
     const handleQuery = useCallback<NonNullable<TableCellEditorProps['onQuery']>>(
       async ({ field, props }, text) => {
         if (model && props.referenceSchema && field.referencePath) {
-          const space = getSpace(model.table);
+          const space = model.space;
           invariant(space);
           const schema = space.db.schemaRegistry.getSchema(props.referenceSchema);
           if (schema) {
@@ -299,7 +318,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
     }
 
     return (
-      <Grid.Root id={model.table.id ?? 'table-grid'}>
+      <Grid.Root id={model.id ?? 'table-grid'}>
         <TableCellEditor
           model={model}
           modals={modals}
@@ -313,7 +332,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           frozen={frozen}
           columns={model.columnMeta.value}
           limitRows={model.getRowCount() ?? 0}
-          limitColumns={model.table.view?.target?.fields?.length ?? 0}
+          limitColumns={model.view?.fields?.length ?? 0}
           onAxisResize={handleAxisResize}
           onClick={handleGridClick}
           onKeyDown={handleKeyDown}

package/src/components/Table/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './Table';
+export * from './DynamicTable';

package/src/components/testing.ts

@@ -75,6 +75,7 @@ export const useSimulator = ({ items, table, insertInterval, updateInterval }: S
       const rowIdx = Math.floor(Math.random() * items.length);
       const fields = table.view?.target?.fields ?? [];
       const columnIdx = Math.floor(Math.random() * fields.length);
+      // TODO(ZaymonFC): ... This is borked.
       const projection: ViewProjection = (table as any)._projection;
       const field = fields[columnIdx];
       const item = items[rowIdx];

package/src/{_deprecated → deprecated}/components/Cell/Cell.tsx

@@ -17,7 +17,7 @@ const CELL_NAME = 'Cell';
 
 const FocusableCell = <TData extends RowData, TValue>({ cell, children }: CellProps<TData, TValue>) => {
   const tableContext = useTableContext();
-  const domAttributes = useFocusableGroup({ tabBehavior: 'limited' });
+  const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
 
   const pinned = tableContext.table.getState().rowPinning?.bottom?.includes(cell.row.id);
   const className = tdRoot({ ...tableContext, pinned }, cell.column.columnDef.meta?.cell?.classNames);
@@ -60,7 +60,7 @@ const FocusableCell = <TData extends RowData, TValue>({ cell, children }: CellPr
   }, []);
 
   return (
-    <td data-testid='table.cell' tabIndex={0} {...domAttributes} className={className} onKeyDown={handleKeyDown}>
+    <td data-testid='table.cell' tabIndex={0} {...focusableGroupAttrs} className={className} onKeyDown={handleKeyDown}>
       {children}
     </td>
   );

package/src/{_deprecated → deprecated}/components/Table/TableBody.tsx

@@ -21,13 +21,13 @@ const TableBody = ({ rows }: TableBodyProps) => {
   const { table, keyAccessor, currentDatum, debug, expand, isGrid, onDatumClick } = useTableContext();
 
   const rowSelection = table.getState().rowSelection;
-  const domAttributes = useArrowNavigationGroup({ axis: 'grid' });
+  const arrowNavigationAttrs = useArrowNavigationGroup({ axis: 'grid' });
   const canBeCurrent = !isGrid && !!onDatumClick;
 
   const { virtualizer } = useContext(TableRootContext);
 
   return (
-    <tbody {...(isGrid && domAttributes)}>
+    <tbody {...(isGrid && arrowNavigationAttrs)}>
       {rows.map((row) => {
         const isCurrent = currentDatum === row.original;
         const isSelected = rowSelection?.[row.id];

package/src/{_deprecated → deprecated}/helpers.tsx

@@ -126,7 +126,7 @@ const StringBuilderCell = <TData extends RowData>(cellContext: CellContext<TData
   let placeholder = false;
   const columns = cellContext.table.getVisibleFlatColumns();
 
-  // Calling getRowModel is expensive, so only do it when we're a cell in the first position
+  // Calling getRowModel is expensive, so only do it when we're a cell in the first position.
   if (columns[0].id === cellContext.column.id) {
     const rowCount = cellContext.table.getRowModel().rows.length;
     placeholder = cellContext.row.index === rowCount - 1 && columns[0].id === cellContext.column.id;
@@ -206,7 +206,7 @@ const NumberBuilderCell = <TData extends RowData>(cellContext: CellContext<TData
         onFocus={handleEdit}
         onChange={({ target: { value } }) => setText(value)}
         onKeyDown={(event) => {
-          // TODO(thure): `Escape` is reserved for blurring the input and moving focus to the cell
+          // TODO(thure): `Escape` is reserved for blurring the input and moving focus to the cell.
           return /* (event.key === 'Escape' && handleCancel()) || */ event.key === 'Enter' && handleSave();
         }}
         autoComplete='off'

package/src/{_deprecated → deprecated}/schema/Schema.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { Arbitrary } from '@effect/schema';
+import { Arbitrary } from 'effect';
 import * as fc from 'fast-check';
 import React from 'react';