@dxos/react-ui-table 0.8.1-main.ae460ac → 0.8.1-staging.31c3ee1

package/src/util/dynamic-table.ts

@@ -0,0 +1,103 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import type { BaseSchema, JsonSchemaType, SortDirectionType } from '@dxos/echo-schema';
+import { create, makeRef } from '@dxos/live-object';
+import {
+  createView,
+  getSchemaFromPropertyDefinitions,
+  ViewProjection,
+  type ViewType,
+  type SchemaPropertyDefinition,
+} from '@dxos/schema';
+
+import { TableType } from '../types';
+
+// TODO(ZaymonFC): Upstream these extra fields to SchemaPropertyDefinition to enhance schema-tools schema creation.
+type PropertyDisplayProps = {
+  size: number;
+  title: string;
+  sort: SortDirectionType;
+};
+
+export type TablePropertyDefinition = SchemaPropertyDefinition & Partial<PropertyDisplayProps>;
+
+/**
+ * @deprecated
+ */
+// TODO(burdon): Remove variance.
+export const getBaseSchems = ({
+  typename,
+  properties,
+  jsonSchema,
+  schema,
+}: {
+  typename?: string;
+  properties?: TablePropertyDefinition[];
+  jsonSchema?: JsonSchemaType;
+  schema?: BaseSchema;
+}): { typename: string; jsonSchema: JsonSchemaType } => {
+  if (typename && properties) {
+    const schema = getSchemaFromPropertyDefinitions(typename, properties);
+    return { typename: schema.typename, jsonSchema: schema.jsonSchema };
+  } else if (schema) {
+    return { typename: schema.typename, jsonSchema: schema.jsonSchema };
+  } else if (typename && jsonSchema) {
+    return { typename, jsonSchema };
+  } else {
+    throw new Error('invalid properties');
+  }
+};
+
+export const makeDynamicTable = ({
+  typename,
+  jsonSchema,
+  properties,
+}: {
+  typename: string;
+  jsonSchema: JsonSchemaType;
+  properties?: TablePropertyDefinition[];
+}): { table: TableType; projection: ViewProjection } => {
+  const view = createView({
+    name: 'dynamic-table',
+    typename,
+    jsonSchema,
+    ...(properties && { fields: properties.map((property) => property.name) }),
+  });
+
+  const table = create(TableType, { name: 'dynamic-table', view: makeRef(view) });
+  const projection = new ViewProjection(jsonSchema, view);
+  if (properties && view.fields) {
+    setProperties(view, projection, properties);
+  }
+
+  return {
+    table,
+    projection,
+  };
+};
+
+const setProperties = (view: ViewType, projection: ViewProjection, properties: TablePropertyDefinition[]) => {
+  for (const property of properties) {
+    const field = view.fields.find((field) => field.path === property.name);
+    if (field) {
+      if (property.size !== undefined) {
+        field.size = property.size;
+      }
+
+      if (property.title !== undefined) {
+        const fieldProjection = projection.getFieldProjection(field.id);
+        projection.setFieldProjection({
+          ...fieldProjection,
+          props: { ...fieldProjection.props, title: property.title },
+        });
+      }
+
+      if (property.sort) {
+        const fieldId = field.id;
+        view.query.sort = [{ fieldId, direction: property.sort }];
+      }
+    }
+  }
+};

package/src/util/index.ts

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './dynamic-table';
 export * from './signals';
 export * from './table';
 export * from './table-buttons';

package/src/util/table-controls.ts

@@ -44,7 +44,7 @@ const renderInput = (
   return `<input type="checkbox" class="${baseClass}" ${renderAttributes(attrs)} ${checked ? 'checked' : ''} ${preventToggle ? 'onclick="return false"' : ''} ${disabled ? 'disabled' : ''} data-testid="${testId}"/>`;
 };
 
