@journeyapps-labs/reactor-mod-data-browser 3.3.0 → 3.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@journeyapps-labs/reactor-mod-data-browser",
-  "version": "3.3.0",
+  "version": "3.5.0",
   "main": "./dist/index.js",
   "typings": "./dist/@types/index",
   "publishConfig": {
@@ -15,14 +15,14 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@emotion/styled": "^11.14.1",
-    "@fortawesome/react-fontawesome": "^3.2.0",
+    "@fortawesome/react-fontawesome": "^3.3.0",
     "@journeyapps-labs/client-backend-v4": "1.0.0",
     "@journeyapps-labs/common-ioc": "^1.0.1",
     "@journeyapps-labs/common-sdk": "^1.0.3",
     "@journeyapps-labs/common-utils": "^1.0.1",
-    "@journeyapps-labs/lib-reactor-data-layer": "1.0.10",
-    "@journeyapps-labs/reactor-mod": "5.3.1",
-    "@journeyapps-labs/reactor-mod-editor": "2.2.1",
+    "@journeyapps-labs/lib-reactor-data-layer": "1.0.11",
+    "@journeyapps-labs/reactor-mod": "5.4.0",
+    "@journeyapps-labs/reactor-mod-editor": "2.2.2",
     "@journeyapps/db": "^8.1.1",
     "@journeyapps/parser-schema": "^8.2.5",
     "@projectstorm/react-workspaces-core": "4.2.3",
@@ -34,7 +34,7 @@
     "uuid": "^13.0.0"
   },
   "devDependencies": {
-    "@journeyapps-labs/lib-reactor-builder": "3.0.1",
+    "@journeyapps-labs/lib-reactor-builder": "3.0.2",
     "@types/async": "^3.2.25",
     "@types/lodash": "^4.17.24",
     "@types/react": "^19.2.14",
@@ -42,6 +42,7 @@
   },
   "scripts": {
     "build:module": "reactor build .",
+    "clean": "rm -rf dist-module",
     "watch:module": "pnpm build:module --watch"
   }
 }

package/src/DataBrowserModule.ts

@@ -17,6 +17,7 @@ import { SchemaModelObjectEntityDefinition } from './entities/SchemaModelObjectE
 import { EditSchemaModelAction } from './actions/schema-model/EditSchemaModelAction';
 import { TypeEngine } from './forms/TypeEngine';
 import { ViewSchemaModelAsJsonAction } from './actions/schema-model/ViewSchemaModelAsJsonAction';
+import { ViewHasManyAction } from './actions/schema-model/ViewHasManyAction';
 import { ModelJsonPanelFactory } from './panels/model-json/ModelJsonPanelFactory';
 import { SchemaModelIndexDefinition } from './entities/SchemaModelIndexDefinition';
 import { SavedQueryStore } from './stores/SavedQueryStore';
@@ -24,6 +25,7 @@ import { SavedQueryEntityDefinition } from './entities/SavedQueryEntityDefinitio
 import { OpenSavedQueryAction } from './actions/saved-queries/OpenSavedQueryAction';
 import { RemoveSavedQueryAction } from './actions/saved-queries/RemoveSavedQueryAction';
 import { registerQueryControlPreferences } from './preferences/QueryControlPreferences';
