feat(widgets): init table grid, autosuggest cell editor

Signed-off-by: Pamfilos Fokianos <pamfilosf@gmail.com>

Author: pamfilos

package.json

@@ -44,6 +44,8 @@
     "@rjsf/core": "^5.21.0",
     "@rjsf/utils": "^5.21.0",
     "@rjsf/validator-ajv8": "^5.21.0",
+    "ag-grid-community": "^34.3.1",
+    "ag-grid-react": "^34.3.1",
     "ajv": "^8.17.1",
     "antd": "^5.26.0",
     "axios": "^1.4.0",

src/admin/components/PropertyEditor.jsx

@@ -106,20 +106,20 @@ const PropertyEditor = () => {
             "Root"
           ) : (
             <Space wrap={false}>
-              {screens.xl && fieldSpec.title}
+              {screens.xl && fieldSpec?.title}
               <Tooltip
                 title={
                   <>
                     {!screens.xl && (
                       <div style={{ fontWeight: "bold" }}>
-                        {fieldSpec.title}
+                        {fieldSpec?.title}
                       </div>
                     )}
-                    <div>{fieldSpec.description}</div>
+                    <div>{fieldSpec?.description}</div>
                   </>
                 }
               >
-                {fieldSpec.icon || <QuestionOutlined />}
+                {fieldSpec?.icon || <QuestionOutlined />}
               </Tooltip>
             </Space>
           )

src/admin/components/SchemaTree.jsx

@@ -5,26 +5,70 @@ import FieldTemplate from "../formComponents/FieldTemplate";
 import { _validate } from "../utils";
 import { useSelector } from "react-redux";
 import CustomizationContext from "../../contexts/CustomizationContext";
