@dxos/react-ui-table 0.8.1-staging.5be625a → 0.8.1-staging.97aedb1

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

@@ -5,7 +5,7 @@
 import '@dxos-theme';
 
 import { type StoryObj, type Meta } from '@storybook/react';
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 
 import { FormatEnum, ImmutableSchema } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
@@ -14,31 +14,28 @@ import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
 import { Filter, useQuery, useSchema, create } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { useDefaultValue } from '@dxos/react-ui';
 import { ViewEditor } from '@dxos/react-ui-form';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { type SchemaPropertyDefinition, ViewProjection, ViewType } from '@dxos/schema';
+import { getSchemaFromPropertyDefinitions, ViewProjection, ViewType } from '@dxos/schema';
 import { Testing, createObjectFactory } from '@dxos/schema/testing';
 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 { useTableModel } from '../../hooks';
 import { TablePresentation } from '../../model';
 import translations from '../../translations';
 import { TableType } from '../../types';
 import { initializeTable } from '../../util';
 import { TableToolbar } from '../TableToolbar';
-import { createItems, createTable, type SimulatorProps, useSimulator } from '../testing';
 
 // NOTE(ZaymonFC): We rely on this seed being 0 in the smoke tests.
 faker.seed(0);
 
-//
-// Story components.
-//
-
-const DefaultStory = () => {
+/**
+ * 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();
 
@@ -49,18 +46,31 @@ const DefaultStory = () => {
 
   const projection = useMemo(() => {
     if (schema && table?.view?.target) {
-      return new ViewProjection(schema, table.view.target);
+      return new ViewProjection(schema.jsonSchema, table.view.target);
     }
   }, [schema, table?.view?.target]);
 
   const features = useMemo(
-    () => ({ selection: true, dataEditable: true, schemaEditable: !(schema instanceof ImmutableSchema) }),
+    () => ({
+      selection: { enabled: true, mode: 'multiple' as const },
+      dataEditable: true,
+      schemaEditable: !(schema instanceof ImmutableSchema),
+    }),
     [schema],
   );
 
   const objects = useQuery(space, schema ? Filter.schema(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(create(schema, {}));
@@ -82,28 +92,19 @@ const DefaultStory = () => {
         projection.deleteFieldProjection(fieldId);
       }
     },
-    [table, projection],
+    [projection],
   );
 
-  const tableRef = useRef<TableController>(null);
-  const handleCellUpdate = useCallback((cell: any) => {
-    tableRef.current?.update?.(cell);
-  }, []);
-
-  const handleRowOrderChanged = useCallback(() => {
-    tableRef.current?.update?.();
-  }, []);
-
   const model = useTableModel({
     table,
     projection,
     features,
-    objects: filteredObjects,
+    rows: filteredObjects,
     onInsertRow: handleInsertRow,
     onDeleteRows: handleDeleteRows,
     onDeleteColumn: handleDeleteColumn,
     onCellUpdate: handleCellUpdate,
-    onRowOrderChanged: handleRowOrderChanged,
+    onRowOrderChange: handleRowOrderChange,
   });
 
   const presentation = useMemo(() => {
@@ -112,7 +113,7 @@ const DefaultStory = () => {
     }
   }, [model]);
 
-  const handleAction = useCallback(
+  const handleToolbarAction = useCallback(
     (action: { type: string }) => {
       switch (action.type) {
         case 'on-thread-create': {
@@ -132,7 +133,23 @@ const DefaultStory = () => {
     [table, model],
   );
 
-  const onTypenameChanged = useCallback(
+  return {
+    schema,
+    table,
+    tableRef,
+    model,
+    presentation,
+    space,
+    handleToolbarAction,
+    handleDeleteRows,
+    handleDeleteColumn,
+  };
+};
+
+const StoryViewEditor = () => {
+  const { table, space, schema, handleDeleteColumn } = useTestTableModel();
+
+  const handleTypenameChanged = useCallback(
     (typename: string) => {
       if (table?.view?.target) {
         invariant(schema);
@@ -143,6 +160,28 @@ const DefaultStory = () => {
     [schema, table?.view?.target],
   );
 
+  if (!table || !schema || !table.view?.target) {
+    return null;
+  }
+
+  return (
+    <ViewEditor
+      registry={space?.db.schemaRegistry}
+      schema={schema}
+      view={table.view.target!}
+      onTypenameChanged={handleTypenameChanged}
+      onDelete={handleDeleteColumn}
+    />
+  );
+};
+
+//
+// Story components.
+//
+
+const DefaultStory = () => {
+  const { schema, table, tableRef, model, presentation, handleToolbarAction } = useTestTableModel();
+
   if (!schema || !table) {
     return <div />;
   }
@@ -150,22 +189,13 @@ const DefaultStory = () => {
   return (
     <div className='grow grid grid-cols-[1fr_350px]'>
       <div className='grid grid-rows-[min-content_1fr] min-bs-0 overflow-hidden'>
-        <TableToolbar classNames='border-b border-separator' onAction={handleAction} />
+        <TableToolbar classNames='border-be border-separator' onAction={handleToolbarAction} />
         <Table.Root>
           <Table.Main ref={tableRef} model={model} presentation={presentation} ignoreAttention />
         </Table.Root>
       </div>
       <div className='flex flex-col h-full border-l border-separator overflow-y-auto'>
-        {table.view?.target && (
-          <ViewEditor
-            registry={space?.db.schemaRegistry}
-            schema={schema}
-            view={table.view.target!}
-            onTypenameChanged={onTypenameChanged}
-            onDelete={handleDeleteColumn}
-          />
-        )}
-
+        <StoryViewEditor />
         <SyntaxHighlighter language='json' className='w-full text-xs'>
           {JSON.stringify({ view: table.view?.target, schema }, null, 2)}
         </SyntaxHighlighter>
@@ -174,76 +204,16 @@ 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'>;
-
-const _TablePerformanceStory = (props: StoryProps) => {
-  const getDefaultRows = useCallback(() => 10, []);
-  const rows = useDefaultValue(props.rows, getDefaultRows);
-  const table = useMemo(() => createTable(), []);
-  const items = useMemo(() => createItems(rows), [rows]);
-  const itemsRef = useRef(items);
-  const simulatorProps = useMemo(() => ({ table, items, ...props }), [table, items, props]);
-  useSimulator(simulatorProps);
-
-  const handleDeleteRows = useCallback<NonNullable<UseTableModelParams<any>['onDeleteRows']>>((row) => {
-    itemsRef.current.splice(row, 1);
-  }, []);
-
-  const handleDeleteColumn = useCallback<NonNullable<UseTableModelParams<any>['onDeleteColumn']>>(
-    (fieldId) => {
-      if (table && table.view?.target) {
-        const fieldPosition = table.view.target!.fields.findIndex((field) => field.id === fieldId);
-        table.view.target!.fields.splice(fieldPosition, 1);
-      }
-    },
-    [table],
-  );
-
-  const tableRef = useRef<TableController>(null);
-  const model = useTableModel({
-    table,
-    objects: items as any[],
-    onDeleteRows: handleDeleteRows,
-    onDeleteColumn: handleDeleteColumn,
-    onCellUpdate: (cell) => tableRef.current?.update?.(cell),
-    onRowOrderChanged: () => tableRef.current?.update?.(),
-  });
-
-  return (
-    <Table.Root>
-      <Table.Main ref={tableRef} model={model} />
-    </Table.Root>
-  );
-};
+type StoryProps = { rows?: number };
 
 //
 // Story definitions.
 //
 
+// TODO(burdon): Need super simple story.
+
 const meta: Meta<StoryProps> = {
   title: 'ui/react-ui-table/Table',
-  component: Table.Main as any,
   render: DefaultStory,
   parameters: { translations },
   decorators: [
@@ -277,17 +247,17 @@ export const StaticSchema: StoryObj = {
   parameters: { translations },
   decorators: [
     withClientProvider({
-      types: [TableType, ViewType, Testing.ContactType, Testing.OrgType],
+      types: [TableType, ViewType, Testing.Contact, Testing.Org],
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
         const table = space.db.add(create(TableType, {}));
-        await initializeTable({ client, space, table, typename: Testing.ContactType.typename });
+        await initializeTable({ client, space, table, typename: Testing.Contact.typename });
 
         const factory = createObjectFactory(space.db, faker as any);
         await factory([
-          { type: Testing.ContactType, count: 10 },
-          { type: Testing.OrgType, count: 1 },
+          { type: Testing.Contact, count: 10 },
+          { type: Testing.Org, count: 1 },
         ]);
       },
     }),
@@ -296,24 +266,58 @@ export const StaticSchema: StoryObj = {
   ],
 };
 
-export const DynamicTable: StoryObj = {
-  render: DynamicTableStory,
-};
+export const Tags: Meta<StoryProps> = {
+  title: 'ui/react-ui-table/Table',
+  render: DefaultStory,
+  parameters: { translations },
+  decorators: [
+    withClientProvider({
+      types: [TableType, ViewType],
+      createIdentity: true,
+      createSpace: true,
+      onSpaceCreated: async ({ client, space }) => {
+        // Configure schema.
+        const typename = 'example.com/SingleSelect';
+        const selectOptions = [
+          { id: 'one', title: 'One', color: 'emerald' },
+          { id: 'two', title: 'Two', color: 'blue' },
+          { id: 'three', title: 'Three', color: 'indigo' },
+          { id: 'four', title: 'Four', color: 'red' },
+          { id: 'longer_option', title: 'LONGER OPTION', color: 'amber' },
+        ];
+
+        const selectOptionIds = selectOptions.map((o) => o.id);
+
+        const schema = getSchemaFromPropertyDefinitions(typename, [
+          {
+            name: 'single',
+            format: FormatEnum.SingleSelect,
+            config: { options: selectOptions },
+          },
+          {
+            name: 'multiple',
+            format: FormatEnum.MultiSelect,
+            config: { options: selectOptions },
+          },
+        ]);
+        const [storedSchema] = await space.db.schemaRegistry.register([schema]);
 
-// TODO(ZaymonFC): Restore the performance stories.
-// type Story = StoryObj<StoryProps>;
-// export const Mutations: Story = {
-//   render: TablePerformanceStory,
-//   args: {
-//     rows: 1000,
-//     updateInterval: 1,
-//   },
-// };
-
-// export const RapidInsertions: Story = {
-//   render: TablePerformanceStory,
-//   args: {
-//     rows: 0,
-//     insertInterval: 100,
-//   },
-// };
+        // Initialize table.
+        const table = space.db.add(create(TableType, {}));
+        await initializeTable({ client, space, table, initialRow: false, typename });
+
+        // Populate.
+        Array.from({ length: 10 }).map(() => {
+          return space.db.add(
+            create(storedSchema, {
+              single: faker.helpers.arrayElement([...selectOptionIds, undefined]),
+              multiple: faker.helpers.randomSubset(selectOptionIds),
+            }),
+          );
+        });
+      },
+    }),
+    withTheme,
+    withLayout({ fullscreen: true, tooltips: true }),
+  ],
+};

package/src/components/Table/Table.tsx

@@ -3,14 +3,15 @@
 //
 
 import React, {
-  forwardRef,
+  type MouseEvent,
   type PropsWithChildren,
+  type WheelEvent,
+  forwardRef,
   useCallback,
   useImperativeHandle,
   useState,
-  type WheelEvent,
-  type MouseEvent,
   useMemo,
+  useEffect,
 } from 'react';
 
 import { getValue } from '@dxos/echo-schema';
@@ -18,7 +19,7 @@ import { invariant } from '@dxos/invariant';
 import { Filter } from '@dxos/react-client/echo';
 import { 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 { closestCell, type DxGridElement, type DxGridPosition, type GridContentProps, Grid } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
 import { isNotFalsy, safeParseInt } from '@dxos/util';
 
@@ -40,7 +41,7 @@ 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';
 
 //
-// Root
+// Table.Root
 //
 
 export type TableRootProps = PropsWithChildren<{ role?: string }>;
@@ -50,8 +51,8 @@ const TableRoot = ({ children, role }: TableRootProps) => {
     <div
       role='none'
       className={mx(
-        'relative border-bs !border-separator',
-        role === 'section'
+        'relative !border-separator',
+        role === 'section' // TODO(burdon): This leaks composer plugin concepts? Standardize for react-ui?
           ? 'attention-surface overflow-hidden [&_.dx-grid]:max-is-[--dx-grid-content-inline-size]'
           : 'flex flex-col [&_.dx-grid]:grow [&_.dx-grid]:max-is-[--dx-grid-content-inline-size] [&_.dx-grid]:bs-0 [&_.dx-grid]:max-bs-[--dx-grid-content-block-size]',
       )}
@@ -62,7 +63,7 @@ const TableRoot = ({ children, role }: TableRootProps) => {
 };
 
 //
-// Main
+// Table.Main
 //
 
 export type TableController = {
@@ -72,21 +73,45 @@ export type TableController = {
 export type TableMainProps = {
   model?: TableModel;
   presentation?: TablePresentation;
+  // TODO(burdon): Rename since attention isn't a useful concept here? Standardize across other components. Pass property into useAttention.
   ignoreAttention?: boolean;
-  onRowClicked?: (row: any) => void;
+  onRowClick?: (row: any) => void;
 };
 
 const TableMain = forwardRef<TableController, TableMainProps>(
-  ({ model, presentation, ignoreAttention, onRowClicked }, forwardedRef) => {
+  ({ model, presentation, ignoreAttention, onRowClick }, forwardedRef) => {
     const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
     const { hasAttention } = useAttention(model?.id ?? 'table');
     const { t } = useTranslation(translationKey);
     const modals = useMemo(() => new ModalController(), []);
 
-    const frozen = useMemo(
-      () => ({ frozenRowsStart: 1, frozenColsStart: model?.features.selection ? 1 : 0, frozenColsEnd: 1 }),
-      [model],
-    );
+    const frozen = useMemo(() => {
+      const noActionColumn =
+        model?.features.dataEditable === false &&
+        model?.features.schemaEditable === false &&
+        model.rowActions.length === 0;
+
+      return {
+        frozenRowsStart: 1,
+        frozenColsStart: model?.features.selection.enabled ? 1 : 0,
+        frozenColsEnd: noActionColumn ? 0 : 1,
+      };
+    }, [model]);
+
+    // TODO(burdon): Replace useEffect below.
+    // const getCells = useCallback<GridContentProps['getCells']>(
+    //   (range: DxGridRange, plane: DxGridPlane) => presentation?.getCells(range, plane) ?? {},
+    //   [presentation],
+    // );
+
+    useEffect(() => {
+      if (!presentation || !dxGrid) {
+        return;
+      }
+
+      // TODO(burdon): Pass to Grid.Content?
+      dxGrid.getCells = (range, plane) => presentation.getCells(range, plane);
+    }, [presentation, dxGrid]);
 
     /**
      * Provides an external controller that can be called to repaint the table.
@@ -98,7 +123,6 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           return {};
         }
 
-        dxGrid.getCells = (range, plane) => presentation.getCells(range, plane);
         return {
           update: (cell) => {
             if (cell) {
@@ -115,11 +139,15 @@ const TableMain = forwardRef<TableController, TableMainProps>(
 
     const handleGridClick = useCallback(
       (event: MouseEvent) => {
-        if (onRowClicked) {
-          const rowIndex = safeParseInt((event.target as HTMLElement).ariaRowIndex ?? '');
-          if (rowIndex != null) {
+        const rowIndex = safeParseInt((event.target as HTMLElement).ariaRowIndex ?? '');
+        if (rowIndex != null) {
+          if (onRowClick) {
             const row = model?.getRowAt(rowIndex);
-            row && onRowClicked(row);
+            row && onRowClick(row);
+          }
+
+          if (model?.features.selection.enabled && model?.selection.selectionMode === 'single') {
+            model.selection.toggleSelectionForRowIndex(rowIndex);
           }
         }
 
@@ -328,32 +356,29 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           onQuery={handleQuery}
         />
         <Grid.Content
-          onWheelCapture={handleWheel}
           className={mx('[--dx-grid-base:var(--surface-bg)]', inlineEndLine, blockEndLine)}
           frozen={frozen}
+          // getCells={getCells}
           columns={model.columnMeta.value}
           limitRows={model.getRowCount() ?? 0}
           limitColumns={model.view?.fields?.length ?? 0}
+          overscroll='trap'
           onAxisResize={handleAxisResize}
           onClick={handleGridClick}
           onKeyDown={handleKeyDown}
-          overscroll='trap'
+          onWheelCapture={handleWheel}
           ref={setDxGrid}
         />
         <RowActionsMenu model={model} modals={modals} />
         <ColumnActionsMenu model={model} modals={modals} />
         <ColumnSettings model={model} modals={modals} onNewColumn={handleNewColumn} />
-        <RefPanel model={model} modals={modals} />
         <CreateRefPanel model={model} modals={modals} />
+        <RefPanel model={model} modals={modals} />
       </Grid.Root>
     );
   },
 );
 
-//
-// CellEditor
-//
-
 export const Table = {
   Root: TableRoot,
   Main: TableMain,

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

@@ -0,0 +1,113 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import React, { useEffect, useMemo } from 'react';
+
+import { AST, type BaseObject, ImmutableSchema, type BaseSchema, type HasId } from '@dxos/echo-schema';
+import { getAnnotation } from '@dxos/effect';
+import { faker } from '@dxos/random';
+import { create, makeRef, type ReactiveObject } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { createView, ViewProjection, ViewType } from '@dxos/schema';
+import { createGenerator, Testing, type ValueGenerator } from '@dxos/schema/testing';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { Table } from './Table';
+import { useTableModel } from '../../hooks';
+import { TablePresentation } from '../../model';
+import translations from '../../translations';
+import { TableType } from '../../types';
+
+faker.seed(1);
+const generator: ValueGenerator = faker as any;
+
+// TODO(burdon): Many-to-many relations.
+// TODO(burdon): Mutable and immutable views.
+// TODO(burdon): Reconcile schemas types and utils (see API PR).
+// TODO(burdon): Base type for T (with id); see ECHO API PR?
+const useTestModel = <T extends BaseObject & HasId>(schema: BaseSchema<T>, count: number) => {
+  const table = useMemo(() => {
+    // const { typename } = pipe(schema.ast, AST.getAnnotation<TypeAnnotation>(TypeAnnotationId), Option.getOrThrow);
+    const typename = schema.typename;
+    const name = getAnnotation<string>(AST.TitleAnnotationId)(schema.ast) ?? typename;
+    const view = createView({ name, typename, jsonSchema: schema.jsonSchema });
+    return create(TableType, { view: makeRef(view) });
+  }, [schema]);
+
+  const projection = useMemo(() => {
+    if (!table.view?.target) {
+      return undefined;
+    }
+
+    // TODO(burdon): Just pass in view? Reuse same jsonSchema instance? View determines if mutable, etc.
+    return new ViewProjection(schema.jsonSchema, table.view.target);
+  }, [schema, table]);
+
+  const model = useTableModel({ table, projection, rows: [] });
+  useEffect(() => {
+    if (!model) {
+      return;
+    }
+
+    const objectGenerator = createGenerator(generator, schema, { optional: true });
+    const objects: ReactiveObject<T>[] = Array.from({ length: count }).map(() => objectGenerator.createObject());
+    model.setRows(objects);
+  }, [model]);
+
+  const presentation = useMemo(() => {
+    if (!model) {
+      return;
+    }
+
+    return new TablePresentation(model);
+  }, [model]);
+
+  return { model, presentation };
+};
+
+const DefaultStory = () => {
+  // TODO(burdon): Remove need for ImmutableSchema wrapper at API-level.
+  const orgSchema = useMemo(() => new ImmutableSchema(Testing.Org), []);
+  const { model: orgModel, presentation: orgPresentation } = useTestModel<Testing.Org>(orgSchema, 50);
+
+  // TODO(burdon): Generate links with references.
+  const contactSchema = useMemo(() => new ImmutableSchema(Testing.Contact), []);
+  const { model: contactModel, presentation: contactPresentation } = useTestModel<Testing.Contact>(contactSchema, 50);
+
+  // TODO(burdon): Scrolling isn't working.
+  return (
+    <div className='grow grid grid-cols-2 divide-x divide-separator'>
+      <Table.Root>
+        <Table.Main model={orgModel} presentation={orgPresentation} />
+      </Table.Root>
+      <Table.Root>
+        <Table.Main model={contactModel} presentation={contactPresentation} />
+      </Table.Root>
+    </div>
+  );
+};
+
+const meta: Meta<typeof DefaultStory> = {
+  title: 'ui/react-ui-table/relations',
+  render: DefaultStory,
+  parameters: { translations },
+  decorators: [
+    withClientProvider({
+      types: [TableType, ViewType, Testing.Org, Testing.Contact],
+      createIdentity: true,
+      createSpace: true,
+    }),
+    withTheme,
+    withLayout({ fullscreen: true, tooltips: true }),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DefaultStory>;
+
+export const Default: Story = {};

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

@@ -18,6 +18,7 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { TableCellEditor, type TableCellEditorProps } from './TableCellEditor';
 import { useTableModel } from '../../hooks';
+import { type TableFeatures } from '../../model';
 import translations from '../../translations';
 import { TableType } from '../../types';
 import { initializeTable } from '../../util';
@@ -44,12 +45,16 @@ const DefaultStory = ({ editing }: StoryProps) => {
 
   const projection = useMemo(() => {
     if (schema && table?.view) {
-      return new ViewProjection(schema, table.view.target!);
+      return new ViewProjection(schema.jsonSchema, table.view.target!);
     }
   }, [schema, table?.view]);
 
-  const features = useMemo(
-    () => ({ selection: true, dataEditable: true, schemaEditable: !(schema instanceof ImmutableSchema) }),
+  const features: Partial<TableFeatures> = useMemo(
+    () => ({
+      selection: { enabled: true, mode: 'multiple' },
+      dataEditable: true,
+      schemaEditable: !(schema instanceof ImmutableSchema),
+    }),
     [],
   );