@dxos/react-ui-table 0.8.1-staging.5be625a → 0.8.1-staging.9eaf14f

package/src/util/dynamic-table.ts

@@ -2,17 +2,19 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type SortDirectionType } from '@dxos/echo-schema';
+import type { BaseSchema, JsonSchemaType, SortDirectionType } from '@dxos/echo-schema';
 import { create, makeRef } from '@dxos/live-object';
 import {
   createView,
-  echoSchemaFromPropertyDefinitions,
+  getSchemaFromPropertyDefinitions,
   ViewProjection,
+  type ViewType,
   type SchemaPropertyDefinition,
 } from '@dxos/schema';
 
-import { TableType } from '..';
+import { TableType } from '../types';
 
+// TODO(ZaymonFC): Upstream these extra fields to SchemaPropertyDefinition to enhance schema-tools schema creation.
 type PropertyDisplayProps = {
   size: number;
   title: string;
@@ -21,26 +23,63 @@ type PropertyDisplayProps = {
 
 export type TablePropertyDefinition = SchemaPropertyDefinition & Partial<PropertyDisplayProps>;
 
-export const makeDynamicTable = (typename: string, properties: TablePropertyDefinition[]) => {
-  const table = create(TableType, { name: 'dynamic-table' });
-  const echoSchema = echoSchemaFromPropertyDefinitions(typename, properties);
-  const propertyNames = properties.map((property) => property.name);
+/**
+ * @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: echoSchema.typename,
-    jsonSchema: echoSchema.jsonSchema,
-    fields: propertyNames,
+    typename,
+    jsonSchema,
+    ...(properties && { fields: properties.map((property) => property.name) }),
   });
 
-  table.view = makeRef(view);
-  const viewProjection = new ViewProjection(echoSchema, 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);
+  }
 
-  for (const property of properties) {
-    if (!view.fields) {
-      continue;
-    }
+  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) {
@@ -48,8 +87,8 @@ export const makeDynamicTable = (typename: string, properties: TablePropertyDefi
       }
 
       if (property.title !== undefined) {
-        const fieldProjection = viewProjection.getFieldProjection(field.id);
-        viewProjection.setFieldProjection({
+        const fieldProjection = projection.getFieldProjection(field.id);
+        projection.setFieldProjection({
           ...fieldProjection,
           props: { ...fieldProjection.props, title: property.title },
         });
@@ -61,11 +100,4 @@ export const makeDynamicTable = (typename: string, properties: TablePropertyDefi
       }
     }
   }
-
-  return {
-    table,
-    schema: echoSchema,
-    view,
-    viewProjection,
-  };
 };

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

@@ -19,6 +19,7 @@ import { createFieldId, createView, getSchemaProperties, ViewProjection, type Vi
 
 import { type TableType } from '../types';
 
+// TODO(ZaymonFC): We don't need the client anymore.
 type InitialiseTableProps = {
   client: Client;
   space: Space;
@@ -94,7 +95,7 @@ const ContactSchema = TypedObject({
 const ContactFields = ['name', 'email', 'salary', 'active'];
 
 const createProjection = (schema: EchoSchema, view: ViewType): ViewProjection => {
-  const projection = new ViewProjection(schema, view);
+  const projection = new ViewProjection(schema.jsonSchema, view);
   projection.setFieldProjection({
     field: {
       id: view.fields.find((f) => f.path === 'salary')!.id,