@dxos/react-ui-table 0.8.3-staging.0fa589b → 0.8.4-main.1da679c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.8.3-staging.0fa589b",
+  "version": "0.8.4-main.1da679c",
   "description": "A table component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,16 +10,25 @@
   "type": "module",
   "exports": {
     "./deprecated": {
+      "source": "./src/deprecated/index.ts",
       "types": "./dist/types/src/deprecated/index.d.ts",
       "browser": "./dist/lib/browser/deprecated/index.mjs",
       "node": "./dist/lib/node-esm/deprecated/index.mjs"
     },
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
     },
+    "./testing": {
+      "source": "./src/testing/index.ts",
+      "types": "./dist/types/src/testing/index.d.ts",
+      "browser": "./dist/lib/browser/testing/index.mjs",
+      "node": "./dist/lib/node-esm/testing/index.mjs"
+    },
     "./types": {
+      "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts",
       "browser": "./dist/lib/browser/types/index.mjs",
       "node": "./dist/lib/node-esm/types/index.mjs"
@@ -31,6 +40,9 @@
       "deprecated": [
         "dist/types/src/deprecated/index.d.ts"
       ],
+      "testing": [
+        "dist/types/src/testing/index.d.ts"
+      ],
       "types": [
         "dist/types/src/types/index.d.ts"
       ]
@@ -41,9 +53,9 @@
     "src"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^6.18.1",
-    "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.34.1",
+    "@codemirror/autocomplete": "^6.18.7",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.38.2",
     "@fluentui/react-tabster": "^9.24.2",
     "@preact-signals/safe-react": "^0.9.0",
     "@preact/signals-core": "^1.9.0",
@@ -53,60 +65,61 @@
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
     "lodash.orderby": "^4.6.0",
-    "@dxos/context": "0.8.3-staging.0fa589b",
-    "@dxos/debug": "0.8.3-staging.0fa589b",
-    "@dxos/echo-schema": "0.8.3-staging.0fa589b",
-    "@dxos/effect": "0.8.3-staging.0fa589b",
-    "@dxos/echo": "0.8.3-staging.0fa589b",
-    "@dxos/invariant": "0.8.3-staging.0fa589b",
-    "@dxos/lit-grid": "0.8.3-staging.0fa589b",
-    "@dxos/live-object": "0.8.3-staging.0fa589b",
-    "@dxos/keys": "0.8.3-staging.0fa589b",
-    "@dxos/log": "0.8.3-staging.0fa589b",
-    "@dxos/plugin-search": "0.8.3-staging.0fa589b",
-    "@dxos/plugin-space": "0.8.3-staging.0fa589b",
-    "@dxos/react-client": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-attention": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-editor": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-form": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-menu": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-grid": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-searchlist": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-stack": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-syntax-highlighter": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-types": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-tag-picker": "0.8.3-staging.0fa589b",
-    "@dxos/schema": "0.8.3-staging.0fa589b",
-    "@dxos/util": "0.8.3-staging.0fa589b"
+    "@dxos/async": "0.8.4-main.1da679c",
+    "@dxos/context": "0.8.4-main.1da679c",
+    "@dxos/debug": "0.8.4-main.1da679c",
+    "@dxos/echo": "0.8.4-main.1da679c",
+    "@dxos/echo-db": "0.8.4-main.1da679c",
+    "@dxos/effect": "0.8.4-main.1da679c",
+    "@dxos/keys": "0.8.4-main.1da679c",
+    "@dxos/echo-schema": "0.8.4-main.1da679c",
+    "@dxos/lit-grid": "0.8.4-main.1da679c",
+    "@dxos/invariant": "0.8.4-main.1da679c",
+    "@dxos/live-object": "0.8.4-main.1da679c",
+    "@dxos/log": "0.8.4-main.1da679c",
+    "@dxos/random": "0.8.4-main.1da679c",
+    "@dxos/react-client": "0.8.4-main.1da679c",
+    "@dxos/react-ui-editor": "0.8.4-main.1da679c",
+    "@dxos/react-ui-attention": "0.8.4-main.1da679c",
+    "@dxos/react-ui-form": "0.8.4-main.1da679c",
+    "@dxos/plugin-search": "0.8.4-main.1da679c",
+    "@dxos/react-ui-grid": "0.8.4-main.1da679c",
+    "@dxos/react-ui-menu": "0.8.4-main.1da679c",
+    "@dxos/react-ui-searchlist": "0.8.4-main.1da679c",
+    "@dxos/react-ui-stack": "0.8.4-main.1da679c",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.1da679c",
+    "@dxos/react-ui-tag-picker": "0.8.4-main.1da679c",
+    "@dxos/schema": "0.8.4-main.1da679c",
+    "@dxos/util": "0.8.4-main.1da679c",
+    "@dxos/react-ui-types": "0.8.4-main.1da679c"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
-    "@phosphor-icons/react": "^2.1.5",
+    "@effect-rx/rx-react": "0.38.0",
+    "@effect/platform": "0.90.2",
     "@types/lodash.orderby": "^4.6.9",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "effect": "3.14.21",
+    "effect": "3.17.7",
     "fast-check": "^3.19.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/echo-signals": "0.8.3-staging.0fa589b",
-    "@dxos/random": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-theme": "0.8.3-staging.0fa589b",
-    "@dxos/storybook-utils": "0.8.3-staging.0fa589b",
-    "@dxos/test-utils": "0.8.3-staging.0fa589b"
+    "vite": "7.1.1",
+    "@dxos/echo-signals": "0.8.4-main.1da679c",
+    "@dxos/plugin-search": "0.8.4-main.1da679c",
+    "@dxos/react-ui": "0.8.4-main.1da679c",
+    "@dxos/random": "0.8.4-main.1da679c",
+    "@dxos/react-ui-theme": "0.8.4-main.1da679c",
+    "@dxos/storybook-utils": "0.8.4-main.1da679c",
+    "@dxos/test-utils": "0.8.4-main.1da679c"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
-    "@phosphor-icons/react": "^2.1.5",
+    "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-theme": "0.8.3-staging.0fa589b"
+    "@dxos/react-ui": "0.8.4-main.1da679c",
+    "@dxos/react-ui-theme": "0.8.4-main.1da679c"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Table/ColumnActionsMenu.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import { DropdownMenu, useTranslation } from '@dxos/react-ui';
 
-import { type TableModel, type ModalController } from '../../model';
+import { type ModalController, type TableModel } from '../../model';
 import { translationKey } from '../../translations';
 
 type ColumnActionsMenuProps = { model: TableModel; modals: ModalController };

package/src/components/Table/ColumnSettings.tsx

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

package/src/components/Table/CreateRefPanel.tsx

@@ -5,47 +5,66 @@
 import { Schema } from 'effect';
 import React, { useCallback, useMemo } from 'react';
 
-import { live } from '@dxos/react-client/echo';
+import { Type } from '@dxos/echo';
+import { live } from '@dxos/live-object';
+// TODO(wittjosiah): Remove dependency on react-client.
+import { useClient } from '@dxos/react-client';
+import { getSpace } from '@dxos/react-client/echo';
 import { Popover } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 import { type GridScopedProps, useGridContext } from '@dxos/react-ui-grid';
 
-import { type TableModel, type ModalController } from '../../model';
+import { type ModalController, type TableModel } from '../../model';
 
 export type CreateRefPanelProps = { model?: TableModel; modals: ModalController };
 
 // TODO(burdon): Factor out Space dependency (to plugin?)
 export const CreateRefPanel = ({ model, modals, __gridScope }: GridScopedProps<CreateRefPanelProps>) => {
   const { id: gridId } = useGridContext('TableCellEditor', __gridScope);
-  const space = model?.space;
+  const client = useClient();
+  const space = model && getSpace(model?.view);
   const state = modals.state.value;
 
-  const schema = useMemo<Schema.Schema<any> | undefined>(() => {
+  const getSchema = useCallback(() => {
     if (!space || state?.type !== 'createRefPanel') {
       return;
     }
 
-    const [schema] = space.db.schemaRegistry.query({ typename: state.typename }).runSync();
-    if (schema) {
-      const omit = Schema.omit<any, any, ['id']>('id');
-      return omit(schema);
+    const staticSchema = client.graph.schemaRegistry.schemas.find(
+      (schema) => Type.getTypename(schema) === state.typename,
+    );
+    if (staticSchema) {
+      return staticSchema;
     }
+
+    const [schema] = space.db.schemaRegistry.query({ typename: state.typename }).runSync();
+    return schema;
   }, [space, state]);
 
+  const schema = useMemo<Schema.Schema<any> | undefined>(() => {
+    const schema = getSchema();
+    if (!schema) {
+      return;
+    }
+
+    const omit = Schema.omit<any, any, ['id']>('id');
+    return omit(schema);
+  }, [getSchema]);
+
   const handleSave = useCallback(
     (values: any) => {
       if (!model || !space || state?.type !== 'createRefPanel') {
         return;
       }
 
-      const [schema] = space.db.schemaRegistry.query({ typename: state.typename }).runSync();
+      const schema = getSchema();
       if (schema) {
         const obj = space.db.add(live(schema, values));
         state.onCreate?.(obj);
       }
       void modals.close();
     },
-    [modals, space, state],
+    [model, modals, space, state],
   );
 
   const handleCancel = useCallback(() => {
@@ -54,7 +73,7 @@ export const CreateRefPanel = ({ model, modals, __gridScope }: GridScopedProps<C
     }
   }, [modals]);
 
-  if (!model?.view || !model.projection) {
+  if (!model?.projection) {
     return null;
   }
 

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

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo, useState } from 'react';
 
 import { Obj } from '@dxos/echo';
@@ -17,9 +17,10 @@ import { type SchemaPropertyDefinition } from '@dxos/schema';
 import { Testing } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { DynamicTable } from './DynamicTable';
 import { type TableFeatures } from '../../model';
-import translations from '../../translations';
+import { translations } from '../../translations';
+
+import { DynamicTable } from './DynamicTable';
 
 faker.seed(0);
 
@@ -56,15 +57,17 @@ const DynamicTableStory = () => {
 // Story definitions.
 //
 
-const meta: Meta = {
+const meta = {
   title: 'ui/react-ui-table/DynamicTable',
   component: DynamicTable,
   parameters: { translations },
   decorators: [withLayout({ fullscreen: true }), withTheme],
-};
+} satisfies Meta<typeof DynamicTable>;
 
 export default meta;
 
+type Story = StoryObj<typeof meta>;
+
 export const Default: StoryObj = {
   render: DynamicTableStory,
 };

package/src/components/Table/DynamicTable.tsx

@@ -3,16 +3,17 @@
 //
 
 import { type Schema } from 'effect';
-import React, { useRef, useMemo, useCallback } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 
 import { type JsonSchemaType } from '@dxos/echo-schema';
 import { type ThemedClassName, useDefaultValue } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
-import { Table, type TableController } from './Table';
 import { useTableModel } from '../../hooks';
 import { type TableFeatures, TablePresentation, type TableRowAction } from '../../model';
-import { getBaseSchema, makeDynamicTable, type TablePropertyDefinition } from '../../util';
+import { type TablePropertyDefinition, getBaseSchema, makeDynamicTable } from '../../util';
+
+import { Table, type TableController } from './Table';
 
 type DynamicTableProps = ThemedClassName<{
   name?: string; // TODO(burdon): Remove?
@@ -36,18 +37,23 @@ export const DynamicTable = ({
   name = 'example.com/dynamic-table', // Rmove default or make random; this will lead to type collisions.
   rows,
   properties,
-  jsonSchema,
+  jsonSchema: _jsonSchema,
   schema,
   rowActions,
   onRowClick,
   onRowAction,
   ...props
 }: DynamicTableProps) => {
-  const { table, projection } = useMemo(() => {
-    // TODO(burdon): Remove variance from the props (should be normalized externally; possibly via hooks).
-    const props = getBaseSchema({ typename: name, properties, jsonSchema, schema });
-    return makeDynamicTable({ ...props, properties });
-  }, [name, properties, schema, jsonSchema]);
+  // TODO(burdon): Remove variance from the props (should be normalized externally; possibly via hooks).
+  const { typename, jsonSchema } = useMemo(
+    () => getBaseSchema({ typename: name, properties, jsonSchema: _jsonSchema, schema }),
+    [name, properties, _jsonSchema, schema],
+  );
+
+  const { projection, view } = useMemo(
+    () => makeDynamicTable({ typename, jsonSchema, properties }),
+    [typename, jsonSchema, properties],
+  );
 
   const tableRef = useRef<TableController>(null);
   const handleCellUpdate = useCallback((cell: any) => {
@@ -68,8 +74,9 @@ export const DynamicTable = ({
   );
 
   const model = useTableModel({
-    table,
     rows,
+    view,
+    schema: jsonSchema,
     projection,
     features,
     rowActions,

package/src/components/Table/{relations.stories.tsx → Relations.stories.tsx}

@@ -4,27 +4,25 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react';
-import { SchemaAST } from 'effect';
-import React, { useEffect, useMemo } from 'react';
-
-import { Obj, type Type } from '@dxos/echo';
-import { getSchemaTypename, toJsonSchema } from '@dxos/echo-schema';
-import { getAnnotation } from '@dxos/effect';
-import { invariant } from '@dxos/invariant';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { Type } from '@dxos/echo';
+import { type JsonSchemaType } from '@dxos/echo-schema';
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
-import { makeRef } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { DataType, createView, ViewProjection, ViewType } from '@dxos/schema';
-import { createAsyncGenerator, type ValueGenerator } from '@dxos/schema/testing';
+import { useAsyncEffect } from '@dxos/react-ui';
+import { DataType } from '@dxos/schema';
+import { type ValueGenerator, createAsyncGenerator } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { Table } from './Table';
 import { useTableModel } from '../../hooks';
 import { type TableFeatures, TablePresentation, type TableRow } from '../../model';
-import translations from '../../translations';
-import { TableType } from '../../types';
+import { translations } from '../../translations';
+import { Table } from '../../types';
+
+import { Table as TableComponent } from './Table';
 
 faker.seed(1);
 const generator: ValueGenerator = faker as any;
@@ -34,35 +32,34 @@ const generator: ValueGenerator = faker as any;
 // TODO(burdon): Reconcile schemas types and utils (see API PR).
 // TODO(burdon): Base type for T (with id); see ECHO API PR?
 const useTestModel = <S extends Type.Obj.Any>(schema: S, count: number) => {
+  const client = useClient();
   const { space } = useClientProvider();
-
-  const jsonSchema = useMemo(() => toJsonSchema(schema), [schema]);
-  const table = useMemo(() => {
-    if (!space) {
-      return undefined;
-    }
-    const typename = getSchemaTypename(schema);
-    invariant(typename);
-    const name = getAnnotation<string>(SchemaAST.TitleAnnotationId)(schema.ast) ?? typename;
-    const view = createView({ name, typename, jsonSchema });
-    return space.db.add(Obj.make(TableType, { view: makeRef(view) }));
-  }, [schema, space, jsonSchema]);
-
-  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(jsonSchema, table.view.target);
-  }, [jsonSchema, table]);
+  const [view, setView] = useState<DataType.View>();
+  const [jsonSchema, setJsonSchema] = useState<JsonSchemaType>();
 
   const features = useMemo<TableFeatures>(
     () => ({ schemaEditable: false, dataEditable: true, selection: { enabled: false } }),
     [],
   );
 
-  const model = useTableModel<TableRow>({ table, projection, rows: [], features });
+  useAsyncEffect(async () => {
+    if (!space) {
+      return;
+    }
+
+    const {
+      jsonSchema,
+      schema: effectSchema,
+      view,
+    } = await Table.makeView({ client, space, typename: Type.getTypename(schema) });
+    setJsonSchema(jsonSchema);
+    setView(view);
+    space.db.add(view);
+    await space.db.schemaRegistry.register([effectSchema]);
+  }, [client, space, schema]);
+
+  const model = useTableModel<TableRow>({ view, schema: jsonSchema, rows: [], features });
+
   useEffect(() => {
     if (!model || !space) {
       return;
@@ -92,33 +89,45 @@ const DefaultStory = () => {
 
   return (
     <div className='is-full bs-full grid grid-cols-2 divide-x divide-separator'>
-      <Table.Root>
-        <Table.Main model={orgModel} presentation={orgPresentation} client={client} ignoreAttention />
-      </Table.Root>
-      <Table.Root>
-        <Table.Main model={contactModel} presentation={contactPresentation} client={client} ignoreAttention />
-      </Table.Root>
+      <TableComponent.Root>
+        <TableComponent.Main
+          model={orgModel}
+          schema={DataType.Organization}
+          presentation={orgPresentation}
+          client={client}
+          ignoreAttention
+        />
+      </TableComponent.Root>
+      <TableComponent.Root>
+        <TableComponent.Main
+          model={contactModel}
+          schema={DataType.Person}
+          presentation={contactPresentation}
+          client={client}
+          ignoreAttention
+        />
+      </TableComponent.Root>
     </div>
   );
 };
 
-const meta: Meta<typeof DefaultStory> = {
-  title: 'ui/react-ui-table/relations',
+const meta = {
+  title: 'ui/react-ui-table/Relations',
   render: DefaultStory,
   parameters: { translations, controls: { disable: true } },
   decorators: [
     withClientProvider({
-      types: [TableType, ViewType, DataType.Organization, DataType.Person],
+      types: [DataType.View, DataType.Organization, DataType.Person, Table.Table],
       createIdentity: true,
       createSpace: true,
     }),
     withTheme,
     withLayout({ fullscreen: true }),
   ],
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj<typeof DefaultStory>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};

package/src/components/Table/RowActionsMenu.tsx

@@ -4,9 +4,9 @@
 
 import React from 'react';
 
-import { DropdownMenu, useTranslation } from '@dxos/react-ui';
+import { DropdownMenu, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
-import { type TableModel, type ModalController } from '../../model';
+import { type ModalController, type TableModel } from '../../model';
 import { translationKey } from '../../translations';
 
 type RowActionsMenuProps = { model: TableModel; modals: ModalController };
@@ -38,7 +38,7 @@ export const RowActionsMenu = ({ model, modals }: RowActionsMenuProps) => {
                 model.handleRowAction(action.id, state.rowIndex);
               }}
             >
-              {t(action.translationKey)}
+              {toLocalizedString(action.label, t)}
             </DropdownMenu.Item>
           ))}
         </DropdownMenu.Viewport>