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

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

@@ -6,18 +6,19 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Schema from 'effect/Schema';
 import React, { useCallback } from 'react';
 
-import { Annotation, Format, Obj, type QueryAST, Type } from '@dxos/echo';
-import { PropertyMetaAnnotationId } from '@dxos/echo/internal';
+import { Annotation, type Database, Format, Obj, type QueryAST, Type } from '@dxos/echo';
+import { type Mutable, PropertyMetaAnnotationId } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
 import { PublicKey } from '@dxos/react-client';
-import { type Space } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
+import { ScrollArea } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 import { ViewEditor, translations as formTranslations } from '@dxos/react-ui-form';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { View, getSchemaFromPropertyDefinitions, getTypenameFromQuery } from '@dxos/schema';
 import { TestSchema, createObjectFactory } from '@dxos/schema/testing';
+import { withRegistry } from '@dxos/storybook-utils';
 
 import { useTestTableModel } from '../../testing';
 import { translations } from '../../translations';
@@ -51,7 +52,7 @@ const Example = Schema.Struct({
     title: 'Parent',
   }),
 }).pipe(
-  Type.Obj({ typename: `example.com/type/${PublicKey.random().truncate()}`, version: '0.1.0' }),
+  Type.object({ typename: `example.com/type/${PublicKey.random().truncate()}`, version: '0.1.0' }),
   Annotation.LabelAnnotation.set(['name']),
 );
 interface Example extends Schema.Schema.Type<typeof Example> {}
