@dxos/react-ui-table 0.8.2-main.f11618f → 0.8.2-staging.7ac8446

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

@@ -12,7 +12,7 @@ import { invariant } from '@dxos/invariant';
 import { useGlobalFilteredObjects } from '@dxos/plugin-search';
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
-import { Filter, useQuery, useSchema, live } from '@dxos/react-client/echo';
+import { Filter, useQuery, useSchema, create } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { ViewEditor } from '@dxos/react-ui-form';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
@@ -73,7 +73,7 @@ const useTestTableModel = () => {
 
   const handleInsertRow = useCallback(() => {
     if (space && schema) {
-      space.db.add(live(schema, {}));
+      space.db.add(create(schema, {}));
     }
   }, [space, schema]);
 
@@ -222,11 +222,11 @@ const meta: Meta<StoryProps> = {
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(live(TableType, {}));
+        const table = space.db.add(create(TableType, {}));
         const schema = await initializeTable({ client, space, table, initialRow: false });
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
-            live(schema, {
+            create(schema, {
               name: faker.person.fullName(),
             }),
           );
@@ -247,17 +247,17 @@ export const StaticSchema: StoryObj = {
   parameters: { translations },
   decorators: [
     withClientProvider({
-      types: [TableType, ViewType, Testing.Contact, Testing.Organization],
+      types: [TableType, ViewType, Testing.Contact, Testing.Org],
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(live(TableType, {}));
+        const table = space.db.add(create(TableType, {}));
         await initializeTable({ client, space, table, typename: Testing.Contact.typename });
 
         const factory = createObjectFactory(space.db, faker as any);
         await factory([
           { type: Testing.Contact, count: 10 },
-          { type: Testing.Organization, count: 1 },
+          { type: Testing.Org, count: 1 },
         ]);
       },
     }),
@@ -303,13 +303,13 @@ export const Tags: Meta<StoryProps> = {
         const [storedSchema] = await space.db.schemaRegistry.register([schema]);
 
         // Initialize table.
-        const table = space.db.add(live(TableType, {}));
+        const table = space.db.add(create(TableType, {}));
         await initializeTable({ client, space, table, initialRow: false, typename });
 
         // Populate.
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
-            live(storedSchema, {
+            create(storedSchema, {
               single: faker.helpers.arrayElement([...selectOptionIds, undefined]),
               multiple: faker.helpers.randomSubset(selectOptionIds),
             }),

package/src/components/Table/Table.tsx

@@ -19,29 +19,27 @@ import { invariant } from '@dxos/invariant';
 import { Filter } from '@dxos/react-client/echo';
 import { useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
-import {
-  closestCell,
-  type DxGridElement,
-  type DxGridPosition,
-  type GridContentProps,
-  Grid,
-  type DxGridPlane,
-  type DxGridPlaneRange,
-  gridSeparatorInlineEnd,
-  gridSeparatorBlockEnd,
-} from '@dxos/react-ui-grid';
+import { closestCell, type DxGridElement, type DxGridPosition, type GridContentProps, Grid } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
 import { isNotFalsy, safeParseInt } from '@dxos/util';
 
 import { ColumnActionsMenu } from './ColumnActionsMenu';
 import { ColumnSettings } from './ColumnSettings';
 import { CreateRefPanel } from './CreateRefPanel';
+import { RefPanel } from './RefPanel';
 import { RowActionsMenu } from './RowActionsMenu';
 import { ModalController, type TableModel, type TablePresentation } from '../../model';
 import { translationKey } from '../../translations';
 import { tableButtons, tableControls } from '../../util';
 import { createOption, TableCellEditor, type TableCellEditorProps } from '../TableCellEditor';
 
+// NOTE(Zan): These fragments add border to inline-end and block-end of the grid using pseudo-elements.
+// These are offset by 1px to avoid double borders in planks.
+const inlineEndLine =
+  '[&>.dx-grid]:relative [&>.dx-grid]:after:absolute [&>.dx-grid]:after:inset-block-0 [&>.dx-grid]:after:-inline-end-px [&>.dx-grid]:after:is-px [&>.dx-grid]:after:bg-separator';
+const blockEndLine =
+  '[&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-inline-0 [&>.dx-grid]:before:-block-end-px [&>.dx-grid]:before:bs-px [&>.dx-grid]:before:bg-separator';
+
 //
 // Table.Root
 //
@@ -100,17 +98,20 @@ const TableMain = forwardRef<TableController, TableMainProps>(
       };
     }, [model]);
 
-    const getCells = useCallback<NonNullable<GridContentProps['getCells']>>(
-      (range: DxGridPlaneRange, plane: DxGridPlane) => presentation?.getCells(range, plane) ?? {},
-      [presentation],
-    );
+    // TODO(burdon): Replace useEffect below.
+    // const getCells = useCallback<GridContentProps['getCells']>(
+    //   (range: DxGridRange, plane: DxGridPlane) => presentation?.getCells(range, plane) ?? {},
+    //   [presentation],
+    // );
 
     useEffect(() => {
       if (!presentation || !dxGrid) {
         return;
       }
-      dxGrid.getCells = getCells;
-    }, [presentation, dxGrid, getCells]);
+
+      // TODO(burdon): Pass to Grid.Content?
+      dxGrid.getCells = (range, plane) => presentation.getCells(range, plane);
+    }, [presentation, dxGrid]);
 
     /**
      * Provides an external controller that can be called to repaint the table.
@@ -180,6 +181,10 @@ const TableMain = forwardRef<TableController, TableMainProps>(
               modals.showColumnCreator();
               break;
             }
+            case 'referencedCell': {
+              modals.showReferencePanel(data.targetId, data.schemaId);
+              break;
+            }
             case 'sort': {
               model?.sorting?.toggleSort(data.fieldId);
               break;
@@ -351,7 +356,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           onQuery={handleQuery}
         />
         <Grid.Content
-          className={mx('[--dx-grid-base:var(--surface-bg)]', gridSeparatorInlineEnd, gridSeparatorBlockEnd)}
+          className={mx('[--dx-grid-base:var(--surface-bg)]', inlineEndLine, blockEndLine)}
           frozen={frozen}
           // getCells={getCells}
           columns={model.columnMeta.value}
@@ -368,6 +373,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
         <ColumnActionsMenu model={model} modals={modals} />
         <ColumnSettings model={model} modals={modals} onNewColumn={handleNewColumn} />
         <CreateRefPanel model={model} modals={modals} />
+        <RefPanel model={model} modals={modals} />
       </Grid.Root>
     );
   },

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

@@ -10,15 +10,15 @@ import React, { useEffect, useMemo } from 'react';
 import { AST, type BaseObject, ImmutableSchema, type BaseSchema, type HasId } from '@dxos/echo-schema';
 import { getAnnotation } from '@dxos/effect';
 import { faker } from '@dxos/random';
-import { live, makeRef } from '@dxos/react-client/echo';
-import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { Contact, createView, Organization, ViewProjection, ViewType } from '@dxos/schema';
-import { createAsyncGenerator, type ValueGenerator } from '@dxos/schema/testing';
+import { create, makeRef, type ReactiveObject } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { createView, ViewProjection, ViewType } from '@dxos/schema';
+import { createGenerator, Testing, type ValueGenerator } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { Table } from './Table';
 import { useTableModel } from '../../hooks';
-import { type TableFeatures, TablePresentation, type TableRow } from '../../model';
+import { TablePresentation } from '../../model';
 import translations from '../../translations';
 import { TableType } from '../../types';
 
@@ -30,14 +30,12 @@ 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 = <T extends BaseObject & HasId>(schema: BaseSchema<T>, count: number) => {
-  const { space } = useClientProvider();
-
   const table = useMemo(() => {
     // const { typename } = pipe(schema.ast, AST.getAnnotation<TypeAnnotation>(TypeAnnotationId), Option.getOrThrow);
     const typename = schema.typename;
     const name = getAnnotation<string>(AST.TitleAnnotationId)(schema.ast) ?? typename;
     const view = createView({ name, typename, jsonSchema: schema.jsonSchema });
-    return live(TableType, { view: makeRef(view) });
+    return create(TableType, { view: makeRef(view) });
   }, [schema]);
 
   const projection = useMemo(() => {
@@ -49,24 +47,16 @@ const useTestModel = <T extends BaseObject & HasId>(schema: BaseSchema<T>, count
     return new ViewProjection(schema.jsonSchema, table.view.target);
   }, [schema, table]);
 
-  const features = useMemo<TableFeatures>(
-    () => ({ schemaEditable: false, dataEditable: true, selection: { enabled: false } }),
-    [],
-  );
-
-  const model = useTableModel<TableRow>({ table, projection, rows: [], features });
+  const model = useTableModel({ table, projection, rows: [] });
   useEffect(() => {
-    if (!model || !space) {
+    if (!model) {
       return;
     }
 
-    const objectGenerator = createAsyncGenerator(generator, schema, { optional: true, db: space?.db });
-    void objectGenerator.createObjects(count).then((objects) => {
-      model.setRows(objects);
-    });
-  }, [model, space]);
-
-  console.log(projection?.getFieldProjections());
+    const objectGenerator = createGenerator(generator, schema, { optional: true });
+    const objects: ReactiveObject<T>[] = Array.from({ length: count }).map(() => objectGenerator.createObject());
+    model.setRows(objects);
+  }, [model]);
 
   const presentation = useMemo(() => {
     if (!model) {
@@ -81,20 +71,21 @@ const useTestModel = <T extends BaseObject & HasId>(schema: BaseSchema<T>, count
 
 const DefaultStory = () => {
   // TODO(burdon): Remove need for ImmutableSchema wrapper at API-level.
-  const orgSchema = useMemo(() => new ImmutableSchema(Organization), []);
-  const { model: orgModel, presentation: orgPresentation } = useTestModel<Organization>(orgSchema, 50);
+  const orgSchema = useMemo(() => new ImmutableSchema(Testing.Org), []);
+  const { model: orgModel, presentation: orgPresentation } = useTestModel<Testing.Org>(orgSchema, 50);
 
   // TODO(burdon): Generate links with references.
-  const contactSchema = useMemo(() => new ImmutableSchema(Contact), []);
-  const { model: contactModel, presentation: contactPresentation } = useTestModel<Contact>(contactSchema, 50);
+  const contactSchema = useMemo(() => new ImmutableSchema(Testing.Contact), []);
+  const { model: contactModel, presentation: contactPresentation } = useTestModel<Testing.Contact>(contactSchema, 50);
 
+  // TODO(burdon): Scrolling isn't working.
   return (
-    <div className='is-full bs-full grid grid-cols-2 divide-x divide-separator'>
+    <div className='grow grid grid-cols-2 divide-x divide-separator'>
       <Table.Root>
-        <Table.Main model={orgModel} presentation={orgPresentation} ignoreAttention />
+        <Table.Main model={orgModel} presentation={orgPresentation} />
       </Table.Root>
       <Table.Root>
-        <Table.Main model={contactModel} presentation={contactPresentation} ignoreAttention />
+        <Table.Main model={contactModel} presentation={contactPresentation} />
       </Table.Root>
     </div>
   );
@@ -106,7 +97,7 @@ const meta: Meta<typeof DefaultStory> = {
   parameters: { translations },
   decorators: [
     withClientProvider({
-      types: [TableType, ViewType, Organization, Contact],
+      types: [TableType, ViewType, Testing.Org, Testing.Contact],
       createIdentity: true,
       createSpace: true,
     }),

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

@@ -10,7 +10,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { ImmutableSchema, type EchoSchema } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
-import { Filter, useQuery, live } from '@dxos/react-client/echo';
+import { Filter, useQuery, create } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { defaultSizeRow, Grid, type GridEditing } from '@dxos/react-ui-grid';
 import { ViewProjection, ViewType } from '@dxos/schema';
@@ -95,11 +95,11 @@ const meta: Meta<StoryProps> = {
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(live(TableType, {}));
+        const table = space.db.add(create(TableType, {}));
         const schema = await initializeTable({ client, space, table });
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
-            live(schema, {
+            create(schema, {
               name: faker.person.fullName(),
             }),
           );

package/src/components/TableToolbar/TableToolbar.tsx

@@ -4,7 +4,7 @@
 
 import React, { useCallback, useMemo } from 'react';
 
-import { live } from '@dxos/live-object';
+import { create } from '@dxos/live-object';
 import { type ThemedClassName } from '@dxos/react-ui';
 import {
   createGapSeparator,
@@ -60,7 +60,7 @@ const createTableToolbarActions = (state: TableToolbarState) => {
 };
 
 export const TableToolbar = ({ classNames, viewDirty, attendableId, onAction }: TableToolbarProps) => {
-  const state = useMemo(() => live<TableToolbarState>({ viewDirty }), []);
+  const state = useMemo(() => create<TableToolbarState>({ viewDirty }), []);
   const actionsCreator = useCallback(() => createTableToolbarActions(state), [state]);
   const menu = useMenuActions(actionsCreator);
 

package/src/components/testing.ts

@@ -6,7 +6,7 @@ import { useEffect } from 'react';
 
 import { setValue, toJsonSchema, S, TypeEnum, TypedObject, FormatEnum } from '@dxos/echo-schema';
 import { faker } from '@dxos/random';
-import { live, makeRef } from '@dxos/react-client/echo';
+import { create, makeRef } from '@dxos/react-client/echo';
 import { createView, type ViewProjection } from '@dxos/schema';
 
 import { TableType } from '../types';
@@ -20,7 +20,7 @@ export const TestSchema = TypedObject({ typename: 'example.com/type/Test', versi
 });
 
 export const createTable = (schema = TestSchema) => {
-  return live(TableType, {
+  return create(TableType, {
     view: makeRef(
       createView({
         name: 'Test',
@@ -32,7 +32,7 @@ export const createTable = (schema = TestSchema) => {
 };
 
 export const createItems = (n: number) => {
-  const { data } = live({
+  const { data } = create({
     data: Array.from({ length: n }, () => ({
       name: faker.person.fullName(),
       age: faker.number.int({ min: 20, max: 70 }),

package/src/hooks/useTableModel.ts

@@ -5,7 +5,7 @@
 import { effect } from '@preact/signals-core';
 import { useEffect, useState } from 'react';
 
-import { fullyQualifiedId, getSpace, type Live } from '@dxos/react-client/echo';
+import { fullyQualifiedId, getSpace, type ReactiveObject } from '@dxos/react-client/echo';
 import { useSelectionActions } from '@dxos/react-ui-attention';
 import { type ViewProjection } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
@@ -16,7 +16,7 @@ import { type TableType } from '../types';
 export type UseTableModelParams<T extends TableRow = TableRow> = {
   table?: TableType;
   projection?: ViewProjection;
-  rows?: Live<T>[];
+  rows?: ReactiveObject<T>[];
   rowActions?: TableRowAction[];
   onSelectionChanged?: (selection: string[]) => void;
   onRowAction?: (actionId: string, data: T) => void;

package/src/model/modal-controller.ts

@@ -5,7 +5,7 @@
 import { signal } from '@preact/signals-core';
 import { type RefObject, type MutableRefObject } from 'react';
 
-import { type Live } from '@dxos/live-object';
+import { type ReactiveObject } from '@dxos/live-object';
 import { log } from '@dxos/log';
 
 export type ColumnSettingsMode = { type: 'create' } | { type: 'edit'; fieldId: string };
@@ -18,7 +18,7 @@ export type ModalState =
       type: 'createRefPanel';
       typename: string;
       initialValues?: Record<string, string>;
-      onCreate?: (obj: Live<any>) => void;
+      onCreate?: (obj: ReactiveObject<any>) => void;
     }
   | { type: 'columnSettings'; mode: ColumnSettingsMode }
   | { type: 'closed' };
@@ -72,7 +72,7 @@ export class ModalController {
     typename: string,
     anchorCell: Element | null,
     initialValues?: Record<string, string>,
-    onCreate?: (obj: Live<any>) => void,
+    onCreate?: (obj: ReactiveObject<any>) => void,
   ) => {
     if (anchorCell) {
       this._triggerRef.current = anchorCell as HTMLElement;

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

@@ -9,7 +9,7 @@ import { S, TypedObject } from '@dxos/echo-schema';
 import { updateCounter } from '@dxos/echo-schema/testing';
 import { registerSignalsRuntime } from '@dxos/echo-signals';
 import { createEchoSchema } from '@dxos/live-object/testing';
-import { live, makeRef } from '@dxos/react-client/echo';
+import { create, makeRef } from '@dxos/react-client/echo';
 import { createView, ViewProjection } from '@dxos/schema';
 
 import { TableModel, type TableModelProps } from './table-model';
@@ -69,7 +69,7 @@ describe('TableModel', () => {
 
   describe('reactivity', () => {
     it('pure signals should nest', () => {
-      const signal$ = live({ arr: [{ thingInside: 1 }, { thingInside: 2 }] });
+      const signal$ = create({ arr: [{ thingInside: 1 }, { thingInside: 2 }] });
 
       const computed$ = computed(() => {
         return signal$.arr.map((row) =>
@@ -107,6 +107,6 @@ const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
   const view = createView({ name: 'Test', typename: schema.typename, jsonSchema: schema.jsonSchema });
   const projection = new ViewProjection(schema.jsonSchema, view);
-  const table = live(TableType, { view: makeRef(view) });
+  const table = create(TableType, { view: makeRef(view) });
   return new TableModel({ id: table.id, space: undefined, view, projection, ...props });
 };

package/src/model/table-model.ts

@@ -8,7 +8,7 @@ import { type Space } from '@dxos/client/echo';
 import { Resource } from '@dxos/context';
 import { type FieldSortType, FormatEnum, getValue, setValue, type JsonProp } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
-import { isLiveObject, makeRef } from '@dxos/live-object';
+import { isReactiveObject, makeRef } from '@dxos/live-object';
 import { formatForEditing, parseValue } from '@dxos/react-ui-form';
 import {
   type DxGridAxisMeta,
@@ -21,7 +21,6 @@ import { type ViewType, type ViewProjection } from '@dxos/schema';
 import { type SelectionMode, SelectionModel } from './selection-model';
 import { TableSorting } from './table-sorting';
 import { touch } from '../util';
-import { extractTagIds } from '../util/tag';
 
 // TODO(burdon): Use schema types.
 export type TableRow = Record<JsonProp, any> & { id: string };
@@ -343,28 +342,12 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       case FormatEnum.Ref: {
         // TODO(ZaymonFC): This get's called an additional time by the cell editor onBlur, but with the cell editors
         //   plain string value. Maybe onBlur should be called with the actual value?
-        if (isLiveObject(value)) {
+        if (isReactiveObject(value)) {
           setValue(this._rows.value[rowIdx], field.path, makeRef(value));
         }
         break;
       }
 
-      case FormatEnum.SingleSelect: {
-        const ids = extractTagIds(value);
-        if (ids && ids.length > 0) {
-          setValue(this._rows.value[rowIdx], field.path, ids[0]);
-        }
-        break;
-      }
-
-      case FormatEnum.MultiSelect: {
-        const ids = extractTagIds(value);
-        if (ids) {
-          setValue(this._rows.value[rowIdx], field.path, ids);
-        }
-        break;
-      }
-
       default: {
         setValue(
           this._rows.value[rowIdx],

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

@@ -5,7 +5,7 @@
 import { describe, expect, it, beforeEach } from 'vitest';
 
 import { S, TypedObject } from '@dxos/echo-schema';
-import { live, makeRef } from '@dxos/live-object';
+import { create, makeRef } from '@dxos/live-object';
 import { createEchoSchema } from '@dxos/live-object/testing';
 import { createView, ViewProjection } from '@dxos/schema';
 
@@ -22,7 +22,7 @@ describe('TablePresentation', () => {
 
     beforeEach(async () => {
       updateCount = 0;
-      ({ data } = live({
+      ({ data } = create({
         data: [
           { col1: 'A', col2: 1, col3: true },
           { col1: 'B', col2: 2, col3: false },
@@ -97,6 +97,6 @@ const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
   const view = createView({ name: 'Test', typename: schema.typename, jsonSchema: schema.jsonSchema });
   const projection = new ViewProjection(schema.jsonSchema, view);
-  const table = live(TableType, { view: makeRef(view) });
+  const table = create(TableType, { view: makeRef(view) });
   return new TableModel({ id: table.id, view, projection, ...props });
 };

package/src/model/table-presentation.ts

@@ -4,7 +4,7 @@
 
 import { signal } from '@preact/signals-core';
 
-import { FormatEnum, getDXN, getValue } from '@dxos/echo-schema';
+import { FormatEnum, getValue } from '@dxos/echo-schema';
 import { cellClassesForFieldType, formatForDisplay } from '@dxos/react-ui-form';
 import {
   type DxGridPlane,
@@ -124,8 +124,10 @@ export class TablePresentation<T extends TableRow = TableRow> {
       if (props.format === FormatEnum.Ref && props.referenceSchema) {
         const targetObj = getValue(obj, field.path)?.target;
         if (targetObj) {
-          const dxn = getDXN(targetObj)?.toString();
-          cell.accessoryHtml = `<dx-ref-tag ref=${dxn} class="dx-button block is-6 pli-[3px] plb-[3px] pbe-[2px] min-bs-0 absolute inline-end-1"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
+          cell.accessoryHtml = tableButtons.referencedCell.render({
+            targetId: targetObj.id as any as string,
+            schemaId: props.referenceSchema,
+          });
         }
       }
 

package/src/util/dynamic-table.ts

@@ -3,7 +3,7 @@
 //
 
 import type { BaseSchema, JsonSchemaType, SortDirectionType } from '@dxos/echo-schema';
-import { live, makeRef } from '@dxos/live-object';
+import { create, makeRef } from '@dxos/live-object';
 import {
   createView,
   getSchemaFromPropertyDefinitions,
@@ -66,7 +66,7 @@ export const makeDynamicTable = ({
     ...(properties && { fields: properties.map((property) => property.name) }),
   });
 
-  const table = live(TableType, { name: 'dynamic-table', view: makeRef(view) });
+  const table = create(TableType, { name: 'dynamic-table', view: makeRef(view) });
   const projection = new ViewProjection(jsonSchema, view);
   if (properties && view.fields) {
     setProperties(view, projection, properties);

package/src/util/table-buttons.ts

@@ -15,6 +15,7 @@ export const BUTTON_IDENTIFIERS: { [K in TableButton]: string } = {
 type ButtonData =
   | { type: 'columnSettings'; fieldId: string }
   | { type: 'newColumn'; disabled?: boolean }
+  | { type: 'referencedCell'; schemaId: string; targetId: string }
   | { type: 'rowMenu'; rowIndex: number }
   | { type: 'sort'; fieldId: string; direction?: 'asc' | 'desc' };
 
@@ -75,6 +76,27 @@ const columnSettingsButton = {
   }),
 } as const;
 
+const referencedCellButton = {
+  attr: BUTTON_IDENTIFIERS.referencedCell,
+  icon: 'ph--link-simple-horizontal--regular',
+  render: ({ targetId, schemaId }: Omit<Extract<ButtonData, { type: 'referencedCell' }>, 'type'>) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.referencedCell,
+      icon: referencedCellButton.icon,
+      data: {
+        'data-target-id': targetId,
+        'data-schema-id': schemaId,
+      },
+      testId: 'table-ref-cell-button',
+    });
+  },
+  getData: (el: HTMLElement): Extract<ButtonData, { type: 'referencedCell' }> => ({
+    type: 'referencedCell',
+    targetId: el.getAttribute('data-target-id')!,
+    schemaId: el.getAttribute('data-schema-id')!,
+  }),
+} as const;
+
 const rowMenuButton = {
   attr: BUTTON_IDENTIFIERS.rowMenu,
   icon: 'ph--dots-three--regular',
@@ -121,6 +143,7 @@ const sortButton = {
 export const tableButtons = {
   addColumn: addColumnButton,
   columnSettings: columnSettingsButton,
+  referencedCell: referencedCellButton,
   rowMenu: rowMenuButton,
   sort: sortButton,
 } as const;

package/src/util/table.ts

@@ -14,7 +14,7 @@ import {
   TypeEnum,
 } from '@dxos/echo-schema';
 import { type Client, PublicKey } from '@dxos/react-client';
-import { live, makeRef, type Space } from '@dxos/react-client/echo';
+import { create, makeRef, type Space } from '@dxos/react-client/echo';
 import { createFieldId, createView, getSchemaProperties, ViewProjection, type ViewType } from '@dxos/schema';
 
 import { type TableType } from '../types';
@@ -41,7 +41,11 @@ export const initializeTable = async ({
       throw new Error(`Schema not found: ${typename}`);
     }
 
-    const fields = getSchemaProperties(schema.ast).map((prop) => prop.name);
+    // We need to get the schema properties here.
+    // For now, only simple types and refs, not compound types are going to be supported.
+    const fields = getSchemaProperties(schema.ast)
+      .filter((prop) => prop.format !== FormatEnum.Ref)
+      .map((prop) => prop.name);
 
     table.view = makeRef(
       createView({
@@ -71,7 +75,7 @@ export const initializeTable = async ({
 
     if (initialRow) {
       // TODO(burdon): Last (first) row should not be in db and should be managed by the model.
-      space.db.add(live(schema, {}));
+      space.db.add(create(schema, {}));
     }
 
     return schema;

package/dist/types/src/util/tag.d.ts

@@ -1,11 +0,0 @@
-/**
- * Regex pattern for matching tags in the format [Label](id)
- */
-export declare const TAG_PATTERN_REGEX: RegExp;
-/**
- * Extracts tag IDs from a string in the format [Label](id)
- * @param value The string to extract IDs from
- * @returns Array of extracted IDs or undefined if no matches or value is not a string
- */
-export declare const extractTagIds: (value: unknown) => string[] | undefined;
-//# sourceMappingURL=tag.d.ts.map

package/dist/types/src/util/tag.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/util/tag.ts"],"names":[],"mappings":"AAMA;;GAEG;AACH,eAAO,MAAM,iBAAiB,QAA6B,CAAC;AAE5D;;;;GAIG;AACH,eAAO,MAAM,aAAa,UAAW,OAAO,KAAG,MAAM,EAAE,GAAG,SAgBzD,CAAC"}

package/src/util/tag.ts

@@ -1,33 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-// TODO(ZaymonFC): Push this into the tag picker module.
-
-/**
- * Regex pattern for matching tags in the format [Label](id)
- */
-export const TAG_PATTERN_REGEX = /\[([^\]]+)\]\(([^)]+)\)/g;
-
-/**
- * Extracts tag IDs from a string in the format [Label](id)
- * @param value The string to extract IDs from
- * @returns Array of extracted IDs or undefined if no matches or value is not a string
- */
-export const extractTagIds = (value: unknown): string[] | undefined => {
-  if (typeof value !== 'string') {
-    return undefined;
-  }
-
-  const ids: string[] = [];
-  let match;
-
-  // Use the global regex to find all matches
-  while ((match = TAG_PATTERN_REGEX.exec(value)) !== null) {
-    if (match[2]) {
-      ids.push(match[2]);
-    }
-  }
-
-  return ids.length > 0 ? ids : undefined;
-};