@dxos/react-ui-table 0.8.4-main.3c1ae3b → 0.8.4-main.3fbcb4aa9b

package/src/components/TableCellEditor/FormCellEditor.tsx

@@ -5,26 +5,25 @@
 import type * as Schema from 'effect/Schema';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { Filter, Obj, type Type } from '@dxos/echo';
-import { Format, Ref, getValue } from '@dxos/echo/internal';
+import { Entity, type Type } from '@dxos/echo';
+import { Ref, getValue } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
-import { getSnapshot } from '@dxos/live-object';
-import { getSpace } from '@dxos/react-client/echo';
 import { type Label, Popover } from '@dxos/react-ui';
-import { Form, type FormRootProps, omitId } from '@dxos/react-ui-form';
+import { Form, type FormRootProps, type RefFieldProps } from '@dxos/react-ui-form';
 import { parseCellIndex, useGridContext } from '@dxos/react-ui-grid';
 import { type FieldProjection } from '@dxos/schema';
 import { getDeep, isTruthy, setDeep } from '@dxos/util';
 
+import { translationKey } from '#translations';
+
 import { type ModalController, type TableModel, type TableRow } from '../../model';
-import { translationKey } from '../../translations';
 import { narrowSchema } from '../../util';
 
-const createOptionLabel: Label = ['create new object label', { ns: translationKey }];
+const createOptionLabel: Label = ['create-new-object.label', { ns: translationKey }];
 
-export type OnCreateHandler = (schema: Schema.Schema.AnyNoContext, values: any) => Parameters<typeof Ref.make>[0];
+export type OnCreateHandler = (schema: Type.AnyEntity, values: any) => Parameters<typeof Ref.make>[0];
 
