@dxos/react-ui-table 0.8.1-staging.391c573 → 0.8.1-staging.5be625a

package/src/components/Table/DynamicTable.tsx

@@ -0,0 +1,86 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useRef, useMemo, useCallback } from 'react';
+
+import { mx } from '@dxos/react-ui-theme';
+
+import { Table, type TableController } from './Table';
+import { useTableModel } from '../../hooks';
+import { TablePresentation, type TableRowAction } from '../../model';
+import { makeDynamicTable, type TablePropertyDefinition } from '../../util';
+
+type DynamicTableProps = {
+  data: any[];
+  properties: TablePropertyDefinition[];
+  tableName?: string;
+  classNames?: string;
+  onRowClicked?: (row: any) => void;
+  rowActions?: TableRowAction[];
+  onRowAction?: (actionId: string, datum: any) => void;
+};
+
+/**
+ * A dynamic table component that renders data using the specified properties.
+ * Properties define both the schema and display characteristics of the table columns.
+ */
+export const DynamicTable = ({
+  data,
+  properties,
+  classNames,
+  tableName = 'com.example/dynamic_table',
+  onRowClicked,
+  rowActions,
+  onRowAction,
+}: DynamicTableProps) => {
+  // TODO(ZaymonFC): Consider allowing the user to supply a schema directly instead of deriving it from
+  //  the properties array. (Both should be viable).
+  const { table, viewProjection } = useMemo(() => {
+    return makeDynamicTable(tableName, properties);
+  }, [tableName, properties]);
+
+  const tableRef = useRef<TableController>(null);
+  const handleCellUpdate = useCallback((cell: any) => {
+    tableRef.current?.update?.(cell);
+  }, []);
+
+  const handleRowOrderChanged = useCallback(() => {
+    tableRef.current?.update?.();
+  }, []);
+
+  const features = useMemo(() => ({ selection: false, dataEditable: false }), []);
+
+  const model = useTableModel({
+    table,
+    objects: data,
+    projection: viewProjection,
+    features,
+    onCellUpdate: handleCellUpdate,
+    onRowOrderChanged: handleRowOrderChanged,
+    rowActions,
+    onRowAction,
+  });
+
+  const presentation = useMemo(() => {
+    if (model) {
+      return new TablePresentation(model);
+    }
+  }, [model]);
+
+  return (
+    <div className={mx('is-full bs-full grow grid', classNames)}>
+      <div className='grid min-bs-0 overflow-hidden'>
+        <Table.Root>
+          <Table.Main
+            ref={tableRef}
+            model={model}
+            presentation={presentation}
+            onRowClicked={onRowClicked}
+            ignoreAttention
+          />
+        </Table.Root>
+      </div>
+    </div>
+  );
+};

package/src/components/Table/RefPanel.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { getSpace, type Space } from '@dxos/react-client/echo';
+import { type Space } from '@dxos/react-client/echo';
 import { Popover } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 