+import { registerSchemaOrderingPreferences } from './preferences/SchemaOrderingPreferences';
 
 export class DataBrowserModule extends AbstractReactorModule {
   constructor() {
@@ -49,12 +51,14 @@ export class DataBrowserModule extends AbstractReactorModule {
     actionStore.registerAction(new CreateModelAction());
     actionStore.registerAction(new EditSchemaModelAction());
     actionStore.registerAction(new ViewSchemaModelAsJsonAction());
+    actionStore.registerAction(new ViewHasManyAction());
     actionStore.registerAction(new OpenSavedQueryAction());
     actionStore.registerAction(new RemoveSavedQueryAction());
 
     system.addStore(ConnectionStore, connectionStore);
     system.addStore(SavedQueryStore, new SavedQueryStore());
     registerQueryControlPreferences(ioc.get(PrefsStore));
+    registerSchemaOrderingPreferences(ioc.get(PrefsStore));
 
     system.registerDefinition(new ConnectionEntityDefinition());
     system.registerDefinition(new ConnectionFactoryEntityDefinition());

package/src/actions/schema-model/ViewHasManyAction.ts

@@ -0,0 +1,114 @@
+import {
+  ActionStore,
+  ComboBoxItem,
+  ComboBoxStore2,
+  EntityAction,
+  EntityActionEvent,
+  NotificationStore,
+  NotificationType,
+  SimpleComboBoxDirective,
+  WorkspaceStore,
+  inject,
+  ioc
+} from '@journeyapps-labs/reactor-mod';
+import { Relationship } from '@journeyapps/parser-schema';
+import { DataBrowserEntities } from '../../entities';
+import { SchemaModelObject } from '../../core/SchemaModelObject';
+import { QueryPanelModel } from '../../panels/query/QueryPanelFactory';
+import { SimpleQuery } from '../../core/query/query-simple/SimpleQuery';
+import { Condition, SimpleFilter, Statement } from '../../core/query/filters';
+
+export class ViewHasManyAction extends EntityAction<SchemaModelObject> {
+  static ID = 'VIEW_HAS_MANY';
+
+  @inject(ComboBoxStore2)
+  accessor comboStore: ComboBoxStore2;
+
+  @inject(WorkspaceStore)
+  accessor workspaceStore: WorkspaceStore;
+
+  @inject(NotificationStore)
+  accessor notifications: NotificationStore;
+
+  constructor() {
+    super({
+      id: ViewHasManyAction.ID,
+      name: 'View has many',
+      icon: 'list',
+      target: DataBrowserEntities.SCHEMA_MODEL_OBJECT
+    });
+  }
+
+  async fireEvent(event: EntityActionEvent<SchemaModelObject>): Promise<any> {
+    const relationships = Object.values(event.targetEntity.definition.definition.hasMany || {});
+    if (relationships.length === 0) {
+      this.notifications.showNotification({
+        title: 'No relationships',
+        description: 'This record has no has-many relationships to view.',
+        type: NotificationType.ERROR
+      });
+      return;
+    }
+
+    const directive = await this.comboStore.show(
+      new SimpleComboBoxDirective({
+        title: 'View has many',
+        subtitle: event.targetEntity.data.display || event.targetEntity.id,
+        event: event.position,
+        items: relationships.map((relationship) => {
+          return {
+            key: relationship.foreignName || relationship.name,
+            title: relationship.foreignName || relationship.name,
+            subtitle: relationship.objectType.label || relationship.objectType.name,
+            action: async () => {}
+          } as ComboBoxItem;
+        })
+      })
+    );
+
+    const selected = directive.getSelectedItem();
+    if (!selected?.key) {
+      return;
+    }
+
+    const relationship = relationships.find((entry) => (entry.foreignName || entry.name) === selected.key);
+    if (!relationship) {
+      return;
+    }
+
+    await this.openRelationshipQuery(event.targetEntity, relationship);
+  }
+
+  private async openRelationshipQuery(parent: SchemaModelObject, relationship: Relationship) {
+    const definition = await parent.definition.connection.waitForSchemaModelDefinitionByName(
+      relationship.objectType.name
+    );
+    const variable = definition.getBelongsToIdVariableForRelationship(relationship.name);
+    if (!variable) {
+      this.notifications.showNotification({
+        title: 'Cannot open relationship',
+        description: `No belongs-to field found for ${relationship.name}.`,
+        type: NotificationType.ERROR
+      });
+      return;
+    }
+
+    variable.label = relationship.name;
+
+    const query = new SimpleQuery({
+      definition,
+      limit: 30
+    });
+
+    query.filterState.setFilter(
+      variable.name,
+      new SimpleFilter(variable, [new Statement(Condition.EQUALS, parent.id)])
+    );
+
+    this.workspaceStore.addModel(new QueryPanelModel(query));
+  }
+
+  static get() {
+    return ioc.get(ActionStore).getActionByID<ViewHasManyAction>(ViewHasManyAction.ID);
+  }
+}

package/src/core/AbstractConnection.ts

@@ -1,7 +1,6 @@
 import { Database, ObjectType } from '@journeyapps/db';
 import { Schema } from '@journeyapps/parser-schema';
 import { AbstractConnectionFactory } from './AbstractConnectionFactory';
-import * as _ from 'lodash';
 import { SchemaModelDefinition } from './SchemaModelDefinition';
 import { v4 } from 'uuid';
 import { BaseObserver } from '@journeyapps-labs/common-utils';
@@ -12,6 +11,8 @@ import { EntityDescription } from '@journeyapps-labs/reactor-mod';
 import { V4BackendClient, V4Index, V4Indexes } from '@journeyapps-labs/client-backend-v4';
 import { SchemaModelObject } from './SchemaModelObject';
 import { getDefaultConnectionColor } from './connection-colors';
+import { SchemaModelOrderValue, SchemaModelOrderingPreference } from '../preferences/SchemaOrderingPreferences';
+import * as _ from 'lodash';
 
 export interface AbstractConnectionSerialized {
   factory: string;
@@ -118,10 +119,18 @@ export abstract class AbstractConnection extends BaseObserver<AbstractConnection
     return connection.schema;
   }
 
+  protected getOrderedSchemaObjects(schema: Schema): ObjectType[] {
+    const objects = Object.keys(schema.objects).map((key) => schema.objects[key]);
+    if (SchemaModelOrderingPreference.getValue() === SchemaModelOrderValue.ALPHABETICAL) {
+      return _.sortBy(objects, (object) => (object.label || object.name || '').toLowerCase());
+    }
+    return objects;
+  }
+
   async reload() {
     await this.schema_models_collection.load(async () => {
       const schema = await this.getSchema();
-      return _.values(schema.objects);
+      return this.getOrderedSchemaObjects(schema);
     });
   }
 
@@ -156,7 +165,7 @@ export abstract class AbstractConnection extends BaseObserver<AbstractConnection
 
   protected async getSchemaModelDefinitions() {
     const schema = await this.getSchema();
-    return _.map(schema.objects, (o) => {
+    return this.getOrderedSchemaObjects(schema).map((o) => {
       return new SchemaModelDefinition({
         definition: o,
         connection: this

package/src/core/SchemaModelDefinition.ts

@@ -1,6 +1,7 @@
 import { AbstractConnection } from './AbstractConnection';
 import { ObjectType } from '@journeyapps/parser-schema';
-import { Collection, JourneyAPIAdapter, Query } from '@journeyapps/db';
+import { Collection, JourneyAPIAdapter, Query, Variable } from '@journeyapps/db';
+import * as _ from 'lodash';
 import { SchemaModelObject } from './SchemaModelObject';
 import { LifecycleModel } from '@journeyapps-labs/lib-reactor-data-layer';
 import { BaseObserver } from '@journeyapps-labs/common-utils';
@@ -10,6 +11,8 @@ import { V4Index } from '@journeyapps-labs/client-backend-v4';
 import { action, observable } from 'mobx';
 import { IndexModel } from './IndexModel';
 import { TypeEngine } from '../forms/TypeEngine';
+import { STANDARD_MODEL_FIELD_LABELS, StandardModelFields, idVariable } from './query/StandardModelFields';
+import { SchemaFieldOrderValue, SchemaFieldOrderingPreference } from '../preferences/SchemaOrderingPreferences';
 
 export interface SchemaModelDefinitionListener {
   resolved: (event: { object: SchemaModelObject }) => any;
@@ -20,6 +23,33 @@ export interface SchemaModelDefinitionOptions {
   connection: AbstractConnection;
   definition: ObjectType;
 }
+
+export interface FilterableField {
+  key: string;
+  label: string;
+  group: 'Fields' | 'Belongs to';
+}
+
+export enum OrderedSchemaFieldType {
+  FIELD = 'FIELD',
+  BELONGS_TO = 'BELONGS_TO'
+}
+
+export type OrderedSchemaFieldOrRelationship =
+  | {
+      type: OrderedSchemaFieldType.FIELD;
+      object: Variable;
+      key: string;
+      label: string;
+    }
+  | {
+      type: OrderedSchemaFieldType.BELONGS_TO;
+      object: ObjectType['belongsTo'][string];
+      key: string;
+      label: string;
+      variable: Variable;
+    };
+
 export class SchemaModelDefinition
   extends BaseObserver<SchemaModelDefinitionListener>
   implements LifecycleModel<ObjectType>
@@ -171,18 +201,144 @@ export class SchemaModelDefinition
     });
   }
 
-  getFilterableFields(typeEngine: TypeEngine): { key: string; label: string }[] {
-    return Object.values(this.definition.attributes)
-      .map((attribute) => {
-        const handler = typeEngine.getHandler(attribute.type);
-        if (!handler?.setupFilter) {
+  getBelongsToIdVariableForRelationship(relationshipName: string): Variable | undefined {
+    const variable = _.find(_.values(this.definition.belongsToIdVars), (entry) => {
+      return entry.relationship === relationshipName;
+    });
+
+    if (!variable) {
+      return undefined;
+    }
+
+    const relationship = this.definition.belongsTo[relationshipName];
+    if (relationship) {
+      variable.label = relationship.name;
+    }
+
+    return variable;
+  }
+
+  getBelongsToRelationshipForField(field: string):
+    | {
+        variable: Variable;
+        relationship: ObjectType['belongsTo'][string];
+      }
+    | undefined {
+    const variable = _.find(_.values(this.definition.belongsToIdVars), (entry) => {
+      return entry.name === field;
+    });
+    if (!variable?.relationship) {
+      return undefined;
+    }
+
+    const relationship = this.definition.belongsTo[variable.relationship];
+    if (!relationship) {
+      return undefined;
+    }
+
+    variable.label = relationship.name;
+    return {
+      variable,
+      relationship
+    };
+  }
+
+  private getSchemaOrderedFields(): Variable[] {
+    return Object.keys(this.definition.attributes).map((key) => this.definition.attributes[key]);
+  }
+
+  private getSchemaOrderedBelongsToFields(): OrderedSchemaFieldOrRelationship[] {
+    return Object.keys(this.definition.belongsTo)
+      .map((relationshipName) => {
+        const relationship = this.definition.belongsTo[relationshipName];
+        const variable = this.getBelongsToIdVariableForRelationship(relationshipName);
+        if (!relationship || !variable) {
           return null;
         }
         return {
+          type: OrderedSchemaFieldType.BELONGS_TO,
+          object: relationship,
+          key: variable.name,
+          label: relationship.name || variable.label || variable.name,
+          variable
+        } as OrderedSchemaFieldOrRelationship;
+      })
+      .filter((value): value is OrderedSchemaFieldOrRelationship => !!value);
+  }
+
+  private getAlphabeticalOrderedFields(): OrderedSchemaFieldOrRelationship[] {
+    return _.sortBy(
+      this.getSchemaOrderedFields().map((attribute) => {
+        return {
+          type: OrderedSchemaFieldType.FIELD,
+          object: attribute,
           key: attribute.name,
           label: attribute.label || attribute.name
-        };
-      })
-      .filter((value) => !!value);
+        } as OrderedSchemaFieldOrRelationship;
+      }),
+      (item) => item.label.toLowerCase()
+    );
+  }
+
+  getOrderedFieldsAndRelationships(): OrderedSchemaFieldOrRelationship[] {
+    const orderedFields = this.getAlphabeticalOrderedFields();
+    const orderedBelongsTo = _.sortBy(this.getSchemaOrderedBelongsToFields(), (item) => item.label.toLowerCase());
+
+    switch (SchemaFieldOrderingPreference.getValue()) {
+      case SchemaFieldOrderValue.ALPHABETICAL:
+        return _.sortBy([...orderedFields, ...orderedBelongsTo], (item) => item.label.toLowerCase());
+      case SchemaFieldOrderValue.BELONGS_TO_FIRST:
+        return [...orderedBelongsTo, ...orderedFields];
+      case SchemaFieldOrderValue.BELONGS_TO_LAST:
+        return [...orderedFields, ...orderedBelongsTo];
+      case SchemaFieldOrderValue.AS_DEFINED_IN_SCHEMA:
+      default:
+        return [
+          ...this.getSchemaOrderedFields().map((attribute) => {
+            return {
+              type: OrderedSchemaFieldType.FIELD,
+              object: attribute,
+              key: attribute.name,
+              label: attribute.label || attribute.name
+            } as OrderedSchemaFieldOrRelationship;
+          }),
+          ...this.getSchemaOrderedBelongsToFields()
+        ];
+    }
+  }
+
+  getFilterableFields(typeEngine: TypeEngine): FilterableField[] {
+    return [
+      ...(typeEngine.getHandler(idVariable.type)?.setupFilter
+        ? [
+            {
+              key: StandardModelFields.ID,
+              label: STANDARD_MODEL_FIELD_LABELS[StandardModelFields.ID],
+              group: 'Fields' as const
+            }
+          ]
+        : []),
+      ...this.getOrderedFieldsAndRelationships()
+        .map((entry) => {
+          if (entry.type === OrderedSchemaFieldType.BELONGS_TO) {
+            return {
+              key: entry.key,
+              label: entry.label,
+              group: 'Belongs to' as const
+            };
+          }
+
+          const handler = typeEngine.getHandler(entry.object.type);
+          if (!handler?.setupFilter) {
+            return null;
+          }
+          return {
+            key: entry.key,
+            label: entry.label,
+            group: 'Fields' as const
+          };
+        })
+        .filter((value) => !!value)
+    ];
   }
 }

package/src/core/query/StandardModelFields.ts

@@ -1,3 +1,5 @@
+import { TextType, Variable } from '@journeyapps/db';
+
 export enum StandardModelFields {
   ID = 'id',
   UPDATED_AT = 'updated_at'
@@ -7,3 +9,9 @@ export const STANDARD_MODEL_FIELD_LABELS: Record<StandardModelFields, string> =
   [StandardModelFields.ID]: 'ID',
   [StandardModelFields.UPDATED_AT]: 'Updated at'
 };
+
+export const idVariable = new Variable(StandardModelFields.ID, new TextType()) as Variable & {
+  label?: string;
+};
+
+idVariable.label = STANDARD_MODEL_FIELD_LABELS[StandardModelFields.ID];

package/src/core/query/query-simple/SimpleQueryColumns.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TableColumn } from '@journeyapps-labs/reactor-mod';
+import { ioc, TableColumn } from '@journeyapps-labs/reactor-mod';
 import * as _ from 'lodash';
 import { PageRow } from '../Page';
 import { CellDisplayWidget } from '../widgets/CellDisplayWidget';
@@ -7,12 +7,17 @@ import { SmartColumnWidget } from '../widgets/SmartColumnWidget';
 import { SmartCellDisplayWidget } from '../widgets/SmartCellDisplayWidget';
 import { SmartBelongsToDisplayWidget } from '../widgets/SmartBelongsToDisplayWidget';
 import { ColumnDisplayWidget } from '../widgets/ColumnDisplayWidget';
+import { IDCellDisplayWidget } from '../widgets/IDCellDisplayWidget';
 import { SchemaModelDefinition } from '../../SchemaModelDefinition';
 import { AbstractConnection } from '../../AbstractConnection';
 import { SimpleQuerySort, SortDirection } from './SimpleQueryTypes';
 import { SimpleQuerySortState } from './SimpleQuerySortState';
 import { SimpleQueryFilterState } from './SimpleQueryFilterState';
-import { STANDARD_MODEL_FIELD_LABELS, StandardModelFields } from '../StandardModelFields';
+import { STANDARD_MODEL_FIELD_LABELS, StandardModelFields, idVariable } from '../StandardModelFields';
+import { TypeEngine } from '../../../forms/TypeEngine';
+import { setupBelongsToFilter } from '../../../forms/types/belongs-to-filter';
+import { Condition, SimpleFilter, Statement } from '../filters';
+import { OrderedSchemaFieldType } from '../../SchemaModelDefinition';
 
 export interface BuildSimpleQueryColumnsOptions {
   definition: SchemaModelDefinition;
@@ -34,20 +39,24 @@ export const buildSimpleQueryColumns = (options: BuildSimpleQueryColumnsOptions)
     {
       key: StandardModelFields.ID,
       display: (
-        <ColumnDisplayWidget
-          label={getSortLabel(StandardModelFields.ID, STANDARD_MODEL_FIELD_LABELS[StandardModelFields.ID])}
-          onClick={async () => {
-            const sort = options.sortState.getSort(StandardModelFields.ID);
-            if (!sort) {
-              options.sortState.addSort(SimpleQuerySort.create(StandardModelFields.ID));
+        <SmartColumnWidget
+          variable={idVariable}
+          typeLabel={ioc.get(TypeEngine).getHandler(idVariable.type)?.getTypeLabel?.(idVariable.type)}
+          filter={options.filterState.getFilter(StandardModelFields.ID)}
+          filterChanged={async (filter) => {
+            if (!filter) {
+              options.filterState.getFilter(StandardModelFields.ID)?.delete();
               return;
             }
-            sort.toggle();
+            options.filterState.setFilter(StandardModelFields.ID, filter);
           }}
         />
       ),
       noWrap: true,
-      shrink: true
+      shrink: true,
+      accessor: (cell, row: PageRow) => {
+        return <IDCellDisplayWidget id={row.model.id} />;
+      }
     },
     {
       key: StandardModelFields.UPDATED_AT,
@@ -73,54 +82,90 @@ export const buildSimpleQueryColumns = (options: BuildSimpleQueryColumnsOptions)
         return <CellDisplayWidget name={StandardModelFields.UPDATED_AT} cell={row.model.updated_at} row={row} />;
       }
     },
-    ..._.map(options.definition.definition.belongsToIdVars, (a) => {
-      return {
-        key: a.name,
-        display: (
-          <SmartColumnWidget
-            variable={options.definition.definition.belongsToVars[a.relationship]}
-            type={options.definition.definition.belongsTo[a.relationship].foreignType}
-            filterChanged={(filter) => {}}
-          />
-        ),
-        noWrap: true,
-        shrink: true,
-        accessor: (cell, row: PageRow) => {
-          return <SmartBelongsToDisplayWidget variable_id={a} row={row} connection={options.connection} />;
-        }
-      } as TableColumn;
-    }),
-    ..._.map(options.definition.definition.attributes, (a) => {
-      return {
-        key: a.name,
-        display: (
-          <SmartColumnWidget
-            variable={a}
-            filter={options.filterState.getFilter(a.name)}
-            sortDirection={options.sortState.getSort(a.name)?.direction}
-            onToggleSort={async () => {
-              const sort = options.sortState.getSort(a.name);
-              if (!sort) {
-                options.sortState.addSort(SimpleQuerySort.create(a.name));
-                return;
-              }
-              sort.toggle();
-            }}
-            filterChanged={async (filter) => {
-              if (!filter) {
-                options.filterState.getFilter(a.name)?.delete();
-                return;
-              }
-              options.filterState.setFilter(a.name, filter);
-            }}
-          />
-        ),
-        noWrap: true,
-        shrink: true,
-        accessor: (cell, row: PageRow) => {
-          return <SmartCellDisplayWidget name={a.name} row={row} />;
-        }
-      } as TableColumn;
+    ...options.definition.getOrderedFieldsAndRelationships().flatMap((entry) => {
+      if (entry.type === OrderedSchemaFieldType.BELONGS_TO) {
+        const variable = entry.variable;
+        const relationship = entry.object;
+        return [
+          {
+            key: variable.name,
+            display: (
+              <SmartColumnWidget
+                variable={options.definition.definition.belongsToVars[variable.relationship]}
+                typeLabel={`Belongs To: ${relationship.foreignType.label}`}
+                filter={options.filterState.getFilter(variable.name)}
+                setupFilter={async ({ filter }) => {
+                  return await setupBelongsToFilter({
+                    definition: options.definition,
+                    relationship,
+                    variable,
+                    filter
+                  });
+                }}
+                filterChanged={async (filter) => {
+                  if (!filter) {
+                    options.filterState.getFilter(variable.name)?.delete();
+                    return;
+                  }
+                  options.filterState.setFilter(variable.name, filter);
+                }}
+              />
+            ),
+            noWrap: true,
+            shrink: true,
+            accessor: (cell, row: PageRow) => {
+              return (
+                <SmartBelongsToDisplayWidget
+                  variable_id={variable}
+                  row={row}
+                  connection={options.connection}
+                  filterBelongsTo={async (object) => {
+                    options.filterState.setFilter(
+                      variable.name,
+                      new SimpleFilter(variable, [new Statement(Condition.EQUALS, object.id)])
+                    );
+                  }}
+                />
+              );
+            }
+          } as TableColumn
+        ];
+      }
+
+      const attribute = entry.object;
+      return [
+        {
+          key: attribute.name,
+          display: (
+            <SmartColumnWidget
+              variable={attribute}
+              typeLabel={ioc.get(TypeEngine).getHandler(attribute.type)?.getTypeLabel?.(attribute.type)}
+              filter={options.filterState.getFilter(attribute.name)}
+              sortDirection={options.sortState.getSort(attribute.name)?.direction}
+              onToggleSort={async () => {
+                const sort = options.sortState.getSort(attribute.name);
+                if (!sort) {
+                  options.sortState.addSort(SimpleQuerySort.create(attribute.name));
+                  return;
+                }
+                sort.toggle();
+              }}
+              filterChanged={async (filter) => {
+                if (!filter) {
+                  options.filterState.getFilter(attribute.name)?.delete();
+                  return;
+                }
+                options.filterState.setFilter(attribute.name, filter);
+              }}
+            />
+          ),
+          noWrap: true,
+          shrink: true,
+          accessor: (cell, row: PageRow) => {
+            return <SmartCellDisplayWidget name={attribute.name} row={row} />;
+          }
+        } as TableColumn
+      ];
     })
   ];
 };