-export type FormCellEditorProps<T extends Type.Entity.Any = Type.Entity.Any> = {
+export type FormCellEditorProps<T extends Type.AnyEntity = Type.AnyEntity> = {
   __gridScope: any;
   schema?: T;
   model?: TableModel;
@@ -34,7 +33,7 @@ export type FormCellEditorProps<T extends Type.Entity.Any = Type.Entity.Any> = {
   onCreate?: OnCreateHandler;
 } & Omit<FormRootProps<any>, 'values' | 'schema' | 'onCreate'>;
 
-export const FormCellEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
+export const FormCellEditor = <T extends Type.AnyEntity = Type.AnyEntity>({
   __gridScope,
   schema,
   model,
@@ -67,33 +66,12 @@ export const FormCellEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
     return narrowSchema(schema, [fieldProjection.field.path]);
   }, [JSON.stringify(schema), fieldProjection.field.path]); // TODO(burdon): Avoid stringify.
 
-  const getSchema = useCallback(
-    ({ typename }: { typename: string }) => {
-      const space = getSpace(model!.view);
-      invariant(space);
-      const schema = space.db.schemaRegistry.query({ typename, location: ['database', 'runtime'] }).runSync()[0];
-      return { space, schema };
-    },
-    [model],
-  );
-
-  const refSchema = useMemo(() => {
-    if (fieldProjection.props.format === Format.TypeFormat.Ref && fieldProjection.props.referenceSchema) {
-      const { schema } = getSchema({ typename: fieldProjection.props.referenceSchema });
-      return schema;
-    }
-
-    return null;
-  }, [fieldProjection.props.format, fieldProjection.props.referenceSchema, getSchema]);
-
-  const createSchema = useMemo(() => (refSchema ? omitId(refSchema) : null), [refSchema]);
-
   const originalRow = useMemo<TableRow | undefined>(() => {
     if (model && contextEditing) {
       // Check if this is a draft cell and get the appropriate row data
       const cell = parseCellIndex(contextEditing.index);
       if (model.isDraftCell(cell)) {
-        const draftRow = model.draftRows.value[cell.row];
+        const draftRow = model.getDraftRows()[cell.row];
         invariant(draftRow);
         return draftRow.data;
       } else {
@@ -106,9 +84,14 @@ export const FormCellEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
     return undefined;
   }, [model, contextEditing]);
 
-  // NOTE: Important to get a snapshot to eject from the live object.
-  const formValues = useMemo(() => (originalRow ? getSnapshot(originalRow) : {}), [originalRow]);
+  // NOTE: Important to get a mutable deep clone to eject from the echo object.
+  // TODO(wittjosiah): Consider using something like Obj.clone for this use case.
+  const initialFormValues = useMemo(() => (originalRow ? JSON.parse(JSON.stringify(originalRow)) : {}), [originalRow]);
+  const [formValues, setFormValues] = useState<any>(initialFormValues);
 
+  const handleValuesChanged = useCallback<NonNullable<FormRootProps<any>['onValuesChanged']>>((values) => {
+    setFormValues(values);
+  }, []);
   const handleOpenChange = useCallback((nextOpen: boolean) => {
     if (nextOpen === false) {
       setEditing(null);
@@ -119,24 +102,39 @@ export const FormCellEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
 
   const handleSave = useCallback<NonNullable<FormRootProps<any>['onSave']>>(
     (values) => {
+      if (!originalRow) {
+        return;
+      }
       const path = fieldProjection.field.path;
       const value = getDeep(values, [path]);
-      setDeep(originalRow, [path], value);
+      // Use model's changeRow for consistent mutation handling.
+      if (model) {
+        model.changeRow(originalRow, (mutableRow) => {
+          setDeep(mutableRow, [path], value);
+        });
+      } else {
+        setDeep(originalRow, [path], value);
+      }
       contextEditing?.cellElement?.focus();
       setEditing(null);
       setLocalEditing(false);
       onSave?.();
     },
-    [fieldProjection.field.path, onSave, contextEditing, originalRow],
+    [fieldProjection.field.path, onSave, contextEditing, originalRow, model],
   );
 
   const handleCreate = useCallback<NonNullable<FormRootProps<any>['onCreate']>>(
-    (values) => {
-      if (refSchema && onCreate) {
-        const objectWithId = onCreate(refSchema, values);
-        if (objectWithId) {
-          const ref = Ref.make(objectWithId);
-          const path = fieldProjection.field.path;
+    (schema, values) => {
+      const objectWithId = onCreate?.(schema, values);
+      if (objectWithId && originalRow) {
+        const ref = Ref.make(objectWithId);
+        const path = fieldProjection.field.path;
+        // Use model's changeRow for consistent mutation handling.
+        if (model) {
+          model.changeRow(originalRow, (mutableRow) => {
+            setDeep(mutableRow, [path], ref);
+          });
+        } else {
           setDeep(originalRow, [path], ref);
         }
       }
@@ -145,27 +143,20 @@ export const FormCellEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
       setLocalEditing(false);
       onSave?.();
     },
-    [fieldProjection.field.path, onSave, contextEditing, originalRow, refSchema, onCreate],
+    [fieldProjection.field.path, onSave, contextEditing, originalRow, onCreate, model],
   );
 
-  const handleQueryRefOptions = useCallback<NonNullable<FormRootProps<any>['onQueryRefOptions']>>(
-    async ({ typename }) => {
-      const { schema, space } = getSchema({ typename });
-      if (model && schema && space) {
-        const objects = await space.db.query(Filter.type(schema)).run();
-        return objects
-          .map((obj) => {
-            return {
-              dxn: Obj.getDXN(obj),
-              label: getValue(obj, fieldProjection.field.referencePath!) || obj.id.toString(),
-            };
-          })
-          .filter(isTruthy);
-      }
-
-      return [];
-    },
-    [model],
+  const getOptions = useCallback<NonNullable<RefFieldProps['getOptions']>>(
+    (results) =>
+      results
+        .map((obj) => {
+          return {
+            id: Entity.getDXN(obj).toString(),
+            label: getValue(obj, fieldProjection.field.referencePath!) || obj.id.toString(),
+          };
+        })
+        .filter(isTruthy),
+    [fieldProjection],
   );
 
   if (!editing) {
@@ -176,7 +167,7 @@ export const FormCellEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
     <Popover.Root open={editing} onOpenChange={handleOpenChange}>
       <Popover.VirtualTrigger virtualRef={anchorRef} />
       <Popover.Portal>
-        <Popover.Content tabIndex={-1} classNames='popover-card-width density-fine'>
+        <Popover.Content tabIndex={-1} classNames='dx-card-popover-width dx-density-fine'>
           <Popover.Arrow />
           <Popover.Viewport>
             <Form.Root
@@ -184,15 +175,15 @@ export const FormCellEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
               autoFocus
               schema={narrowedSchema}
               values={formValues}
+              onValuesChanged={handleValuesChanged}
+              projection={model?.projection}
+              createInitialValuePath={fieldProjection.field.referencePath}
+              createOptionIcon='ph--plus--regular'
+              createOptionLabel={createOptionLabel}
+              db={model?.db}
+              getOptions={getOptions}
+              onCreate={handleCreate}
               onSave={handleSave}
-              onQueryRefOptions={handleQueryRefOptions}
-              {...(createSchema && {
-                createSchema,
-                createInitialValuePath: fieldProjection.field.referencePath,
-                createOptionIcon: 'ph--plus--regular',
-                createOptionLabel,
-                onCreate: handleCreate,
-              })}
             >
               <Form.Viewport>
                 <Form.Content>

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

@@ -6,25 +6,26 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { Obj } from '@dxos/echo';
-import { faker } from '@dxos/random';
+import { View } from '@dxos/echo';
+import { random } from '@dxos/random';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Grid, type GridEditing, defaultRowSize } from '@dxos/react-ui-grid';
-import { View } from '@dxos/schema';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { ViewModel } from '@dxos/schema';
 import { Task } from '@dxos/types';
 
+import { translations } from '#translations';
+
 import { useTestTableModel } from '../../testing';
-import { translations } from '../../translations';
 import { Table } from '../../types';
-
 import { TableCellEditor } from './TableCellEditor';
 
-type StoryProps = {
+type DefaultStoryProps = {
   editing: GridEditing;
 };
 
 // TODO(burdon): Broken layout.
-const DefaultStory = ({ editing }: StoryProps) => {
+const DefaultStory = ({ editing }: DefaultStoryProps) => {
   const { model, table } = useTestTableModel();
 
   if (!model || !table) {
@@ -45,22 +46,22 @@ const meta = {
   component: DefaultStory,
   render: DefaultStory,
   decorators: [
-    withTheme,
-    withLayout({ container: 'column' }),
+    withTheme(),
+    withLayout({ layout: 'column' }),
     withClientProvider({
       types: [View.View, Task.Task, Table.Table],
       createIdentity: true,
       createSpace: true,
       onCreateSpace: async ({ space }) => {
-        const { view, jsonSchema } = await View.makeFromSpace({ space, typename: Task.Task.typename });
+        const { view, jsonSchema } = await ViewModel.makeFromDatabase({ db: space.db, typename: Task.Task.typename });
         const table = Table.make({ view, jsonSchema });
         space.db.add(table);
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
             Obj.make(Task.Task, {
-              title: faker.person.fullName(),
-              status: faker.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
-              description: faker.lorem.sentence(),
+              title: random.person.fullName(),
+              status: random.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
+              description: random.lorem.sentence(),
             }),
           );
         });

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -25,16 +25,9 @@ import {
 import { type FieldProjection } from '@dxos/schema';
 
 import { type ModalController, type TableModel } from '../../model';
-
 import { CellValidationMessage } from './CellValidationMessage';
 import { FormCellEditor, type OnCreateHandler } from './FormCellEditor';
 
-const editorSlots = {
-  scroll: {
-    className: '!plb-[--dx-grid-cell-editor-padding-block]',
-  },
-};
-
 /**
  * Option to create new object/value.
  */
@@ -42,7 +35,7 @@ export type QueryResult = Pick<Completion, 'label'> & {
   data: any;
 };
 
-export type TableCellEditorProps<T extends Type.Entity.Any = Type.Entity.Any> = {
+export type TableCellEditorProps<T extends Type.AnyEntity = Type.AnyEntity> = {
   schema?: T;
   model?: TableModel;
   modals?: ModalController;
@@ -51,7 +44,7 @@ export type TableCellEditorProps<T extends Type.Entity.Any = Type.Entity.Any> =
   onSave?: () => void;
 };
 
-export const TableValueEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
+export const TableValueEditor = <T extends Type.AnyEntity = Type.AnyEntity>({
   __gridScope,
   schema,
   model,
@@ -68,7 +61,7 @@ export const TableValueEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
     }
 
     const { col } = parseCellIndex(editing.index);
-    const field = model.projection.fields[col];
+    const field = model.projection.getFields()[col];
     const fieldProjection = model.projection.getFieldProjection(field.id);
     invariant(fieldProjection);
     return fieldProjection;
@@ -115,7 +108,7 @@ export const TableCellEditor = ({
     }
 
     const { col } = parseCellIndex(editing.index);
-    const field = model.projection.fields[col];
+    const field = model.projection.getFields()[col];
     const fieldProjection = model.projection.getFieldProjection(field.id);
     invariant(fieldProjection);
     return fieldProjection;
@@ -250,7 +243,16 @@ export const TableCellEditor = ({
   return (
     <>
       <CellValidationMessage validationError={validationError} variant={validationVariant} __gridScope={__gridScope} />
-      <GridCellEditor extensions={extensions} getCellContent={getCellContent} onBlur={handleBlur} slots={editorSlots} />
+      <GridCellEditor
+        extensions={extensions}
+        slots={{
+          content: {
+            className: '!py-(--dx-grid-cell-editor-padding-block)',
+          },
+        }}
+        getCellContent={getCellContent}
+        onBlur={handleBlur}
+      />
     </>
   );
 };

package/src/components/index.ts

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

package/src/components/testing.ts

@@ -2,33 +2,59 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Atom } from '@effect-atom/atom-react';
 import * as Schema from 'effect/Schema';
 import { useEffect } from 'react';
 
-import { Format } from '@dxos/echo';
-import { TypeEnum, TypedObject, setValue } from '@dxos/echo/internal';
-import { live } from '@dxos/live-object';
-import { faker } from '@dxos/random';
+import { Format, Type } from '@dxos/echo';
+import { TypeEnum } from '@dxos/echo/internal';
+import { setValue } from '@dxos/effect';
+import { random } from '@dxos/random';
 import { type ProjectionModel } from '@dxos/schema';
 
-export const TestSchema = TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
+export const TestSchema = Schema.Struct({
   name: Schema.optional(Schema.String),
   age: Schema.optional(Schema.Number),
   active: Schema.optional(Schema.Boolean),
   netWorth: Schema.optional(Schema.Number),
-});
+}).pipe(
+  Type.object({
+    typename: 'com.example.type.test',
+    version: '0.1.0',
+  }),
+);
 
-export const createItems = (n: number) => {
-  const { data } = live({
+export type TestItem = {
+  name: string;
+  age: number;
+  active: boolean;
+  netWorth: number;
+};
+
+/**
+ * Creates an Atom containing test items data.
+ */
+export const createItemsAtom = (n: number) => {
+  return Atom.make<{ data: TestItem[] }>({
     data: Array.from({ length: n }, () => ({
-      name: faker.person.fullName(),
-      age: faker.number.int({ min: 20, max: 70 }),
-      active: faker.datatype.boolean(),
-      netWorth: faker.number.int(),
+      name: random.person.fullName(),
+      age: random.number.int({ min: 20, max: 70 }),
+      active: random.datatype.boolean(),
+      netWorth: random.number.int(),
     })),
-  });
+  }).pipe(Atom.keepAlive);
+};
 
-  return data;
+/**
+ * Creates plain test items (non-reactive).
+ */
+export const createItems = (n: number): TestItem[] => {
+  return Array.from({ length: n }, () => ({
+    name: random.person.fullName(),
+    age: random.number.int({ min: 20, max: 70 }),
+    active: random.datatype.boolean(),
+    netWorth: random.number.int(),
+  }));
 };
 
 export type SimulatorProps = {
@@ -59,7 +85,7 @@ export const useSimulator = ({ items, projection, insertInterval, updateInterval
 
     const i = setInterval(() => {
       const rowIdx = Math.floor(Math.random() * items.length);
-      const fields = projection.fields ?? [];
+      const fields = projection.getFields() ?? [];
       const columnIdx = Math.floor(Math.random() * fields.length);
       const field = fields[columnIdx];
       const item = items[rowIdx];
@@ -98,5 +124,5 @@ export const useSimulator = ({ items, projection, insertInterval, updateInterval
     }, updateInterval);
 
     return () => clearInterval(i);
-  }, [items, projection.fields, updateInterval]);
+  }, [items, projection.getFields(), updateInterval]);
 };

package/src/hooks/useAddRow.ts

@@ -2,17 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
-import type * as Schema from 'effect/Schema';
 import { useCallback } from 'react';
 
-import { type Space } from '@dxos/client/echo';
-import { Obj } from '@dxos/echo';
+import { type Database, Obj, type Type } from '@dxos/echo';
 
 import { type InsertRowResult } from '../model';
 
-export type UseAddRowParams = {
-  space?: Space;
-  schema?: Schema.Schema.AnyNoContext;
+export type UseAddRowProps = {
+  db?: Database.Database;
+  schema?: Type.AnyObj;
 };
 
 /**
@@ -20,12 +18,12 @@ export type UseAddRowParams = {
  * Returns a callback that attempts to create an object and returns boolean success/failure.
  * Can accept optional data to create objects with specific content (used for committing draft rows).
  */
-export const useAddRow = ({ space, schema }: UseAddRowParams) => {
+export const useAddRow = ({ db, schema }: UseAddRowProps) => {
   return useCallback(
     (data?: any): InsertRowResult => {
-      if (space && schema) {
+      if (db && schema) {
         try {
-          space.db.add(Obj.make(schema, data ?? {}));
+          db.add(Obj.make(schema, data ?? {}));
           return 'final';
         } catch (error) {
           return 'draft';
@@ -33,6 +31,6 @@ export const useAddRow = ({ space, schema }: UseAddRowParams) => {
       }
       return 'final';
     },
-    [space, schema],
+    [db, schema],
   );
 };

package/src/hooks/useProjectionModel.ts

@@ -2,18 +2,38 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useMemo } from 'react';
+import { type Registry } from '@effect-atom/atom-react';
+import { useState } from 'react';
 
-import { Type } from '@dxos/echo';
-import { ProjectionModel } from '@dxos/schema';
+import { JsonSchema, Type } from '@dxos/echo';
+import { useAsyncEffect } from '@dxos/react-ui';
+import { ProjectionModel, createEchoChangeCallback } from '@dxos/schema';
 
 import { type Table } from '../types';
 
-export const useProjectionModel = <S extends Type.Entity.Any>(schema: S | undefined, table: Table.Table | undefined) =>
-  useMemo(() => {
-    if (schema && table?.view.target?.projection) {
-      const projection = new ProjectionModel(Type.toJsonSchema(schema), table.view.target.projection);
+export const useProjectionModel = <S extends Type.AnyEntity>(
+  schema: S | undefined,
+  table: Table.Table | undefined,
+  registry: Registry.Registry,
+) => {
+  const [projection, setProjection] = useState<ProjectionModel | undefined>();
+
+  useAsyncEffect(async () => {
+    if (schema && table) {
+      const view = await table.view.load();
+      // For mutable schemas (EchoSchema), use the live jsonSchema reference for reactivity.
+      // For immutable schemas, create a snapshot.
+      const jsonSchema = Type.isMutable(schema) ? schema.jsonSchema : JsonSchema.toJsonSchema(schema);
+
+      // Always use createEchoChangeCallback since the view is ECHO-backed.
+      // Pass schema only when mutable to allow schema mutations.
+      const change = createEchoChangeCallback(view, Type.isMutable(schema) ? schema : undefined);
+
+      const projection = new ProjectionModel({ registry, view, baseSchema: jsonSchema, change });
       projection.normalizeView();
-      return projection;
+      setProjection(projection);
     }
-  }, [schema, table?.view.target?.projection]);
+  }, [schema, table, registry]);
+
+  return projection;
+};

package/src/hooks/useTableModel.ts

@@ -2,41 +2,48 @@
 // Copyright 2024 DXOS.org
 //
 
-import { effect } from '@preact/signals-core';
-import orderBy from 'lodash.orderby';
-import { useEffect, useMemo, useState } from 'react';
+import { RegistryContext } from '@effect-atom/atom-react';
+import { useContext, useEffect, useMemo, useState } from 'react';
 
-import { Obj } from '@dxos/echo';
-import { type Live } from '@dxos/live-object';
+import { type Database, Obj } from '@dxos/echo';
 import { useSelected, useSelectionActions } from '@dxos/react-ui-attention';
 import { type ProjectionModel } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
-import { TableModel, type TableModelProps, type TableRow, type TableRowAction } from '../model';
+import {
+  TableModel,
+  type TableModelProps,
+  type TableRow,
+  type TableRowAction,
+  createEchoChangeCallback,
+} from '../model';
 import { type Table } from '../types';
 
-export type UseTableModelParams<T extends TableRow = TableRow> = {
+export type UseTableModelProps<T extends TableRow = TableRow> = {
   object?: Table.Table;
   projection?: ProjectionModel;
-  rows?: Live<T>[];
+  db?: Database.Database;
+  rows?: T[];
   rowActions?: TableRowAction[];
   onSelectionChanged?: (selection: string[]) => void;
   onRowAction?: (actionId: string, data: T) => void;
 } & Pick<
   TableModelProps<T>,
-  'features' | 'onInsertRow' | 'onDeleteRows' | 'onDeleteColumn' | 'onCellUpdate' | 'onRowOrderChange'
+  'features' | 'onInsertRow' | 'onDeleteRows' | 'onColumnDelete' | 'onCellUpdate' | 'onRowOrderChange'
 >;
 
 export const useTableModel = <T extends TableRow = TableRow>({
   object,
   projection,
+  db,
   rows,
   rowActions,
   features,
   onSelectionChanged,
   onRowAction,
   ...props
-}: UseTableModelParams<T>): TableModel<T> | undefined => {
+}: UseTableModelProps<T>): TableModel<T> | undefined => {
+  const registry = useContext(RegistryContext);
   const selected = useSelected(object && Obj.getDXN(object).toString(), 'multi');
   const initialSelection = useMemo(() => selected, [object]);
 
@@ -49,8 +56,11 @@ export const useTableModel = <T extends TableRow = TableRow>({
     let model: TableModel<T> | undefined;
     const t = setTimeout(async () => {
       model = new TableModel<T>({
+        registry,
         object,
         projection,
+        db,
+        change: createEchoChangeCallback<T>(object),
         features,
         rowActions,
         initialSelection,
@@ -66,18 +76,12 @@ export const useTableModel = <T extends TableRow = TableRow>({
       void model?.close();
     };
     // TODO(burdon): Trigger if callbacks change?
-  }, [object, projection, features, rowActions, initialSelection]);
+  }, [registry, object, projection, features, rowActions, initialSelection]);
 
-  // Update data.
+  // Update data when rows change.
   useEffect(() => {
-    if (rows) {
-      /*
-       * Sort all objects by string id field as a temporary workaround for query ordering issues
-       * Reference: https://github.com/dxos/dxos/pull/9409
-       */
-      // TODO(ZaymonFC): Remove this workaround once unstable query ordering issue is resolved
-      const sortedRows = orderBy(rows, [(row) => String(row.id)], ['asc']);
-      model?.setRows(sortedRows);
+    if (rows && model) {
+      model.setRows(rows);
     }
   }, [model, rows]);
 
@@ -88,8 +92,8 @@ export const useTableModel = <T extends TableRow = TableRow>({
       return;
     }
 
-    const unsubscribe = effect(() => {
-      const selectedItems = [...model.selection.selection.value];
+    const unsubscribe = registry.subscribe(model.selection.selectionAtom, () => {
+      const selectedItems = [...model.selection.selection];
       multiSelect(selectedItems);
       onSelectionChanged?.(selectedItems);
     });
@@ -99,7 +103,7 @@ export const useTableModel = <T extends TableRow = TableRow>({
       clear();
       unsubscribe();
     };
-  }, [model, onSelectionChanged]);
+  }, [registry, model, onSelectionChanged]);
 
   return model;
 };

package/src/index.ts

@@ -2,11 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { translations } from './translations';
-
 export * from './components';
 export * from './hooks';
 export * from './model';
 export * from './util';
-
-export { translations };