@dxos/react-ui-table 0.8.4-main.e098934 → 0.8.4-main.e8ec1fe

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -4,15 +4,14 @@
 
 import { type Completion } from '@codemirror/autocomplete';
 import { EditorView } from '@codemirror/view';
-import { type Schema } from 'effect/Schema';
+import type * as Schema from 'effect/Schema';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import { debounce } from '@dxos/async';
 import type { Client } from '@dxos/client';
-import { FormatEnum, TypeEnum } from '@dxos/echo-schema';
+import { FormatEnum, TypeEnum } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { type DxGridAxis, type DxGridPosition } from '@dxos/lit-grid';
-import { createMarkdownExtensions } from '@dxos/react-ui-editor';
 import {
   type EditorBlurHandler,
   type EditorKeyEvent,
@@ -24,13 +23,12 @@ import {
   parseCellIndex,
   useGridContext,
 } from '@dxos/react-ui-grid';
-import { createLinks, tagPicker } from '@dxos/react-ui-tag-picker';
 import { type FieldProjection } from '@dxos/schema';
 
 import { type ModalController, type TableModel } from '../../model';
 
 import { CellValidationMessage } from './CellValidationMessage';
-import { FormCellEditor } from './FormCellEditor';
+import { FormCellEditor, type OnCreateHandler } from './FormCellEditor';
 
 /**
  * Option to create new object/value.
@@ -40,8 +38,9 @@ export type QueryResult = Pick<Completion, 'label'> & { data: any };
 export type TableCellEditorProps = {
   model?: TableModel;
   modals?: ModalController;
-  schema?: Schema.AnyNoContext;
+  schema?: Schema.Schema.AnyNoContext;
   onFocus?: (axis?: DxGridAxis, delta?: -1 | 0 | 1, cell?: DxGridPosition) => void;
+  onCreate?: OnCreateHandler;
   onSave?: () => void;
   client?: Client;
 };
@@ -55,6 +54,7 @@ export const TableValueEditor = ({
   schema,
   onFocus,
   onSave,
+  onCreate,
   client,
   __gridScope,
 }: GridScopedProps<TableCellEditorProps>) => {
@@ -85,6 +85,7 @@ export const TableValueEditor = ({
         schema={schema}
         __gridScope={__gridScope}
         onSave={onSave}
+        onCreate={onCreate}
         client={client}
         modals={modals}
       />
@@ -213,48 +214,6 @@ export const TableCellEditor = ({
         ...(editing?.initialContent && { onNav: handleClose }),
       }),
     ];
-
-    const format = fieldProjection.props.format;
-    if (format === FormatEnum.SingleSelect || format === FormatEnum.MultiSelect) {
-      // TODO(ZaymonFC): Reconcile this with the TagPicker component?
-      const options = fieldProjection.props.options || [];
-      const mode = format === FormatEnum.SingleSelect ? ('single-select' as const) : ('multi-select' as const);
-
-      // Add markdown extensions needed by tag picker.
-      extensions.push(createMarkdownExtensions());
-      extensions.push(
-        tagPicker({
-          mode,
-          keymap: false,
-          onSearch: (text, selectedIds) => {
-            return options
-              .filter(
-                (option) =>
-                  selectedIds.indexOf(option.id) === -1 &&
-                  (text.length === 0 || option.title.toLowerCase().includes(text.toLowerCase())),
-              )
-              .map((option) => ({
-                id: option.id,
-                label: option.title,
-                hue: option.color as any,
-              }));
-          },
-          onUpdate: (ids) => {
-            if (model && editing) {
-              if (ids.length === 0) {
-                return;
-              }
-              if (mode === 'single-select') {
-                void handleEnter(ids[0]);
-              } else {
-                void handleEnter(ids);
-              }
-            }
-          },
-        }),
-      );
-    }
-
     // Add validation extension to handle content changes.
     if (model && editing) {
       extensions.push(
@@ -283,52 +242,6 @@ export const TableCellEditor = ({
   const getCellContent = useCallback<GridCellEditorProps['getCellContent']>(() => {
     if (model && editing) {
       const cell = parseCellIndex(editing.index);
-      const { col } = cell;
-      const field = model.projection.fields[col];
-      const fieldProjection = model.projection.getFieldProjection(field.id);
-
-      if (
-        fieldProjection?.props.format === FormatEnum.SingleSelect ||
-        fieldProjection?.props.format === FormatEnum.MultiSelect
-      ) {
-        const value = model.getCellData(cell);
-        if (value !== undefined) {
-          const options = fieldProjection.props.options || [];
-          if (fieldProjection.props.format === FormatEnum.MultiSelect) {
-            const tagItems = value
-              .split(',')
-              .map((id: string) => {
-                const option = options.find((o) => o.id === id);
-                if (option) {
-                  return {
-                    id,
-                    label: option.title,
-                    hue: option.color as any,
-                  };
-                }
-                return undefined;
-              })
-              .filter((item: any): item is { id: any; label: string; hue: any } => item !== undefined);
-
-            return createLinks(tagItems);
-          } else {
-            const option = options.find((o) => o.id === value);
-
-            if (option) {
-              const tagItem = {
-                id: value,
-                label: option.title,
-                hue: option.color as any,
-              };
-
-              return createLinks([tagItem]);
-            }
-          }
-        }
-
-        return '';
-      }
-
       const value = model.getCellData(cell);
       return value !== undefined ? String(value) : '';
     }

package/src/components/TableCellEditor/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './TableCellEditor';
+export { type OnCreateHandler } from './FormCellEditor';

package/src/components/TableToolbar/TableToolbar.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
+import { Atom } from '@effect-atom/atom-react';
 import React, { useMemo } from 'react';
 
 import { live } from '@dxos/live-object';
@@ -18,7 +18,7 @@ import {
   createMenuAction,
   useMenuActions,
 } from '@dxos/react-ui-menu';
-import { rxFromSignal } from '@dxos/react-ui-menu';
+import { atomFromSignal } from '@dxos/react-ui-menu';
 
 import { translationKey } from '../../translations';
 
@@ -30,12 +30,14 @@ export type TableToolbarActionType = 'add-row' | 'comment' | 'save-view';
 
 type TableToolbarState = Partial<{ viewDirty: boolean }>;
 
+// TODO(burdon): Radix style layout.
+
 export type TableToolbarProps = ThemedClassName<
   TableToolbarState & {
     onAdd: () => void;
     onSave: () => void;
     attendableId?: string;
-    customActions?: Rx.Rx<ActionGraphProps>;
+    customActions?: Atom.Atom<ActionGraphProps>;
   }
 >;
 
@@ -46,33 +48,41 @@ const createTableToolbarActions = ({
   customActions,
 }: {
   state: TableToolbarState;
-  onAdd: () => void;
-  onSave: () => void;
-  customActions?: Rx.Rx<ActionGraphProps>;
+  onAdd?: () => void;
+  onSave?: () => void;
+  customActions?: Atom.Atom<ActionGraphProps>;
 }) =>
-  Rx.make((get) => {
-    const add = createMenuAction<TableToolbarActionProperties>('add-row', onAdd, {
-      type: 'add-row' as const,
-      icon: 'ph--plus--regular',
-      label: ['add row', { ns: translationKey }],
-      testId: 'table.toolbar.add-row',
-    });
-    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(rxFromSignal(() => !state.viewDirty)),
-    });
+  Atom.make((get) => {
+    const nodes: ActionGraphNodes = [];
+    if (onAdd) {
+      const add = createMenuAction<TableToolbarActionProperties>('add-row', onAdd, {
+        type: 'add-row' as const,
+        icon: 'ph--plus--regular',
+        label: ['add row', { ns: translationKey }],
+        testId: 'table.toolbar.add-row',
+      });
+      nodes.push(add);
+    }
+    if (onSave) {
+      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)),
+      });
+      nodes.push(save);
+    }
     const gap = createGapSeparator();
-    const nodes: ActionGraphNodes = [add, save, ...gap.nodes];
+    nodes.push(...gap.nodes);
     const edges: ActionGraphEdges = nodes.map(({ id: target }) => ({ source: 'root', target }));
     if (customActions) {
       const custom = get(customActions);
       nodes.push(...custom.nodes);
       edges.push(...custom.edges);
     }
+
     return {
       nodes,
       edges,

package/src/components/testing.ts

@@ -2,10 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import { useEffect } from 'react';
 
-import { FormatEnum, ObjectId, TypeEnum, TypedObject, setValue } from '@dxos/echo-schema';
+import { FormatEnum, ObjectId, TypeEnum, TypedObject, setValue } from '@dxos/echo/internal';
 import { live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { type ProjectionModel } from '@dxos/schema';

package/src/hooks/useAddRow.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema } from 'effect';
+import type * as Schema from 'effect/Schema';
 import { useCallback } from 'react';
 
 import { type Space } from '@dxos/client/echo';

package/src/hooks/useTableModel.ts

@@ -6,17 +6,17 @@ import { effect } from '@preact/signals-core';
 import orderBy from 'lodash.orderby';
 import { useEffect, useMemo, useState } from 'react';
 
-import { type JsonSchemaType } from '@dxos/echo-schema';
+import { Obj } from '@dxos/echo';
+import { type JsonSchemaType } from '@dxos/echo/internal';
 import { type Live } from '@dxos/live-object';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
 import { useSelected, useSelectionActions } from '@dxos/react-ui-attention';
-import { type DataType, type ProjectionModel } from '@dxos/schema';
+import { type ProjectionModel, type View } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
 import { TableModel, type TableModelProps, type TableRow, type TableRowAction } from '../model';
 
 export type UseTableModelParams<T extends TableRow = TableRow> = {
-  view?: DataType.View;
+  view?: View.View;
   schema?: JsonSchemaType;
   projection?: ProjectionModel;
   rows?: Live<T>[];
@@ -39,7 +39,7 @@ export const useTableModel = <T extends TableRow = TableRow>({
   onRowAction,
   ...props
 }: UseTableModelParams<T>): TableModel<T> | undefined => {
-  const selected = useSelected(view && fullyQualifiedId(view), 'multi');
+  const selected = useSelected(view && Obj.getDXN(view).toString(), 'multi');
   const initialSelection = useMemo(() => selected, [view]);
 
   const [model, setModel] = useState<TableModel<T>>();

package/src/model/modal-controller.ts

@@ -5,21 +5,12 @@
 import { signal } from '@preact/signals-core';
 import { type MutableRefObject, type RefObject } from 'react';
 
-import { type Live } from '@dxos/live-object';
-import { log } from '@dxos/log';
-
 export type ColumnSettingsMode = { type: 'create' } | { type: 'edit'; fieldId: string };
 
 export type ModalState =
   | { type: 'row'; rowIndex: number }
   | { type: 'column'; fieldId: string }
   | { type: 'refPanel'; targetId: string; typename: string }
-  | {
-      type: 'createRefPanel';
-      typename: string;
-      initialValues?: Record<string, string>;
-      onCreate?: (obj: Live<any>) => void;
-    }
   | { type: 'columnSettings'; mode: ColumnSettingsMode }
   | { type: 'closed' };
 
@@ -68,25 +59,6 @@ export class ModalController {
     }
   };
 
-  public openCreateRef = (
-    typename: string,
-    anchorCell: Element | null,
-    initialValues?: Record<string, string>,
-    onCreate?: (obj: Live<any>) => void,
-  ) => {
-    if (anchorCell) {
-      this._triggerRef.current = anchorCell as HTMLElement;
-      this._state.value = {
-        type: 'createRefPanel',
-        typename,
-        initialValues,
-        onCreate,
-      };
-    } else {
-      log.warn('anchor cell not found while creating new ref');
-    }
-  };
-
   public close = () => {
     this._state.value = { type: 'closed' };
   };

package/src/model/table-model.test.ts

@@ -3,16 +3,16 @@
 //
 
 import { computed } from '@preact/signals-core';
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
 import { Filter, Query } from '@dxos/echo';
-import { TypedObject } from '@dxos/echo-schema';
-import { updateCounter } from '@dxos/echo-schema/testing';
+import { TypedObject } from '@dxos/echo/internal';
+import { updateCounter } from '@dxos/echo/testing';
+import { createEchoSchema } from '@dxos/echo/testing';
 import { registerSignalsRuntime } from '@dxos/echo-signals';
 import { live } from '@dxos/live-object';
-import { createEchoSchema } from '@dxos/live-object/testing';
-import { createView } from '@dxos/schema';
+import { View } from '@dxos/schema';
 
 import { Table } from '../types';
 
@@ -25,7 +25,7 @@ registerSignalsRuntime();
 
 describe('TableModel', () => {
   let updateCount = 0;
-  let model: TableModel;
+  let model: any;
 
   beforeEach(async () => {
     updateCount = 0;
@@ -33,6 +33,11 @@ describe('TableModel', () => {
       onCellUpdate: () => updateCount++,
     });
     await model.open();
+    model.setRows([
+      { id: '1', title: 'Test', completed: false },
+      { id: '2', title: 'Test 2', completed: true },
+      { id: '3', title: 'Test 3', completed: false },
+    ]);
   });
 
   afterEach(async () => {
@@ -108,7 +113,7 @@ class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.
 const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
   const table = Table.make();
-  const view = createView({
+  const view = View.make({
     query: Query.select(Filter.type(schema)),
     jsonSchema: schema.jsonSchema,
     presentation: table,

package/src/model/table-model.ts

@@ -14,11 +14,10 @@ import {
   getValue,
   setValue,
   toEffectSchema,
-} from '@dxos/echo-schema';
+} from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { ObjectId } from '@dxos/keys';
 import { getSnapshot, isLiveObject } from '@dxos/live-object';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
 import { type Label } from '@dxos/react-ui';
 import { formatForEditing, parseValue } from '@dxos/react-ui-form';
 import {
@@ -28,11 +27,11 @@ import {
   type DxGridPosition,
 } from '@dxos/react-ui-grid';
 import {
-  type DataType,
   type FieldSortType,
   ProjectionModel,
   type PropertyType,
   type ValidationError,
+  type View,
   validateSchema,
 } from '@dxos/schema';
 
@@ -78,7 +77,7 @@ const defaultFeatures: TableFeatures = {
 export type InsertRowResult = 'draft' | 'final';
 
 export type TableModelProps<T extends TableRow = TableRow> = {
-  view: DataType.View;
+  view: View.View;
   schema: JsonSchemaType;
   projection?: ProjectionModel;
   features?: Partial<TableFeatures>;
@@ -96,7 +95,7 @@ export type TableModelProps<T extends TableRow = TableRow> = {
 };
 
 export class TableModel<T extends TableRow = TableRow> extends Resource {
-  private readonly _view: DataType.View;
+  private readonly _view: View.View;
   private readonly _projection: ProjectionModel;
   private _table?: Table.Table;
 
@@ -141,6 +140,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     super();
     this._view = view;
     this._projection = projection ?? new ProjectionModel(schema, view.projection);
+    this._projection.normalizeView();
 
     // TODO(ZaymonFC): Use our more robust config merging module?
     this._features = { ...defaultFeatures, ...features };
@@ -175,10 +175,10 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   }
 
   public get id(): string {
-    return fullyQualifiedId(this._view);
+    return Obj.getDXN(this._view).toString();
   }
 
-  public get view(): DataType.View {
+  public get view(): View.View {
     return this._view;
   }
 
@@ -479,7 +479,11 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       }
 
       default: {
-        return formatForEditing({ type: props.type, format: props.format, value });
+        return formatForEditing({
+          type: props.type,
+          format: props.format,
+          value,
+        });
       }
     }
   };

package/src/model/table-presentation.test.ts

@@ -2,14 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import { beforeEach, describe, expect, it } from 'vitest';
 
 import { Filter, Query } from '@dxos/echo';
-import { TypedObject } from '@dxos/echo-schema';
+import { TypedObject } from '@dxos/echo/internal';
+import { createEchoSchema } from '@dxos/echo/testing';
 import { live } from '@dxos/live-object';
-import { createEchoSchema } from '@dxos/live-object/testing';
-import { createView } from '@dxos/schema';
+import { View } from '@dxos/schema';
 
 import { Table } from '../types';
 
@@ -27,8 +27,8 @@ describe('TablePresentation', () => {
       updateCount = 0;
       ({ data } = live({
         data: [
-          { col1: 'A', col2: 1, col3: true },
-          { col1: 'B', col2: 2, col3: false },
+          { title: 'A', count: 1 },
+          { title: 'B', count: 2 },
         ],
       }));
 
@@ -45,8 +45,8 @@ describe('TablePresentation', () => {
       presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 1, col: 2 } }, 'grid');
 
       // Trigger a row update.
-      data[0].col1 = 'New Value';
-      expect(updateCount).toBe(1);
+      data[0].title = 'New Value';
+      expect(updateCount).toBe(2);
 
       // Verify the new value through getCells.
       const cells = presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 0, col: 0 } }, 'grid');
@@ -57,15 +57,14 @@ describe('TablePresentation', () => {
       // Set up visible range to include our test data.
       presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 2, col: 2 } }, 'grid');
 
-      data.push({ col1: 'C', col2: 3, col3: true });
-      expect(updateCount).toBe(1);
+      data.push({ title: 'C', count: 3 });
+      expect(updateCount).toBe(2);
 
       const cells = presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 2, col: 2 } }, 'grid');
 
       // Verify the new row's data.
       expect(cells['0,2']?.value).toBe('C');
       expect(cells['1,2']?.value).toBe('3');
-      expect(cells['2,2']?.value).toBe('true');
     });
 
     it('should handle combined operations reactively', () => {
@@ -73,33 +72,31 @@ describe('TablePresentation', () => {
       presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 2, col: 2 } }, 'grid');
 
       // Multiple operations.
-      data[0].col1 = 'Updated A';
-      data.push({ col1: 'C', col2: 3, col3: true });
+      data[0].title = 'Updated A';
+      data.push({ title: 'C', count: 3, completed: true });
       data.splice(1, 1);
 
       // We expect one update per operation affecting visible rows.
-      expect(updateCount).toBe(3);
+      expect(updateCount).toBe(4);
 
       const cells = presentation.getCells({ start: { row: 0, col: 0 }, end: { row: 1, col: 2 } }, 'grid');
 
       // Verify final state.
       expect(cells['0,0']?.value).toBe('Updated A');
       expect(cells['0,1']?.value).toBe('C');
-      expect(cells['1,1']?.value).toBe('3');
-      expect(cells['2,1']?.value).toBe('true');
     });
   });
 });
 
 class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
   title: Schema.String,
-  completed: Schema.Boolean,
+  count: Schema.Number,
 }) {}
 
 const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
   const table = Table.make();
-  const view = createView({
+  const view = View.make({
     query: Query.select(Filter.type(schema)),
     jsonSchema: schema.jsonSchema,
     presentation: table,

package/src/model/table-presentation.ts

@@ -3,10 +3,10 @@
 //
 
 import { signal } from '@preact/signals-core';
-import { isNotNullable } from 'effect/Predicate';
+import * as Predicate from 'effect/Predicate';
 
 import { Obj } from '@dxos/echo';
-import { FormatEnum, TypeEnum, getValue } from '@dxos/echo-schema';
+import { FormatEnum, TypeEnum, getValue } from '@dxos/echo/internal';
 import { cellClassesForFieldType, formatForDisplay } from '@dxos/react-ui-form';
 import {
   type DxGridCellValue,
@@ -190,7 +190,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
 
         const tags = targetArray
           .map(getLabel)
-          .filter(isNotNullable)
+          .filter(Predicate.isNotNullable)
           .map((title) => {
             return `<span class="dx-tag" data-hue="neutral">${title}</span>`;
           })
@@ -205,7 +205,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
       const targetObj = getValue(obj, field.path)?.target;
       if (targetObj) {
         const dxn = Obj.getDXN(targetObj)?.toString();
-        cell.accessoryHtml = `<dx-anchor refId=${dxn} class="dx-button is-6 pli-[3px] pbe-[2px] min-bs-0 absolute inline-end-2 block-start-[.2rem]" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-anchor>`;
+        cell.accessoryHtml = `<div role="none" class="absolute inline-end-0 inset-block-0 p-[--dx-grid-cell-content-padding-block]"><dx-anchor refId=${dxn} class="dx-button is-6 aspect-square min-bs-0" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-anchor></div>`;
       }
     }
 
@@ -468,7 +468,6 @@ export const cellClassesForRowSelection = (selected: boolean, selectionMode: Sel
 
   switch (selectionMode) {
     case 'single':
-      // TODO(ZaymonFC): @thure, do we need a grid version of 'currentRelated'?
       return ['!bg-currentRelated dx-grid__cell--no-focus-unfurl hover:bg-hoverSurface !cursor-pointer'];
     case 'multiple':
       return ['!bg-gridCellSelected'];

package/src/model/table-sorting.ts

@@ -5,15 +5,15 @@
 import { type ReadonlySignal, type Signal, computed, signal } from '@preact/signals-core';
 import orderBy from 'lodash.orderby';
 
-import { FormatEnum, TypeEnum, getValue } from '@dxos/echo-schema';
+import { FormatEnum, TypeEnum, getValue } from '@dxos/echo/internal';
 import { formatForDisplay } from '@dxos/react-ui-form';
-import type {
-  DataType,
-  FieldSortType,
-  FieldType,
-  ProjectionModel,
-  PropertyType,
-  SortDirectionType,
+import {
+  type FieldSortType,
+  type FieldType,
+  type ProjectionModel,
+  type PropertyType,
+  type SortDirectionType,
+  type View,
 } from '@dxos/schema';
 
 import { type TableRow } from './table-model';
@@ -58,7 +58,7 @@ export class TableSorting<T extends TableRow> {
 
   constructor(
     rows: Signal<T[]>,
-    private readonly _view: DataType.View,
+    private readonly _view: View.View,
     private readonly _projection: ProjectionModel,
   ) {
     this._rows = rows;

package/src/playwright/TableManager.ts

@@ -59,6 +59,6 @@ export class TableManager {
     await this.page.getByLabel(`format ${format}`).click();
     await this.page.getByPlaceholder('Property label.').click();
     await this.page.getByPlaceholder('Property label.').fill(label);
-    await this.page.getByRole('button', { name: 'button save' }).click();
+    await this.page.getByRole('button', { name: 'save button' }).click();
   }
 }