-import { useContext } from "react";
+import { useContext, useMemo } from "react";
 
 const SchemaTree = () => {
   const schema = useSelector((state) => state.schemaWizard.current.schema);
   const uiSchema = useSelector((state) => state.schemaWizard.current.uiSchema);
 
   const customizationContext = useContext(CustomizationContext);
 
+  // Memoize removeUiWidget function so it's not recreated on every render
+  const removeUiWidget = useMemo(() => {
+    return function removeUiWidgetRecursive(_obj) {
+      // Handle null/undefined
+      if (_obj == null) {
+        return _obj;
+      }
+
+      // Handle arrays - recursively process each element
+      if (Array.isArray(_obj)) {
+        return _obj.map((item) => removeUiWidgetRecursive(item));
+      }
+
+      // Handle objects
+      if (typeof _obj === "object") {
+        const obj = {};
+        for (const key in _obj) {
+          // Skip the ui:widget property if its value is "table"
+          if (key === "ui:widget" && _obj[key] === "table") {
+            continue;
+          }
+          // Recursively process nested objects/arrays
+          obj[key] = removeUiWidgetRecursive(_obj[key]);
+        }
+        return obj;
+      }
+
+      // Return primitive values as-is
+      return _obj;
+    };
+  }, []);
+
+  // Memoize transformed schema - only recompute when schema changes
+  const transformedSchema = useMemo(
+    () => customizationContext.transformSchema(schema),
+    [customizationContext, schema],
+  );
+
+  // Memoize cleaned uiSchema - only recompute when uiSchema changes
+  const cleanedUiSchema = useMemo(
+    () => removeUiWidget(uiSchema),
+    [removeUiWidget, uiSchema],
+  );
+
   return (
     <Form
-      schema={customizationContext.transformSchema(schema)}
-      uiSchema={uiSchema}
+      schema={transformedSchema}
+      uiSchema={cleanedUiSchema}
       formData={{}}
       ObjectFieldTemplate={ObjectFieldTemplate}
       ArrayFieldTemplate={ArrayFieldTemplate}
       FieldTemplate={FieldTemplate}
       onChange={() => {}}
       validate={_validate}
       liveValidate
-      formContext={{ schema: [], uiSchema: [] }}
+      formContext={{ tree: true, schema: [], uiSchema: [] }}
       className="schemaTree"
     />
   );

src/admin/formComponents/SchemaTreeItem.jsx

@@ -75,7 +75,7 @@ const SchemaTreeItem = ({
         <Row gutter={8} onClick={handleClick} align="middle" wrap={false}>
           <Col flex="none">
             {getFieldSpec(schema, uiSchema, customizationContext.allFieldTypes)
-              .icon || <QuestionOutlined />}
+              ?.icon || <QuestionOutlined />}
           </Col>
           <Col flex="auto">
             <Row

src/admin/utils/fieldTypes.jsx

@@ -301,6 +301,92 @@ const collections = {
       uiSchema: {},
     },
   },
+  TableArrayFieldTemplate: {
+    title: "Table",
+    icon: <UnorderedListOutlined />,
+    description: "List of fields supporting addition, deletion and reordering",
+    className: "tour-list-field",
+    child: {},
+    optionsSchema: {
+      type: "object",
+      title: "Array Schema",
+      properties: {
+        ...common.optionsSchema,
+      },
+    },
+    optionsSchemaUiSchema: {
+      ...common.optionsSchemaUiSchema,
+    },
+    optionsUiSchema: {
+      type: "object",
+      title: "UI Schema",
+      properties: {
+        "ui:options": {
+          type: "object",
+          title: "UI Options",
+          properties: {
+            ...common.optionsUiSchema.properties["ui:options"].properties,
+            itemsDisplayTitle: {
+              type: "string",
+              title: "Items Display Title",
+              description:
+                "You can set a fixed value or you can reference child fields by id between `{{` and `}}`",
+              tooltip:
+                "You can easily copy the field id by right-clicking the desired field in the tree",
+            },
+          },
+        },
+        "ui:label": common.optionsUiSchema.properties["ui:label"],
+      },
+    },
+    optionsUiSchemaUiSchema: {
+      ...common.optionsUiSchemaUiSchema,
+      "ui:options": {
+        ...common.optionsUiSchemaUiSchema["ui:options"],
+        itemsDisplayTitle: {
+          "ui:options": {
+            descriptionIsMarkdown: true,
+            showAsModal: true,
+            modal: {
+              buttonInNewLine: true,
+            },
+            codeEditor: {
+              minimal: true,
+              language: "jinja",
+              extraExtensions: [
+                placeholder("Path: {{item_123}} - Type: {{item_456}}"),
+              ],
+              height: "200px",
+            },
+          },
+          "ui:field": "codeEditor",
+        },
+      },
+    },
+
+    default: {
+      schema: {
+        type: "array",
+        items: {
+          type: "object",
+          properties: {
+            col1: {
+              type: "string",
+              title: "Column 1",
+            },
+            col2: {
+              type: "number",
+              title: "Number Col",
+            },
+          },
+        },
+      },
+      uiSchema: {
+        "ui:widget": "table",
+      },
+    },
+  },
+
   accordion: {
     title: "Accordion",
     icon: <BorderTopOutlined />,

src/forms/Form.jsx

@@ -16,6 +16,9 @@ import { Provider } from "react-redux";
 import store from "../store/configureStore";
 import FormErrorBoundary from "./FormErrorBoundary";
 
+import { AllCommunityModule, ModuleRegistry } from "ag-grid-community";
+ModuleRegistry.registerModules([AllCommunityModule]);
+
 const RJSFForm = ({
   formRef,
   schema,

src/forms/templates/ArrayFieldTemplates/ArrayFieldTemplate.jsx

@@ -83,8 +83,8 @@ const ArrayFieldTemplate = ({
       ),
       default: items.map((itemProps, index) => (
         <ArrayFieldTemplateItem
-          key={idSchema.$id + index}
           {...itemProps}
+          key={idSchema.$id + index}
           formContext={formContext}
         />
       )),
@@ -341,6 +341,7 @@ ArrayFieldTemplate.propTypes = {
   title: PropTypes.string,
   uiSchema: PropTypes.object,
   formData: PropTypes.object,
+  onChange: PropTypes.func,
 };
 
 export default ArrayFieldTemplate;