-export const renderCheckbox = ({
+export const CheckboxStory = ({
   rowIndex,
   header = false,
   checked = false,
@@ -59,7 +59,7 @@ export const renderCheckbox = ({
   return renderInput(BASE_CLASSES.checkbox, attrs, checked, disabled, true, 'table-selection');
 };
 
-export const renderSwitch = ({ colIndex, rowIndex, checked = false, disabled = false }: RenderSwitchProps): string => {
+export const SwitchStory = ({ colIndex, rowIndex, checked = false, disabled = false }: RenderSwitchProps): string => {
   const attrs = {
     [CONTROL_IDENTIFIERS.switch]: '',
     'data-row-index': rowIndex.toString(),
@@ -72,7 +72,7 @@ export const renderSwitch = ({ colIndex, rowIndex, checked = false, disabled = f
 export const tableControls = {
   checkbox: {
     attr: CONTROL_IDENTIFIERS.checkbox,
-    render: renderCheckbox,
+    render: CheckboxStory,
     getData: (el: HTMLElement): Extract<ControlData, { type: 'checkbox' }> => ({
       type: 'checkbox',
       rowIndex: Number(el.getAttribute('data-row-index')),
@@ -81,7 +81,7 @@ export const tableControls = {
   },
   switch: {
     attr: CONTROL_IDENTIFIERS.switch,
-    render: renderSwitch,
+    render: SwitchStory,
     getData: (el: HTMLElement): Extract<ControlData, { type: 'switch' }> => ({
       type: 'switch',
       rowIndex: Number(el.getAttribute('data-row-index')),

package/src/util/table.ts

@@ -4,47 +4,45 @@
 
 import {
   AST,
+  type EchoSchema,
   Format,
   FormatEnum,
   type JsonPath,
   type JsonProp,
-  type EchoSchema,
   S,
   TypedObject,
   TypeEnum,
 } from '@dxos/echo-schema';
-import { PublicKey } from '@dxos/react-client';
+import { type Client, PublicKey } from '@dxos/react-client';
 import { create, makeRef, type Space } from '@dxos/react-client/echo';
-import { createFieldId, createView, getSchemaProperties, ViewProjection } from '@dxos/schema';
+import { createFieldId, createView, getSchemaProperties, ViewProjection, type ViewType } from '@dxos/schema';
 
 import { type TableType } from '../types';
 
+// TODO(ZaymonFC): We don't need the client anymore.
 type InitialiseTableProps = {
+  client: Client;
   space: Space;
   table: TableType;
+  typename?: string;
   initialRow?: boolean;
-  initialSchema?: string;
 };
 
-// TODO(ZaymonFC): Clean up the branching in this file.
-
-// TODO(burdon): Pass in type.
-// TODO(burdon): User should determine typename.
 export const initializeTable = async ({
+  client,
   space,
   table,
+  typename,
   initialRow = true,
-  initialSchema,
-}: InitialiseTableProps): Promise<EchoSchema> => {
-  if (initialSchema) {
-    const schema = await space.db.schemaRegistry.query({ typename: initialSchema }).firstOrUndefined();
-
+}: InitialiseTableProps): Promise<S.Schema.AnyNoContext> => {
+  if (typename) {
+    const schema = await space.db.graph.getSchemaByTypename(typename, space.db);
     if (!schema) {
-      throw new Error(`Schema not found: ${initialSchema}`);
+      throw new Error(`Schema not found: ${typename}`);
     }
 
-    // We need to get the schema properties here. For now, only simple types and refs, not compound types
-    // are going to be supported.
+    // 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);
@@ -61,66 +59,71 @@ export const initializeTable = async ({
 
     return schema;
   } else {
-    const ContactSchema = TypedObject({
-      typename: `example.com/type/${PublicKey.random().truncate()}`,
-      version: '0.1.0',
-    })({
-      name: S.optional(S.String).annotations({
-        [AST.TitleAnnotationId]: 'Name',
-      }),
-      active: S.optional(S.Boolean),
-      email: S.optional(Format.Email),
-      salary: S.optional(Format.Currency()).annotations({
-        [AST.TitleAnnotationId]: 'Salary',
-      }), // TODO(burdon): Should default to prop name?
-    });
-
-    const [contactSchema] = await space.db.schemaRegistry.register([ContactSchema]);
+    const [schema] = await space.db.schemaRegistry.register([ContactSchema]);
+    const fields = ContactFields;
 
     table.view = makeRef(
       createView({
         name: 'View',
-        typename: contactSchema.typename,
-        jsonSchema: contactSchema.jsonSchema,
-        fields: ['name', 'email', 'salary', 'active'],
+        typename: schema.typename,
+        jsonSchema: schema.jsonSchema,
+        fields,
       }),
     );
 
-    const projection = new ViewProjection(contactSchema, table.view.target!);
-    projection.setFieldProjection({
-      field: {
-        id: table.view.target!.fields.find((f) => f.path === 'salary')!.id,
-        path: 'salary' as JsonPath,
-        size: 150,
-      },
-    });
-    projection.setFieldProjection({
-      field: {
-        id: table.view.target!.fields.find((f) => f.path === 'active')!.id,
-        path: 'active' as JsonPath,
-        size: 100,
-      },
-    });
+    createProjection(schema, table.view.target!);
 
-    projection.setFieldProjection({
-      field: {
-        id: createFieldId(),
-        path: 'manager' as JsonPath,
-        referencePath: 'name' as JsonPath,
-      },
-      props: {
-        property: 'manager' as JsonProp,
-        type: TypeEnum.Ref,
-        format: FormatEnum.Ref,
-        referenceSchema: contactSchema.typename,
-        title: 'Manager',
-      },
-    });
     if (initialRow) {
       // TODO(burdon): Last (first) row should not be in db and should be managed by the model.
-      space.db.add(create(contactSchema, {}));
+      space.db.add(create(schema, {}));
     }
 
-    return contactSchema;
+    return schema;
   }
 };
+
+const ContactSchema = TypedObject({
+  typename: `example.com/type/${PublicKey.random().truncate()}`,
+  version: '0.1.0',
+})({
+  name: S.optional(S.String).annotations({ [AST.TitleAnnotationId]: 'Name' }),
+  active: S.optional(S.Boolean),
+  email: S.optional(Format.Email),
+  salary: S.optional(Format.Currency()).annotations({ [AST.TitleAnnotationId]: 'Salary' }),
+});
+
+const ContactFields = ['name', 'email', 'salary', 'active'];
+
+const createProjection = (schema: EchoSchema, view: ViewType): ViewProjection => {
+  const projection = new ViewProjection(schema.jsonSchema, view);
+  projection.setFieldProjection({
+    field: {
+      id: view.fields.find((f) => f.path === 'salary')!.id,
+      path: 'salary' as JsonPath,
+      size: 150,
+    },
+  });
+  projection.setFieldProjection({
+    field: {
+      id: view.fields.find((f) => f.path === 'active')!.id,
+      path: 'active' as JsonPath,
+      size: 100,
+    },
+  });
+  projection.setFieldProjection({
+    field: {
+      id: createFieldId(),
+      path: 'manager' as JsonPath,
+      referencePath: 'name' as JsonPath,
+    },
+    props: {
+      property: 'manager' as JsonProp,
+      type: TypeEnum.Ref,
+      format: FormatEnum.Ref,
+      referenceSchema: schema.typename,
+      title: 'Manager',
+    },
+  });
+
+  return projection;
+};