@dxos/react-ui-table 0.8.1-staging.391c573 → 0.8.1-staging.97aedb1

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

@@ -0,0 +1,155 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import React, { useMemo, useState } from 'react';
+
+import { FormatEnum, type JsonSchemaType } from '@dxos/echo-schema';
+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 { 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';
+
+faker.seed(0);
+
+const useTestPropertiesAndObjects = () => {
+  const properties = useMemo<SchemaPropertyDefinition[]>(
+    () => [
+      { name: 'name', format: FormatEnum.String },
+      { name: 'age', format: FormatEnum.Number },
+    ],
+    [],
+  );
+
+  const [rows] = useState<any[]>(
+    Array.from({ length: 10 }, () => ({
+      id: faker.string.uuid(),
+      name: faker.person.fullName(),
+      age: faker.number.int({ min: 18, max: 80 }),
+    })),
+  );
+
+  return { properties, rows };
+};
+
+//
+// Story components.
+//
+
+const DynamicTableStory = () => {
+  const { properties, rows } = useTestPropertiesAndObjects();
+  return <DynamicTable properties={properties} rows={rows} />;
+};
+
+//
+// Story definitions.
+//
+
+const meta: Meta = {
+  title: 'ui/react-ui-table/DynamicTable',
+  component: DynamicTable,
+  parameters: { translations },
+  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true })],
+};
+
+export default meta;
+
+export const Default: StoryObj = {
+  render: DynamicTableStory,
+};
+
+export const WithRowClicks: StoryObj = {
+  render: () => {
+    const { properties, rows } = useTestPropertiesAndObjects();
+
+    const handleRowClicked = (row: any) => {
+      console.log('Row clicked:', row);
+      alert(`Row clicked: ${row.name}, age: ${row.age}`);
+    };
+
+    return <DynamicTable properties={properties} rows={rows} onRowClick={handleRowClicked} />;
+  },
+};
+
+export const WithClickToSelect: StoryObj = {
+  render: () => {
+    const { properties, rows } = useTestPropertiesAndObjects();
+
+    const features = useMemo<Partial<TableFeatures>>(
+      () => ({ selection: { enabled: true, mode: 'single' as const }, dataEditable: false }),
+      [],
+    );
+
+    return <DynamicTable properties={properties} rows={rows} features={features} />;
+  },
+};
+
+export const WithJsonSchema: StoryObj = {
+  render: () => {
+    const schema = useMemo<JsonSchemaType>(
+      () => ({
+        type: 'object',
+        properties: {
+          name: { type: 'string', title: 'Full Name' },
+          age: { type: 'number', title: 'Age (Years)' },
+          email: { type: 'string', format: 'email', title: 'Email Address' },
+          active: { type: 'boolean', title: 'Active Status' },
+        },
+        required: ['name', 'email'],
+      }),
+      [],
+    );
+
+    const [rows] = useState<any[]>(
+      Array.from({ length: 15 }, () => ({
+        name: faker.person.fullName(),
+        age: faker.number.int({ min: 18, max: 80 }),
+        email: faker.internet.email(),
+        active: faker.datatype.boolean(),
+      })),
+    );
+
+    return <DynamicTable jsonSchema={schema} rows={rows} />;
+  },
+};
+
+export const WithEchoSchema: StoryObj = {
+  render: () => {
+    const client = useClient();
+    const { space } = useClientProvider();
+    const schema = useSchema(client, space, Testing.Contact.typename);
+    const objects = useQuery(space, schema ? Filter.schema(schema) : Filter.nothing());
+    if (!schema) {
+      return <div>Loading schema...</div>;
+    }
+
+    return <DynamicTable schema={schema} rows={objects} />;
+  },
+  decorators: [
+    withClientProvider({
+      types: [Testing.Contact],
+      createIdentity: true,
+      createSpace: true,
+      onSpaceCreated: async ({ space }) => {
+        Array.from({ length: 10 }).forEach(() => {
+          space.db.add(
+            create(Testing.Contact, {
+              name: faker.person.fullName(),
+              email: faker.internet.email(),
+            }),
+          );
+        });
+      },
+    }),
+  ],
+};

package/src/components/Table/DynamicTable.tsx

@@ -0,0 +1,104 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useRef, useMemo, useCallback } from 'react';
+
+import { type BaseSchema, 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 { getBaseSchems as getBaseSchema, makeDynamicTable, type TablePropertyDefinition } from '../../util';
+
+type DynamicTableProps = ThemedClassName<{
+  name?: string; // TODO(burdon): Remove?
+  rows: any[];
+  properties?: TablePropertyDefinition[];
+  jsonSchema?: JsonSchemaType;
+  schema?: BaseSchema;
+  features?: Partial<TableFeatures>;
+  rowActions?: TableRowAction[];
+  onRowClick?: (row: any) => void;
+  onRowAction?: (actionId: string, datum: any) => void;
+}>;
+
+/**
+ * Properties define both the schema and display characteristics of the table columns.
+ *
+ * @deprecated Use Table.
+ */
+// TODO(burdon): Instead of creating component variants, create helpers/hooks that normalize the props.
+// TODO(burdon): Warning: Cannot update a component (`DynamicTable`) while rendering a different component (`DynamicTable`).
+export const DynamicTable = ({
+  classNames,
+  name = 'example.com/dynamic-table', // Rmove default or make random; this will lead to type collisions.
+  rows,
+  properties,
+  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]);
+
+  const tableRef = useRef<TableController>(null);
+  const handleCellUpdate = useCallback((cell: any) => {
+    tableRef.current?.update?.(cell);
+  }, []);
+
+  const handleRowOrderChange = useCallback(() => {
+    tableRef.current?.update?.();
+  }, []);
+
+  const features = useDefaultValue(
+    props.features,
+    () =>
+      ({
+        selection: { enabled: false },
+        dataEditable: false,
+      }) as const,
+  );
+
+  const model = useTableModel({
+    table,
+    rows,
+    projection,
+    features,
+    rowActions,
+    onCellUpdate: handleCellUpdate,
+    onRowOrderChange: handleRowOrderChange,
+    onRowAction,
+  });
+
+  const presentation = useMemo(() => {
+    if (model) {
+      return new TablePresentation(model);
+    }
+  }, [model]);
+
+  // TODO(burdon): Do we need the outer divs?
+  return (
+    <div role='none' className={mx('is-full bs-full grow grid', classNames)}>
+      <div role='none' className='grid min-bs-0 overflow-hidden'>
+        <Table.Root>
+          <Table.Main
+            ref={tableRef}
+            model={model}
+            presentation={presentation}
+            ignoreAttention
+            onRowClick={onRowClick}
+          />
+        </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>