@@ -22,11 +22,11 @@ const getRefTargetObj = (space?: Space, id?: string) => {
 
 export const RefPanel = ({ model, modals }: RefPanelProps) => {
   const state = modals.state.value;
-  const space = getSpace(model.table);
+  const space = model?.space;
   const targetObj = getRefTargetObj(space, state?.type === 'refPanel' ? state.targetId : undefined);
   const schema = space && state?.type === 'refPanel' ? space.db.schemaRegistry.getSchema(state.typename) : undefined;
 
-  if (!model.table?.view || !model.projection) {
+  if (!model.view || !model.projection) {
     return null;
   }
 

package/src/components/Table/RowActionsMenu.tsx

@@ -23,9 +23,24 @@ export const RowActionsMenu = ({ model, modals }: RowActionsMenuProps) => {
       <DropdownMenu.VirtualTrigger virtualRef={modals.trigger} />
       <DropdownMenu.Content>
         <DropdownMenu.Viewport>
-          <DropdownMenu.Item data-testid='row-menu-delete' onClick={() => model.deleteRow(state.rowIndex)}>
-            {t(hasSelection ? 'bulk delete row label' : 'delete row label')}
-          </DropdownMenu.Item>
+          {model.features.dataEditable !== false && (
+            <DropdownMenu.Item data-testid='row-menu-delete' onClick={() => model.deleteRow(state.rowIndex)}>
+              {t(hasSelection ? 'bulk delete row label' : 'delete row label')}
+            </DropdownMenu.Item>
+          )}
+          {/* Custom actions */}
+          {model.rowActions?.map((action) => (
+            <DropdownMenu.Item
+              key={action.id}
+              data-testid={`row-action-${action.id}`}
+              onClick={() => {
+                modals.close();
+                model.handleRowAction(action.id, state.rowIndex);
+              }}
+            >
+              {t(action.translationKey)}
+            </DropdownMenu.Item>
+          ))}
         </DropdownMenu.Viewport>
         <DropdownMenu.Arrow />
       </DropdownMenu.Content>

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

@@ -4,20 +4,24 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { type StoryObj, type Meta } from '@storybook/react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 
+import { FormatEnum, ImmutableSchema } from '@dxos/echo-schema';
 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, create } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { useDefaultValue } from '@dxos/react-ui';
 import { ViewEditor } from '@dxos/react-ui-form';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { ViewProjection, ViewType } from '@dxos/schema';
+import { type SchemaPropertyDefinition, ViewProjection, ViewType } from '@dxos/schema';
+import { Testing, createObjectFactory } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
+import { DynamicTable as DynamicTableComponent } from './DynamicTable';
 import { Table, type TableController } from './Table';
 import { useTableModel, type UseTableModelParams } from '../../hooks';
 import { TablePresentation } from '../../model';
@@ -35,20 +39,13 @@ faker.seed(0);
 //
 
 const DefaultStory = () => {
+  const client = useClient();
   const { space } = useClientProvider();
-  invariant(space);
 
-  const tables = useQuery(space, Filter.schema(TableType));
-  const [table, setTable] = useState<TableType>();
-  const schema = useSchema(space, table?.view?.target?.query.typename);
-
-  useEffect(() => {
-    if (space && tables.length && !table) {
-      const table = tables[0];
-      invariant(table.view);
-      setTable(table);
-    }
-  }, [space, tables]);
+  const filter = useMemo(() => Filter.schema(TableType), []);
+  const tables = useQuery(space, filter);
+  const table = useMemo(() => tables.at(0), [tables]);
+  const schema = useSchema(client, space, table?.view?.target?.query.typename);
 
   const projection = useMemo(() => {
     if (schema && table?.view?.target) {
@@ -56,6 +53,11 @@ const DefaultStory = () => {
     }
   }, [schema, table?.view?.target]);
 
+  const features = useMemo(
+    () => ({ selection: true, dataEditable: true, schemaEditable: !(schema instanceof ImmutableSchema) }),
+    [schema],
+  );
+
   const objects = useQuery(space, schema ? Filter.schema(schema) : Filter.nothing());
   const filteredObjects = useGlobalFilteredObjects(objects);
 
@@ -68,7 +70,7 @@ const DefaultStory = () => {
   const handleDeleteRows = useCallback(
     (_: number, objects: any[]) => {
       for (const object of objects) {
-        space.db.remove(object);
+        space?.db.remove(object);
       }
     },
     [space],
@@ -95,6 +97,7 @@ const DefaultStory = () => {
   const model = useTableModel({
     table,
     projection,
+    features,
     objects: filteredObjects,
     onInsertRow: handleInsertRow,
     onDeleteRows: handleDeleteRows,
@@ -132,11 +135,12 @@ const DefaultStory = () => {
   const onTypenameChanged = useCallback(
     (typename: string) => {
       if (table?.view?.target) {
-        schema?.updateTypename(typename);
+        invariant(schema);
+        schema.mutable.updateTypename(typename);
         table.view.target.query.typename = typename;
       }
     },
-    [table?.view?.target, schema],
+    [schema, table?.view?.target],
   );
 
   if (!schema || !table) {
@@ -170,6 +174,25 @@ const DefaultStory = () => {
   );
 };
 
+const DynamicTableStory = () => {
+  const properties = useMemo<SchemaPropertyDefinition[]>(
+    () => [
+      { name: 'name', format: FormatEnum.String },
+      { name: 'age', format: FormatEnum.Number },
+    ],
+    [],
+  );
+
+  const [objects, _setObjects] = useState<any[]>(
+    Array.from({ length: 100 }, () => ({
+      name: faker.person.fullName(),
+      age: faker.number.int({ min: 18, max: 80 }),
+    })),
+  );
+
+  return <DynamicTableComponent properties={properties} data={objects} />;
+};
+
 type StoryProps = {
   rows?: number;
 } & Pick<SimulatorProps, 'insertInterval' | 'updateInterval'>;
@@ -228,9 +251,9 @@ const meta: Meta<StoryProps> = {
       types: [TableType, ViewType],
       createIdentity: true,
       createSpace: true,
-      onSpaceCreated: async ({ space }) => {
+      onSpaceCreated: async ({ client, space }) => {
         const table = space.db.add(create(TableType, {}));
-        const schema = await initializeTable({ space, table, initialRow: false });
+        const schema = await initializeTable({ client, space, table, initialRow: false });
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
             create(schema, {
@@ -249,6 +272,34 @@ export default meta;
 
 export const Default = {};
 
+export const StaticSchema: StoryObj = {
+  render: DefaultStory,
+  parameters: { translations },
+  decorators: [
+    withClientProvider({
+      types: [TableType, ViewType, Testing.ContactType, Testing.OrgType],
+      createIdentity: true,
+      createSpace: true,
+      onSpaceCreated: async ({ client, space }) => {
+        const table = space.db.add(create(TableType, {}));
+        await initializeTable({ client, space, table, typename: Testing.ContactType.typename });
+
+        const factory = createObjectFactory(space.db, faker as any);
+        await factory([
+          { type: Testing.ContactType, count: 10 },
+          { type: Testing.OrgType, count: 1 },
+        ]);
+      },
+    }),
+    withTheme,
+    withLayout({ fullscreen: true, tooltips: true }),
+  ],
+};
+
+export const DynamicTable: StoryObj = {
+  render: DynamicTableStory,
+};
+
 // TODO(ZaymonFC): Restore the performance stories.
 // type Story = StoryObj<StoryProps>;
 // export const Mutations: Story = {

package/src/components/Table/Table.tsx

@@ -15,12 +15,12 @@ import React, {
 
 import { getValue } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
-import { Filter, getSpace, fullyQualifiedId } from '@dxos/react-client/echo';
+import { Filter } from '@dxos/react-client/echo';
 import { useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 import { type DxGridElement, Grid, type GridContentProps, closestCell, type DxGridPosition } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
-import { isNotFalsy } from '@dxos/util';
+import { isNotFalsy, safeParseInt } from '@dxos/util';
 
 import { ColumnActionsMenu } from './ColumnActionsMenu';
 import { ColumnSettings } from './ColumnSettings';
@@ -39,8 +39,6 @@ const inlineEndLine =
 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';
 
-const frozen = { frozenRowsStart: 1, frozenColsStart: 1, frozenColsEnd: 1 };
-
 //
 // Root
 //
@@ -75,15 +73,21 @@ export type TableMainProps = {
   model?: TableModel;
   presentation?: TablePresentation;
   ignoreAttention?: boolean;
+  onRowClicked?: (row: any) => void;
 };
 
 const TableMain = forwardRef<TableController, TableMainProps>(
-  ({ model, presentation, ignoreAttention }, forwardedRef) => {
+  ({ model, presentation, ignoreAttention, onRowClicked }, forwardedRef) => {
     const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
-    const { hasAttention } = useAttention(model?.table ? fullyQualifiedId(model.table) : 'table');
+    const { hasAttention } = useAttention(model?.id ?? 'table');
     const { t } = useTranslation(translationKey);
     const modals = useMemo(() => new ModalController(), []);
 
+    const frozen = useMemo(
+      () => ({ frozenRowsStart: 1, frozenColsStart: model?.features.selection ? 1 : 0, frozenColsEnd: 1 }),
+      [model],
+    );
+
     /**
      * Provides an external controller that can be called to repaint the table.
      */
@@ -111,6 +115,14 @@ const TableMain = forwardRef<TableController, TableMainProps>(
 
     const handleGridClick = useCallback(
       (event: MouseEvent) => {
+        if (onRowClicked) {
+          const rowIndex = safeParseInt((event.target as HTMLElement).ariaRowIndex ?? '');
+          if (rowIndex != null) {
+            const row = model?.getRowAt(rowIndex);
+            row && onRowClicked(row);
+          }
+        }
+
         if (!modals) {
           return;
         }
@@ -197,6 +209,10 @@ const TableMain = forwardRef<TableController, TableMainProps>(
 
     const handleEnter = useCallback<NonNullable<TableCellEditorProps['onEnter']>>(
       (cell) => {
+        if (!model?.features.dataEditable) {
+          return;
+        }
+
         // TODO(burdon): Insert row only if bottom row isn't completely blank already.
         if (model && cell.row === model.getRowCount() - 1) {
           model.insertRow(cell.row);
@@ -213,6 +229,10 @@ const TableMain = forwardRef<TableController, TableMainProps>(
 
     const handleKeyDown = useCallback<NonNullable<GridContentProps['onKeyDown']>>(
       (event) => {
+        if (!model?.features.dataEditable) {
+          return;
+        }
+
         const cell = closestCell(event.target);
         if (!model || !cell) {
           return;
@@ -260,7 +280,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
     const handleQuery = useCallback<NonNullable<TableCellEditorProps['onQuery']>>(
       async ({ field, props }, text) => {
         if (model && props.referenceSchema && field.referencePath) {
-          const space = getSpace(model.table);
+          const space = model.space;
           invariant(space);
           const schema = space.db.schemaRegistry.getSchema(props.referenceSchema);
           if (schema) {
@@ -291,7 +311,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
 
         return [];
       },
-      [model],
+      [model, t],
     );
 
     if (!model || !modals) {
@@ -299,7 +319,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
     }
 
     return (
-      <Grid.Root id={model.table.id ?? 'table-grid'}>
+      <Grid.Root id={model.id ?? 'table-grid'}>
         <TableCellEditor
           model={model}
           modals={modals}
@@ -313,7 +333,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           frozen={frozen}
           columns={model.columnMeta.value}
           limitRows={model.getRowCount() ?? 0}
-          limitColumns={model.table.view?.target?.fields?.length ?? 0}
+          limitColumns={model.view?.fields?.length ?? 0}
           onAxisResize={handleAxisResize}
           onClick={handleGridClick}
           onKeyDown={handleKeyDown}

package/src/components/Table/index.ts

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

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

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React, { useEffect, useMemo, useState } from 'react';
 
-import { type EchoSchema } from '@dxos/echo-schema';
+import { ImmutableSchema, type EchoSchema } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
 import { Filter, useQuery, create } from '@dxos/react-client/echo';
@@ -48,7 +48,12 @@ const DefaultStory = ({ editing }: StoryProps) => {
     }
   }, [schema, table?.view]);
 
-  const model = useTableModel({ table, projection });
+  const features = useMemo(
+    () => ({ selection: true, dataEditable: true, schemaEditable: !(schema instanceof ImmutableSchema) }),
+    [],
+  );
+
+  const model = useTableModel({ table, projection, features });
 
   const handleQuery: TableCellEditorProps['onQuery'] = async ({ field }) => {
     const { objects } = await space.db.query(schema).run();
@@ -84,9 +89,9 @@ const meta: Meta<StoryProps> = {
       types: [TableType, ViewType],
       createIdentity: true,
       createSpace: true,
-      onSpaceCreated: async ({ space }) => {
+      onSpaceCreated: async ({ client, space }) => {
         const table = space.db.add(create(TableType, {}));
-        const schema = await initializeTable({ space, table });
+        const schema = await initializeTable({ client, space, table });
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
             create(schema, {

package/src/hooks/useTableModel.ts

@@ -5,24 +5,34 @@
 import { effect } from '@preact/signals-core';
 import { useEffect, useState } from 'react';
 
-import { type ReactiveObject } 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';
 
-import { type BaseTableRow, TableModel, type TableModelProps } from '../model';
+import { type BaseTableRow, TableModel, type TableModelProps, type TableRowAction } from '../model';
 import { type TableType } from '../types';
 
 export type UseTableModelParams<T extends BaseTableRow = { id: string }> = {
   table?: TableType;
   projection?: ViewProjection;
   objects?: ReactiveObject<T>[];
-} & Pick<TableModelProps<T>, 'onInsertRow' | 'onDeleteRows' | 'onDeleteColumn' | 'onCellUpdate' | 'onRowOrderChanged'>;
+  onSelectionChanged?: (selection: string[]) => void;
+  rowActions?: TableRowAction[];
+  onRowAction?: (actionId: string, data: T) => void;
+} & Pick<
+  TableModelProps<T>,
+  'features' | 'onInsertRow' | 'onDeleteRows' | 'onDeleteColumn' | 'onCellUpdate' | 'onRowOrderChanged'
+>;
 
 export const useTableModel = <T extends BaseTableRow = { id: string }>({
   objects,
   table,
   projection,
+  features,
+  onSelectionChanged,
+  rowActions,
+  onRowAction,
   ...props
 }: UseTableModelParams<T>): TableModel<T> | undefined => {
   const [model, setModel] = useState<TableModel<T>>();
@@ -33,7 +43,16 @@ export const useTableModel = <T extends BaseTableRow = { id: string }>({
 
     let model: TableModel<T> | undefined;
     const t = setTimeout(async () => {
-      model = new TableModel<T>({ table, projection, ...props });
+      model = new TableModel<T>({
+        id: fullyQualifiedId(table),
+        space: getSpace(table),
+        view: table.view?.target,
+        projection,
+        features,
+        rowActions,
+        onRowAction,
+        ...props,
+      });
       await model.open();
       setModel(model);
     });
@@ -42,7 +61,7 @@ export const useTableModel = <T extends BaseTableRow = { id: string }>({
       clearTimeout(t);
       void model?.close();
     };
-  }, [table, projection]); // TODO(burdon): Trigger if callbacks change?
+  }, [table, projection, table?.view?.target, features, rowActions]); // TODO(burdon): Trigger if callbacks change?
 
   // Update data.
   useEffect(() => {
@@ -59,7 +78,9 @@ export const useTableModel = <T extends BaseTableRow = { id: string }>({
     }
 
     const unsubscribe = effect(() => {
-      select([...model.selection.selection.value]);
+      const selectedItems = [...model.selection.selection.value];
+      select(selectedItems);
+      onSelectionChanged?.(selectedItems);
     });
 
     // Maybe clear the selection here?
@@ -67,7 +88,7 @@ export const useTableModel = <T extends BaseTableRow = { id: string }>({
       clear();
       unsubscribe();
     };
-  }, [model]);
+  }, [model, onSelectionChanged]);
 
   return model;
 };

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

@@ -108,5 +108,5 @@ const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
   const view = createView({ name: 'Test', typename: schema.typename, jsonSchema: schema.jsonSchema });
   const projection = new ViewProjection(schema, view);
   const table = create(TableType, { view: makeRef(view) });
-  return new TableModel({ table, projection, ...props });
+  return new TableModel({ id: table.id, space: undefined, view, projection, ...props });
 };