@@ -59,12 +60,12 @@ interface Example extends Schema.Schema.Type<typeof Example> {}
 const StoryViewEditor = ({
   view,
   schema,
-  space,
+  db,
   handleDeleteColumn,
 }: {
   view?: View.View;
   schema?: Schema.Schema.AnyNoContext;
-  space?: Space;
+  db?: Database.Database;
   handleDeleteColumn: (fieldId: string) => void;
 }) => {
   const handleQueryChanged = useCallback(
@@ -73,7 +74,9 @@ const StoryViewEditor = ({
       invariant(Type.isMutable(schema));
       schema.updateTypename(getTypenameFromQuery(newQuery));
       invariant(view);
-      view.query.ast = newQuery;
+      Obj.change(view, (v) => {
+        v.query.ast = newQuery as Mutable<typeof newQuery>;
+      });
     },
     [schema, view],
   );
@@ -84,7 +87,7 @@ const StoryViewEditor = ({
 
   return (
     <ViewEditor
-      registry={space?.db.schemaRegistry}
+      registry={db?.schemaRegistry}
       schema={schema}
       view={view}
       onQueryChanged={handleQueryChanged}
@@ -98,9 +101,18 @@ const StoryViewEditor = ({
 //
 
 const DefaultStory = () => {
-  const { space, schema, table, tableRef, model, presentation, handleInsertRow, handleSaveView, handleDeleteColumn } =
+  const { db, schema, table, tableRef, model, presentation, handleInsertRow, handleSaveView, handleDeleteColumn } =
     useTestTableModel();
 
+  const handleRowClick = useCallback(
+    (row: any) => {
+      if (model?.getDraftRowCount() === 0 && ['frozenRowsEnd', 'fixedEndStart', 'fixedEndEnd'].includes(row?.plane)) {
+        handleInsertRow();
+      }
+    },
+    [model, handleInsertRow],
+  );
+
   if (!schema || !table?.view.target) {
     return <div />;
   }
@@ -115,21 +127,19 @@ const DefaultStory = () => {
             schema={schema}
             model={model}
             presentation={presentation}
+            onRowClick={handleRowClick}
             ignoreAttention
           />
         </TableComponent.Root>
       </div>
-      <div className='flex flex-col bs-full border-l border-separator overflow-y-auto'>
-        <StoryViewEditor
-          view={table.view.target}
-          schema={schema}
-          space={space}
-          handleDeleteColumn={handleDeleteColumn}
-        />
-        <SyntaxHighlighter language='json' className='text-xs'>
-          {JSON.stringify({ view: table.view.target, schema }, null, 2)}
-        </SyntaxHighlighter>
-      </div>
+      <ScrollArea.Root orientation='vertical' classNames='bs-full border-l border-separator'>
+        <ScrollArea.Viewport>
+          <StoryViewEditor view={table.view.target} schema={schema} db={db} handleDeleteColumn={handleDeleteColumn} />
+          <SyntaxHighlighter language='json' className='text-xs'>
+            {JSON.stringify({ view: table.view.target, schema }, null, 2)}
+          </SyntaxHighlighter>
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
     </div>
   );
 };
@@ -146,19 +156,22 @@ const meta = {
   title: 'ui/react-ui-table/Table',
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
+    withRegistry,
     withClientProvider({
       types: [View.View, Table.Table],
       createIdentity: true,
       createSpace: true,
       onCreateSpace: async ({ space }) => {
         const [schema] = await space.db.schemaRegistry.register([Example]);
-        const { view, jsonSchema } = await View.makeFromSpace({ space, typename: schema.typename });
+        const { view, jsonSchema } = await View.makeFromDatabase({ db: space.db, typename: schema.typename });
         const table = Table.make({ view, jsonSchema });
-        view.projection.fields = [
-          view.projection.fields.find((field: any) => field.path === 'name')!,
-          ...view.projection.fields.filter((field: any) => field.path !== 'name'),
-        ];
+        Obj.change(view, (v) => {
+          v.projection.fields = [
+            v.projection.fields.find((field) => field.path === 'name')!,
+            ...v.projection.fields.filter((field) => field.path !== 'name'),
+          ];
+        });
 
         space.db.add(table);
 
@@ -197,7 +210,10 @@ export const StaticSchema: StoryObj = {
       createIdentity: true,
       createSpace: true,
       onCreateSpace: async ({ space }) => {
-        const { view, jsonSchema } = await View.makeFromSpace({ space, typename: TestSchema.Person.typename });
+        const { view, jsonSchema } = await View.makeFromDatabase({
+          db: space.db,
+          typename: TestSchema.Person.typename,
+        });
         const table = Table.make({ view, jsonSchema });
         space.db.add(table);
 
@@ -226,7 +242,7 @@ const ContactWithArrayOfEmails = Schema.Struct({
     ),
   ),
 }).pipe(
-  Type.Obj({
+  Type.object({
     typename: 'dxos.org/type/ContactWithArrayOfEmails',
     version: '0.1.0',
   }),
@@ -240,8 +256,8 @@ export const ArrayOfObjects: StoryObj = {
       createIdentity: true,
       createSpace: true,
       onCreateSpace: async ({ space }) => {
-        const { view, jsonSchema } = await View.makeFromSpace({
-          space,
+        const { view, jsonSchema } = await View.makeFromDatabase({
+          db: space.db,
           typename: ContactWithArrayOfEmails.typename,
         });
         const table = Table.make({ view, jsonSchema });
@@ -298,7 +314,7 @@ export const Tags: Meta<StoryProps> = {
         const [storedSchema] = await space.db.schemaRegistry.register([schema]);
 
         // Initialize table.
-        const { view, jsonSchema } = await View.makeFromSpace({ space, typename });
+        const { view, jsonSchema } = await View.makeFromDatabase({ db: space.db, typename });
         const table = Table.make({ view, jsonSchema });
         space.db.add(table);
 

package/src/components/Table/Table.tsx

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Atom, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
 import * as String from 'effect/String';
 import React, {
   type JSX,
@@ -11,6 +12,7 @@ import React, {
   type WheelEvent,
   forwardRef,
   useCallback,
+  useContext,
   useEffect,
   useImperativeHandle,
   useMemo,
@@ -18,8 +20,10 @@ import React, {
 } from 'react';
 
 import { type Type } from '@dxos/echo';
+import { log } from '@dxos/log';
 import { useAttention } from '@dxos/react-ui-attention';
 import {
+  type DxGridAxisMeta,
   type DxGridElement,
   type DxGridPlane,
   type DxGridPlaneRange,
@@ -31,7 +35,7 @@ import {
   gridSeparatorInlineEnd,
 } from '@dxos/react-ui-grid';
 import { DxEditRequest } from '@dxos/react-ui-grid';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { type InsertRowResult, ModalController, type TableModel, type TablePresentation } from '../../model';
 import { tableButtons, tableControls } from '../../util';
@@ -43,6 +47,7 @@ import { RowActionsMenu } from './RowActionsMenu';
 
 const columnDefault = { grid: { minSize: 80, maxSize: 640 } };
 const rowDefault = { frozenRowsStart: { readonly: true, focusUnfurl: false } };
+const emptyColumnMeta = Atom.make<DxGridAxisMeta>({ grid: {} });
 
 //
 // Table.Root
@@ -88,13 +93,24 @@ export type TableMainProps<T extends Type.Entity.Any = Type.Entity.Any> = {
   testId?: string;
 };
 
+const emptyRowsAtom = Atom.make<unknown[]>([]);
+const emptyCellUpdateAtom = Atom.make<number>(0);
+
 const TableMainInner = <T extends Type.Entity.Any = Type.Entity.Any>(
   { schema, model, presentation, ignoreAttention, onCreate, onRowClick, testId }: TableMainProps<T>,
   forwardedRef: Ref<TableController>,
 ) => {
+  const registry = useContext(RegistryContext);
   const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
   const { hasAttention } = useAttention(model?.id ?? 'table');
-  const modals = useMemo(() => new ModalController(), []);
+  const modals = useMemo(() => new ModalController(registry), [registry]);
+  const columnMeta = useAtomValue(model?.columnMeta ?? emptyColumnMeta);
+  // Subscribe to rows atom to trigger re-render when rows change.
+  const rows = useAtomValue(model?.rows ?? emptyRowsAtom);
+  // Subscribe to cell update counter to trigger re-render when individual cells change.
+  const cellUpdateCounter = useAtomValue(model?.cellUpdate ?? emptyCellUpdateAtom);
+  // Derive column count from columnMeta (reactive) with fallback.
+  const columnCount = Object.keys(columnMeta.grid).length || model?.projection.getFields().length || 0;
 
   const draftRowCount = model?.getDraftRowCount() ?? 0;
 
@@ -117,15 +133,6 @@ const TableMainInner = <T extends Type.Entity.Any = Type.Entity.Any>(
     [presentation],
   );
 
-  // Set initial sort order.
-  // TODO(burdon): Save sort order to local storage.
-  useEffect(() => {
-    const fieldId = model?.projection?.fields?.[0]?.id;
-    if (fieldId) {
-      model.sorting.setSort(fieldId, 'asc');
-    }
-  }, [model]);
-
   useEffect(() => {
     if (!dxGrid || !presentation) {
       return;
@@ -134,6 +141,16 @@ const TableMainInner = <T extends Type.Entity.Any = Type.Entity.Any>(
     dxGrid.getCells = getCells;
   }, [dxGrid, presentation, getCells]);
 
+  // Trigger grid update when rows or cell values change.
+  useEffect(() => {
+    if (!dxGrid) {
+      return;
+    }
+
+    dxGrid.updateCells(true);
+    dxGrid.requestUpdate();
+  }, [dxGrid, rows, cellUpdateCounter]);
+
   const handleInsertRowResult = useCallback(
     (insertResult?: InsertRowResult) => {
       if (insertResult === 'draft') {
@@ -220,7 +237,7 @@ const TableMainInner = <T extends Type.Entity.Any = Type.Entity.Any>(
             break;
           }
           case 'sort': {
-            model?.sorting?.toggleSort(data.fieldId);
+            model?.toggleSort(data.fieldId);
             break;
           }
           case 'saveDraftRow': {
@@ -246,7 +263,7 @@ const TableMainInner = <T extends Type.Entity.Any = Type.Entity.Any>(
         switch (data.type) {
           case 'checkbox': {
             if (data.header) {
-              model?.selection.setSelection(model.selection.allRowsSeleted.value ? 'none' : 'all');
+              model?.selection.setSelection(model.selection.allRowsSelected ? 'none' : 'all');
             } else {
               model?.selection.toggleSelectionForRowIndex(data.rowIndex);
             }
@@ -302,7 +319,7 @@ const TableMainInner = <T extends Type.Entity.Any = Type.Entity.Any>(
               void navigator.clipboard.writeText(textContent);
               event.preventDefault();
             } catch (error) {
-              console.warn('Failed to copy cell content:', error);
+              log.catch(error);
             }
             break;
           }
@@ -423,11 +440,11 @@ const TableMainInner = <T extends Type.Entity.Any = Type.Entity.Any>(
       <Grid.Content
         className={mx('[--dx-grid-base:var(--baseSurface)]', gridSeparatorInlineEnd, gridSeparatorBlockEnd)}
         frozen={frozen}
-        columns={model.columnMeta.value}
+        columns={columnMeta}
         columnDefault={columnDefault}
         rowDefault={rowDefault}
-        limitRows={model.getRowCount() ?? 0}
-        limitColumns={model.projection.fields.length}
+        limitRows={rows.length}
+        limitColumns={columnCount}
         overscroll='trap'
         onAxisResize={handleAxisResize}
         onClick={handleGridClick}

package/src/components/TableCellEditor/FormCellEditor.tsx

@@ -5,13 +5,11 @@
 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';
@@ -22,7 +20,7 @@ import { narrowSchema } from '../../util';
 
 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.Entity.Any, values: any) => Parameters<typeof Ref.make>[0];
 
 export type FormCellEditorProps<T extends Type.Entity.Any = Type.Entity.Any> = {
   __gridScope: any;
@@ -67,33 +65,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,8 +83,9 @@ 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 formValues = useMemo(() => (originalRow ? JSON.parse(JSON.stringify(originalRow)) : {}), [originalRow]);
 
   const handleOpenChange = useCallback((nextOpen: boolean) => {
     if (nextOpen === false) {
@@ -119,24 +97,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 +138,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) {
@@ -184,15 +170,13 @@ export const FormCellEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
               autoFocus
               schema={narrowedSchema}
               values={formValues}
+              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

@@ -45,14 +45,14 @@ 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 View.makeFromDatabase({ db: space.db, typename: Task.Task.typename });
         const table = Table.make({ view, jsonSchema });
         space.db.add(table);
         Array.from({ length: 10 }).forEach(() => {

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -68,7 +68,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 +115,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;

package/src/components/TableToolbar/TableToolbar.tsx

@@ -2,10 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Atom } from '@effect-atom/atom-react';
-import React, { useMemo } from 'react';
+import { Atom, RegistryContext } from '@effect-atom/atom-react';
+import React, { useContext, useEffect, useMemo } from 'react';
 
-import { live } from '@dxos/live-object';
 import { type ThemedClassName } from '@dxos/react-ui';
 import {
   type ActionGraphEdges,
@@ -18,7 +17,6 @@ import {
   createMenuAction,
   useMenuActions,
 } from '@dxos/react-ui-menu';
-import { atomFromSignal } from '@dxos/react-ui-menu';
 
 import { translationKey } from '../../translations';
 
@@ -34,20 +32,20 @@ type TableToolbarState = Partial<{ viewDirty: boolean }>;
 
 export type TableToolbarProps = ThemedClassName<
   TableToolbarState & {
-    onAdd: () => void;
-    onSave: () => void;
+    onAdd?: () => void;
+    onSave?: () => void;
     attendableId?: string;
     customActions?: Atom.Atom<ActionGraphProps>;
   }
 >;
 
 const createTableToolbarActions = ({
-  state,
+  stateAtom,
   onAdd,
   onSave,
   customActions,
 }: {
-  state: TableToolbarState;
+  stateAtom: Atom.Atom<TableToolbarState>;
   onAdd?: () => void;
   onSave?: () => void;
   customActions?: Atom.Atom<ActionGraphProps>;
@@ -64,13 +62,14 @@ const createTableToolbarActions = ({
       nodes.push(add);
     }
     if (onSave) {
+      const state = get(stateAtom);
       const save = createMenuAction<TableToolbarActionProperties>('save-view', onSave, {
         type: 'save-view' as const,
         icon: 'ph--floppy-disk--regular',
         label: ['save view label', { ns: translationKey }],
         testId: 'table.toolbar.save-view',
         iconOnly: false,
-        hidden: get(atomFromSignal(() => !state.viewDirty)),
+        hidden: !state.viewDirty,
       });
       nodes.push(save);
     }
@@ -97,10 +96,17 @@ export const TableToolbar = ({
   onSave,
   customActions,
 }: TableToolbarProps) => {
-  const state = useMemo(() => live<TableToolbarState>({ viewDirty }), []);
+  const registry = useContext(RegistryContext);
+  const stateAtom = useMemo(() => Atom.make<TableToolbarState>({ viewDirty }), []);
+
+  // Update state.viewDirty when the prop changes.
+  useEffect(() => {
+    registry.set(stateAtom, { viewDirty });
+  }, [registry, stateAtom, viewDirty]);
+
   const actionsCreator = useMemo(
-    () => createTableToolbarActions({ state, onAdd, onSave, customActions }),
-    [state, onAdd, onSave, customActions],
+    () => createTableToolbarActions({ stateAtom, onAdd, onSave, customActions }),
+    [stateAtom, onAdd, onSave, customActions],
   );
   const menu = useMenuActions(actionsCreator);