@bpmn-io/form-js-editor 1.5.0 → 1.6.0

package/dist/index.cjs

@@ -3,8 +3,8 @@
 var formJsViewer = require('@bpmn-io/form-js-viewer');
 var Ids = require('ids');
 var minDash = require('min-dash');
-var jsxRuntime = require('preact/jsx-runtime');
 var classnames = require('classnames');
+var jsxRuntime = require('preact/jsx-runtime');
 var hooks = require('preact/hooks');
 var preact = require('preact');
 var React = require('preact/compat');
@@ -437,7 +437,7 @@ EventBus.prototype._invokeListener = function (event, args, listener) {
  *    * after: [ 1500, 1500, (new=1300), 1000, 1000, (new=1000) ]
  *
  * @param {string} event
- * @param {EventBusListener} listener
+ * @param {EventBusListener} newListener
  */
 EventBus.prototype._addListener = function (event, newListener) {
   var listener = this._getListeners(event),
@@ -664,25 +664,6 @@ function calculateMaxColumnsWithAuto(autoCols) {
   return MAX_COLUMNS_PER_ROW - autoCols * 2;
 }
 
-function EditorIFrame(props) {
-  const {
-    field
-  } = props;
-  const Icon = formJsViewer.iconsByType(field.type);
-  return jsxRuntime.jsx("div", {
-    class: "fjs-iframe-placeholder",
-    children: jsxRuntime.jsxs("p", {
-      class: "fjs-iframe-placeholder-text",
-      children: [jsxRuntime.jsx(Icon, {
-        width: "32",
-        height: "24",
-        viewBox: "0 0 56 56"
-      }), "iFrame"]
-    })
-  });
-}
-EditorIFrame.config = formJsViewer.IFrame.config;
-
 const emptyImage = createEmptyImage();
 function editorFormFieldClasses(type, {
   disabled = false
@@ -784,6 +765,28 @@ function createEmptyImage() {
   return img;
 }
 
+function EditorIFrame(props) {
+  const {
+    field
+  } = props;
+  const Icon = formJsViewer.iconsByType(field.type);
+  return jsxRuntime.jsx("div", {
+    class: editorFormFieldClasses(field.type),
+    children: jsxRuntime.jsx("div", {
+      class: "fjs-iframe-placeholder",
+      children: jsxRuntime.jsxs("p", {
+        class: "fjs-iframe-placeholder-text",
+        children: [jsxRuntime.jsx(Icon, {
+          width: "32",
+          height: "24",
+          viewBox: "0 0 56 56"
+        }), "iFrame"]
+      })
+    })
+  });
+}
+EditorIFrame.config = formJsViewer.IFrame.config;
+
 const DragAndDropContext = preact.createContext({
   drake: null
 });
@@ -829,15 +832,15 @@ function useDebounce(fn, dependencies = []) {
   return callback;
 }
 
-var _path$4;
-function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
+var _path$5;
+function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
 var SvgClose = function SvgClose(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     fill: "currentColor"
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "m12 4.7-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7Z",
     clipRule: "evenodd"
@@ -845,10 +848,10 @@ var SvgClose = function SvgClose(props) {
 };
 var CloseIcon = SvgClose;
 
-var _path$3, _path2$1;
-function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+var _path$4, _path2$1;
+function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
 var SvgDelete = function SvgDelete(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -869,7 +872,7 @@ var SvgDelete = function SvgDelete(props) {
       mixBlendMode: "multiply"
     },
     transform: "translate(.536)"
-  }), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
+  }), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentcolor",
     d: "M7.536 6h-1v6h1V6Zm3 0h-1v6h1V6Z"
   })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -879,17 +882,17 @@ var SvgDelete = function SvgDelete(props) {
 };
 var DeleteIcon$1 = SvgDelete;
 
-var _path$2;
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+var _path$3;
+function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 var SvgDraggable = function SvgDraggable(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     xmlSpace: "preserve",
     width: 16,
     height: 16,
     fill: "currentcolor",
     viewBox: "0 0 32 32"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M10 6h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4z"
   })), /*#__PURE__*/React__namespace.createElement("path", {
     d: "M0 0h32v32H0z",
@@ -900,30 +903,30 @@ var SvgDraggable = function SvgDraggable(props) {
 };
 var DraggableIcon = SvgDraggable;
 
-var _path$1;
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+var _path$2;
+function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
 var SvgSearch = function SvgSearch(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 15,
     height: 15,
     fill: "none"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     d: "m14.5 13.793-3.776-3.776a5.508 5.508 0 1 0-.707.707l3.776 3.776.707-.707ZM2 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0Z"
   })));
 };
 var SearchIcon = SvgSearch;
 
-var _path, _rect, _mask, _path2, _path3, _path4, _path5, _path6;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _path$1, _rect, _mask, _path2, _path3, _path4, _path5, _path6;
+function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 var SvgEmptyForm = function SvgEmptyForm(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 126,
     height: 96,
     fill: "none"
-  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#FF832B",
     fillRule: "evenodd",
     d: "M70 78v8a3 3 0 0 1-3 3h-8v-5h6v-6h5Zm0-16h-5V46h5v16Zm0-32h-5v-6h-6v-5h8a3 3 0 0 1 3 3v8ZM43 19v5H27v-5h16Zm-32 0v5H5v6H0v-8a3 3 0 0 1 3-3h8ZM0 46h5v16H0V46Zm0 32h5v6h6v5H3a3 3 0 0 1-3-3v-8Zm27 11v-5h16v5H27Z",
@@ -1018,7 +1021,71 @@ function EditorText(props) {
 }
 EditorText.config = formJsViewer.Text.config;
 
-const editorFormFields = [EditorIFrame, EditorText];
+function EditorTable(props) {
+  const {
+    columnsExpression,
+    columns,
+    id,
+    label
+  } = props.field;
+  const shouldUseMockColumns = typeof columnsExpression === 'string' && columnsExpression.length > 0 || Array.isArray(columns) && columns.length === 0;
+  const editorColumns = shouldUseMockColumns ? [{
+    key: '1',
+    label: 'Column 1'
+  }, {
+    key: '2',
+    label: 'Column 2'
+  }, {
+    key: '3',
+    label: 'Column 3'
+  }] : columns;
+  const prefixId = `fjs-form-${id}`;
+  return jsxRuntime.jsxs("div", {
+    class: editorFormFieldClasses('table', {
+      disabled: true
+    }),
+    children: [jsxRuntime.jsx(formJsViewer.Label, {
+      id: prefixId,
+      label: label
+    }), jsxRuntime.jsx("div", {
+      class: "fjs-table-middle-container",
+      children: jsxRuntime.jsx("div", {
+        class: "fjs-table-inner-container",
+        children: jsxRuntime.jsxs("table", {
+          class: classnames('fjs-table', 'fjs-disabled'),
+          id: prefixId,
+          children: [jsxRuntime.jsx("thead", {
+            class: "fjs-table-head",
+            children: jsxRuntime.jsx("tr", {
+              class: "fjs-table-tr",
+              children: editorColumns.map(({
+                key,
+                label
+              }) => jsxRuntime.jsx("th", {
+                class: "fjs-table-th",
+                children: label
+              }, key))
+            })
+          }), jsxRuntime.jsx("tbody", {
+            class: "fjs-table-body",
+            children: jsxRuntime.jsx("tr", {
+              class: "fjs-table-tr",
+              children: editorColumns.map(({
+                key
+              }) => jsxRuntime.jsx("td", {
+                class: "fjs-table-td",
+                children: "Content"
+              }, key))
+            })
+          })]
+        })
+      })
+    })]
+  });
+}
+EditorTable.config = formJsViewer.Table.config;
+
+const editorFormFields = [EditorIFrame, EditorText, EditorTable];
 
 class EditorFormFields extends formJsViewer.FormFields {
   constructor() {
@@ -1558,7 +1625,7 @@ class Dragging {
   }
 
   /**
-   * Calculcates position in form schema given the dropped place.
+   * Calculates position in form schema given the dropped place.
    *
    * @param { FormRow } targetRow
    * @param { any } targetFormField
@@ -1618,13 +1685,18 @@ class Dragging {
         if (targetParentPath.join('.') !== currentParentPath.join('.')) {
           const isDropAllowedByPathRegistry = this._pathRegistry.executeRecursivelyOnFields(formField, ({
             field,
-            isClosed
+            isClosed,
+            isRepeatable
           }) => {
             const options = {
               cutoffNode: currentParentFormField.id
             };
             const fieldPath = this._pathRegistry.getValuePath(field, options);
-            return this._pathRegistry.canClaimPath([...targetParentPath, ...fieldPath], isClosed);
+            return this._pathRegistry.canClaimPath([...targetParentPath, ...fieldPath], {
+              isClosed,
+              isRepeatable,
+              knownAncestorIds: formJsViewer.getAncestryList(targetParentId, this._formFieldRegistry)
+            });
           });
           if (!isDropAllowedByPathRegistry) {
             return 'Drop not allowed by path registry';
@@ -1990,24 +2062,40 @@ function ContextPad(props) {
     children: props.children
   });
 }
-function Empty() {
+function Empty(props) {
+  if (props.field.type === 'default') {
+    return jsxRuntime.jsx("div", {
+      class: "fjs-empty-editor",
+      children: jsxRuntime.jsxs("div", {
+        class: "fjs-empty-editor-card",
+        children: [jsxRuntime.jsx(EmptyFormIcon, {}), jsxRuntime.jsx("h2", {
+          children: "Build your form"
+        }), jsxRuntime.jsx("span", {
+          children: "Drag and drop components here to start designing."
+        }), jsxRuntime.jsx("span", {
+          children: "Use the preview window to test your form."
+        })]
+      })
+    });
+  }
+  if (props.field.type === 'group') {
+    return jsxRuntime.jsx("div", {
+      class: "fjs-empty-component",
+      children: jsxRuntime.jsx("span", {
+        children: "Drag and drop components here."
+      })
+    });
+  }
+  if (props.field.type === 'dynamiclist') {
+    return jsxRuntime.jsx("div", {
+      class: "fjs-empty-component",
+      children: jsxRuntime.jsxs("span", {
+        children: ["Drag and drop components here ", jsxRuntime.jsx("br", {}), " to create a repeatable list item."]
+      })
+    });
+  }
   return null;
 }
-function EmptyRoot(props) {
-  return jsxRuntime.jsx("div", {
-    class: "fjs-empty-editor",
-    children: jsxRuntime.jsxs("div", {
-      class: "fjs-empty-editor-card",
-      children: [jsxRuntime.jsx(EmptyFormIcon, {}), jsxRuntime.jsx("h2", {
-        children: "Build your form"
-      }), jsxRuntime.jsx("span", {
-        children: "Drag and drop components here to start designing."
-      }), jsxRuntime.jsx("span", {
-        children: "Use the preview window to test your form."
-      })]
-    })
-  });
-}
 function Element$1(props) {
   const eventBus = useService$1('eventBus'),
     formEditor = useService$1('formEditor'),
@@ -2016,8 +2104,7 @@ function Element$1(props) {
     modeling = useService$1('modeling'),
     selection = useService$1('selection');
   const {
-    hoveredId,
-    setHoveredId
+    hoverInfo
   } = hooks.useContext(formJsViewer.FormRenderContext);
   const {
     field
@@ -2028,6 +2115,7 @@ function Element$1(props) {
     showOutline
   } = field;
   const ref = hooks.useRef();
+  const [hovered, setHovered] = hooks.useState(false);
   function scrollIntoView({
     selection
   }) {
@@ -2056,19 +2144,23 @@ function Element$1(props) {
     // properly focus on field
     ref.current.focus();
   }
-  const classes = [];
-  if (props.class) {
-    classes.push(...props.class.split(' '));
-  }
-  if (selection.isSelected(field)) {
-    classes.push('fjs-editor-selected');
-  }
-  if (showOutline) {
-    classes.push('fjs-outlined');
-  }
-  if (hoveredId === field.id) {
-    classes.push('fjs-editor-hovered');
-  }
+  const isSelected = selection.isSelected(field);
+  const classString = hooks.useMemo(() => {
+    const classes = [];
+    if (props.class) {
+      classes.push(...props.class.split(' '));
+    }
+    if (isSelected) {
+      classes.push('fjs-editor-selected');
+    }
+    if (showOutline) {
+      classes.push('fjs-outlined');
+    }
+    if (hovered) {
+      classes.push('fjs-editor-hovered');
+    }
+    return classes.join(' ');
+  }, [hovered, isSelected, props.class, showOutline]);
   const onRemove = event => {
     event.stopPropagation();
     const parentField = formFieldRegistry.get(field._parent);
@@ -2082,15 +2174,18 @@ function Element$1(props) {
     }
   };
   return jsxRuntime.jsxs("div", {
-    class: classes.join(' '),
+    class: classString,
     "data-id": id,
     "data-field-type": type,
     tabIndex: type === 'default' ? -1 : 0,
     onClick: onClick,
     onKeyPress: onKeyPress,
     onMouseOver: e => {
-      // @ts-ignore
-      setHoveredId(field.id);
+      if (hoverInfo.cleanup) {
+        hoverInfo.cleanup();
+      }
+      setHovered(true);
+      hoverInfo.cleanup = () => setHovered(false);
       e.stopPropagation();
     },
     ref: ref,
@@ -2161,6 +2256,7 @@ function Row(props) {
       children: jsxRuntime.jsx(DraggableIcon, {})
     }), jsxRuntime.jsx("div", {
       class: classes.join(' '),
+      style: props.style,
       "data-row-id": id,
       children: props.children
     })]
@@ -2266,17 +2362,14 @@ function FormEditor$1(props) {
     // keep deprecated event to ensure backward compatibility
     eventBus.fire('formEditor.rendered');
   }, []);
-  const [hoveredId, setHoveredId] = hooks.useState(null);
   const formRenderContext = hooks.useMemo(() => ({
     Children,
     Column,
     Element: Element$1,
     Empty,
-    EmptyRoot,
     Row,
-    hoveredId,
-    setHoveredId
-  }), [hoveredId]);
+    hoverInfo: {}
+  }), []);
   const formContext = hooks.useMemo(() => ({
     getService(type, strict = true) {
       // TODO(philippfromme): clean up
@@ -2637,7 +2730,8 @@ EditorActions.prototype.trigger = function (action, opts) {
  * The key of the object will be the name of the action.
  *
  * @example
- * ´´´
+ *
+ * ```javascript
  * var actions = {
  *   spaceTool: function() {
  *     spaceTool.activateSelection();
@@ -2650,7 +2744,7 @@ EditorActions.prototype.trigger = function (action, opts) {
  * editorActions.register(actions);
  *
  * editorActions.isRegistered('spaceTool'); // true
- * ´´´
+ * ```
  *
  * @param {Object} actions
  */
@@ -2789,6 +2883,7 @@ function hasModifier(event) {
 
 /**
  * @param {KeyboardEvent} event
+ * @return {boolean}
  */
 function isCmd(event) {
   // ensure we don't react to AltGr
@@ -2804,6 +2899,7 @@ function isCmd(event) {
  *
  * @param {string|string[]} keys
  * @param {KeyboardEvent} event
+ * @return {boolean}
  */
 function isKey(keys, event) {
   keys = minDash.isArray(keys) ? keys : [keys];
@@ -2816,21 +2912,39 @@ function isKey(keys, event) {
 function isShift(event) {
   return event.shiftKey;
 }
+
+/**
+ * @param {KeyboardEvent} event
+ */
 function isCopy(event) {
   return isCmd(event) && isKey(KEYS_COPY, event);
 }
+
+/**
+ * @param {KeyboardEvent} event
+ */
 function isPaste(event) {
   return isCmd(event) && isKey(KEYS_PASTE, event);
 }
+
+/**
+ * @param {KeyboardEvent} event
+ */
 function isUndo(event) {
   return isCmd(event) && !isShift(event) && isKey(KEYS_UNDO, event);
 }
+
+/**
+ * @param {KeyboardEvent} event
+ */
 function isRedo(event) {
   return isCmd(event) && (isKey(KEYS_REDO, event) || isKey(KEYS_UNDO, event) && isShift(event));
 }
 
 /**
  * @typedef {import('../../core/EventBus').default} EventBus
+ *
+ * @typedef {({ keyEvent: KeyboardEvent }) => any} Listener
  */
 
 var KEYDOWN_EVENT = 'keyboard.keydown',
@@ -2860,6 +2974,7 @@ var DEFAULT_PRIORITY$2 = 1000;
  * `keyboard.bindTo` configuration option.
  *
  * @param {Object} config
+ * @param {EventTarget} [config.bindTo]
  * @param {EventBus} eventBus
  */
 function Keyboard(config, eventBus) {
@@ -2926,6 +3041,12 @@ Keyboard.prototype._getAllowedModifiers = function (element) {
   }
   return modifierContainer.getAttribute(HANDLE_MODIFIER_ATTRIBUTE).split(',');
 };
+
+/**
+ * Bind keyboard events to the given DOM node.
+ *
+ * @param {EventTarget} node
+ */
 Keyboard.prototype.bind = function (node) {
   // make sure that the keyboard is only bound once to the DOM
   this.unbind();
@@ -2936,6 +3057,10 @@ Keyboard.prototype.bind = function (node) {
   minDom.event.bind(node, 'keyup', this._keyupHandler);
   this._fire('bind');
 };
+
+/**
+ * @return {EventTarget}
+ */
 Keyboard.prototype.getBinding = function () {
   return this._node;
 };
@@ -2950,6 +3075,10 @@ Keyboard.prototype.unbind = function () {
   }
   this._node = null;
 };
+
+/**
+ * @param {string} event
+ */
 Keyboard.prototype._fire = function (event) {
   this._eventBus.fire('keyboard.' + event, {
     node: this._node
@@ -2962,8 +3091,8 @@ Keyboard.prototype._fire = function (event) {
  * provided, the default value of 1000 is used.
  *
  * @param {number} [priority]
- * @param {Function} listener
- * @param {string} type
+ * @param {Listener} listener
+ * @param {string} [type='keyboard.keydown']
  */
 Keyboard.prototype.addListener = function (priority, listener, type) {
   if (minDash.isFunction(priority)) {
@@ -2973,6 +3102,13 @@ Keyboard.prototype.addListener = function (priority, listener, type) {
   }
   this._eventBus.on(type || KEYDOWN_EVENT, priority, listener);
 };
+
+/**
+ * Remove a listener function.
+ *
+ * @param {Listener} listener
+ * @param {string} [type='keyboard.keydown']
+ */
 Keyboard.prototype.removeListener = function (listener, type) {
   this._eventBus.off(type || KEYDOWN_EVENT, listener);
 };
@@ -3433,9 +3569,14 @@ class MoveFormFieldHandler {
       // (7) Reregister form field (and children) from path registry
       this._pathRegistry.executeRecursivelyOnFields(formField, ({
         field,
-        isClosed
+        isClosed,
+        isRepeatable
       }) => {
-        this._pathRegistry.claimPath(this._pathRegistry.getValuePath(field), isClosed);
+        this._pathRegistry.claimPath(this._pathRegistry.getValuePath(field), {
+          isClosed,
+          isRepeatable,
+          claimerId: field.id
+        });
       });
     }
 
@@ -3566,7 +3707,10 @@ class UpdateKeyClaimHandler {
     };
     const valuePath = this._pathRegistry.getValuePath(formField, options);
     if (claiming) {
-      this._pathRegistry.claimPath(valuePath, true);
+      this._pathRegistry.claimPath(valuePath, {
+        isClosed: true,
+        claimerId: formField.id
+      });
     } else {
       this._pathRegistry.unclaimPath(valuePath);
     }
@@ -3577,12 +3721,16 @@ class UpdateKeyClaimHandler {
   revert(context) {
     const {
       claiming,
+      formField,
       valuePath
     } = context;
     if (claiming) {
       this._pathRegistry.unclaimPath(valuePath);
     } else {
-      this._pathRegistry.claimPath(valuePath, true);
+      this._pathRegistry.claimPath(valuePath, {
+        isClosed: true,
+        claimerId: formField.id
+      });
     }
   }
 }
@@ -3611,24 +3759,34 @@ class UpdatePathClaimHandler {
     if (claiming) {
       this._pathRegistry.executeRecursivelyOnFields(formField, ({
         field,
-        isClosed
+        isClosed,
+        isRepeatable
       }) => {
         const valuePath = this._pathRegistry.getValuePath(field, options);
         valuePaths.push({
           valuePath,
-          isClosed
+          isClosed,
+          isRepeatable,
+          claimerId: field.id
+        });
+        this._pathRegistry.claimPath(valuePath, {
+          isClosed,
+          isRepeatable,
+          claimerId: field.id
         });
-        this._pathRegistry.claimPath(valuePath, isClosed);
       });
     } else {
       this._pathRegistry.executeRecursivelyOnFields(formField, ({
         field,
-        isClosed
+        isClosed,
+        isRepeatable
       }) => {
         const valuePath = this._pathRegistry.getValuePath(field, options);
         valuePaths.push({
           valuePath,
-          isClosed
+          isClosed,
+          isRepeatable,
+          claimerId: field.id
         });
         this._pathRegistry.unclaimPath(valuePath);
       });
@@ -3651,9 +3809,15 @@ class UpdatePathClaimHandler {
     } else {
       valuePaths.forEach(({
         valuePath,
-        isClosed
+        isClosed,
+        isRepeatable,
+        claimerId
       }) => {
-        this._pathRegistry.claimPath(valuePath, isClosed);
+        this._pathRegistry.claimPath(valuePath, {
+          isClosed,
+          isRepeatable,
+          claimerId
+        });
       });
     }
   }
@@ -4186,7 +4350,7 @@ class ValidateBehavior extends CommandInterceptor {
 }
 ValidateBehavior.$inject = ['eventBus'];
 
-class ValuesSourceBehavior extends CommandInterceptor {
+class OptionsSourceBehavior extends CommandInterceptor {
   constructor(eventBus) {
     super(eventBus);
 
@@ -4206,15 +4370,15 @@ class ValuesSourceBehavior extends CommandInterceptor {
       }
 
       // clean up value sources that are not to going to be set
-      Object.values(formJsViewer.VALUES_SOURCES).forEach(source => {
-        const path = formJsViewer.VALUES_SOURCES_PATHS[source];
+      Object.values(formJsViewer.OPTIONS_SOURCES).forEach(source => {
+        const path = formJsViewer.OPTIONS_SOURCES_PATHS[source];
         if (minDash.get(properties, path) == undefined) {
-          newProperties[formJsViewer.VALUES_SOURCES_PATHS[source]] = undefined;
+          newProperties[formJsViewer.OPTIONS_SOURCES_PATHS[source]] = undefined;
         }
       });
 
       // clean up default value
-      if (minDash.get(properties, formJsViewer.VALUES_SOURCES_PATHS[formJsViewer.VALUES_SOURCES.EXPRESSION]) !== undefined || minDash.get(properties, formJsViewer.VALUES_SOURCES_PATHS[formJsViewer.VALUES_SOURCES.INPUT]) !== undefined) {
+      if (minDash.get(properties, formJsViewer.OPTIONS_SOURCES_PATHS[formJsViewer.OPTIONS_SOURCES.EXPRESSION]) !== undefined || minDash.get(properties, formJsViewer.OPTIONS_SOURCES_PATHS[formJsViewer.OPTIONS_SOURCES.INPUT]) !== undefined) {
         newProperties['defaultValue'] = undefined;
       }
       context.properties = {
@@ -4224,23 +4388,85 @@ class ValuesSourceBehavior extends CommandInterceptor {
     }, true);
   }
 }
-ValuesSourceBehavior.$inject = ['eventBus'];
+OptionsSourceBehavior.$inject = ['eventBus'];
 
 // helper ///////////////////
 
 function isValuesSourceUpdate(properties) {
-  return Object.values(formJsViewer.VALUES_SOURCES_PATHS).some(path => {
+  return Object.values(formJsViewer.OPTIONS_SOURCES_PATHS).some(path => {
     return minDash.get(properties, path) !== undefined;
   });
 }
 
+const COLUMNS_SOURCE_PROPERTIES = {
+  columns: 'columns',
+  columnsExpression: 'columnsExpression'
+};
+class ColumnsSourceBehavior extends CommandInterceptor {
+  constructor(eventBus) {
+    super(eventBus);
+    this.preExecute('formField.edit', function (context) {
+      const {
+        properties,
+        oldProperties
+      } = context;
+      const isColumnSourceUpdate = Object.values(COLUMNS_SOURCE_PROPERTIES).some(path => {
+        return minDash.get(properties, [path]) !== undefined;
+      });
+      if (!isColumnSourceUpdate) {
+        return;
+      }
+      const columns = minDash.get(properties, [COLUMNS_SOURCE_PROPERTIES.columns]);
+      const oldColumns = minDash.get(oldProperties, [COLUMNS_SOURCE_PROPERTIES.columns]);
+      const columnsExpression = minDash.get(properties, [COLUMNS_SOURCE_PROPERTIES.columnsExpression]);
+      const oldColumnsExpression = minDash.get(oldProperties, [COLUMNS_SOURCE_PROPERTIES.columnsExpression]);
+      if (minDash.isArray(columns) && !minDash.isDefined(oldColumns)) {
+        context.properties = {
+          ...properties,
+          columnsExpression: undefined
+        };
+        return;
+      }
+      if (minDash.isString(columnsExpression) && !minDash.isString(oldColumnsExpression)) {
+        context.properties = {
+          ...properties,
+          columns: undefined
+        };
+        return;
+      }
+    }, true);
+  }
+}
+ColumnsSourceBehavior.$inject = ['eventBus'];
+
+class TableDataSourceBehavior extends CommandInterceptor {
+  constructor(eventBus) {
+    super(eventBus);
+    this.preExecute('formField.add', function (context) {
+      const {
+        formField
+      } = context;
+      if (minDash.get(formField, ['type']) !== 'table') {
+        return;
+      }
+      context.formField = {
+        ...formField,
+        dataSource: `=${formField.id}`
+      };
+    }, true);
+  }
+}
+TableDataSourceBehavior.$inject = ['eventBus'];
+
 var behaviorModule = {
-  __init__: ['idBehavior', 'keyBehavior', 'pathBehavior', 'validateBehavior', 'valuesSourceBehavior'],
+  __init__: ['idBehavior', 'keyBehavior', 'pathBehavior', 'validateBehavior', 'optionsSourceBehavior', 'columnsSourceBehavior', 'tableDataSourceBehavior'],
   idBehavior: ['type', IdBehavior],
   keyBehavior: ['type', KeyBehavior],
   pathBehavior: ['type', PathBehavior],
   validateBehavior: ['type', ValidateBehavior],
-  valuesSourceBehavior: ['type', ValuesSourceBehavior]
+  optionsSourceBehavior: ['type', OptionsSourceBehavior],
+  columnsSourceBehavior: ['type', ColumnsSourceBehavior],
+  tableDataSourceBehavior: ['type', TableDataSourceBehavior]
 };
 
 /**
@@ -8561,11 +8787,15 @@ function textToLabel(text) {
   }
   return null;
 }
+
+/**
+  * @param {string} path
+  */
 function isValidDotPath(path) {
   return /^\w+(\.\w+)*$/.test(path);
 }
 const INPUTS = ['checkbox', 'checklist', 'datetime', 'number', 'radio', 'select', 'taglist', 'textfield', 'textarea'];
-const VALUES_INPUTS = ['checklist', 'radio', 'select', 'taglist'];
+const OPTIONS_INPUTS = ['checklist', 'radio', 'select', 'taglist'];
 function hasEntryConfigured(formFieldDefinition, entryId) {
   const {
     propertiesPanelEntries = []
@@ -8575,7 +8805,7 @@ function hasEntryConfigured(formFieldDefinition, entryId) {
   }
   return propertiesPanelEntries.some(id => id === entryId);
 }
-function hasValuesGroupsConfigured(formFieldDefinition) {
+function hasOptionsGroupsConfigured(formFieldDefinition) {
   const {
     propertiesPanelEntries = []
   } = formFieldDefinition;
@@ -8585,6 +8815,13 @@ function hasValuesGroupsConfigured(formFieldDefinition) {
   return propertiesPanelEntries.some(id => id === 'values');
 }
 
+/**
+  * @param {string} path
+  */
+function hasIntegerPathSegment(path) {
+  return path.split('.').some(segment => /^\d+$/.test(segment));
+}
+
 function useService (type, strict) {
   const {
     getService
@@ -9090,7 +9327,7 @@ function DefaultOptionEntry(props) {
   function isDefaultVisible(matchers) {
     return field => {
       // Only make default values available when they are statically defined
-      if (!INPUTS.includes(type) || VALUES_INPUTS.includes(type) && !field.values) {
+      if (!INPUTS.includes(type) || OPTIONS_INPUTS.includes(type) && !field.values) {
         return false;
       }
       return matchers(field);
@@ -9436,20 +9673,27 @@ function containsSpace(value) {
 function KeyEntry(props) {
   const {
     editField,
-    field
+    field,
+    getService
   } = props;
   const entries = [];
   entries.push({
     id: 'key',
-    component: Key$1,
+    component: Key$2,
     editField: editField,
     field: field,
     isEdited: isEdited,
-    isDefaultVisible: field => INPUTS.includes(field.type)
+    isDefaultVisible: field => {
+      const formFields = getService('formFields');
+      const {
+        config
+      } = formFields.get(field.type);
+      return config.keyed;
+    }
   });
   return entries;
 }
-function Key$1(props) {
+function Key$2(props) {
   const {
     editField,
     field,
@@ -9471,14 +9715,13 @@ function Key$1(props) {
     if (value === field.key) {
       return null;
     }
-    if (minDash.isUndefined(value) || !value.length) {
+    if (!minDash.isString(value) || value.length === 0) {
       return 'Must not be empty.';
     }
-    if (value && !isValidDotPath(value)) {
+    if (!isValidDotPath(value)) {
       return 'Must be a variable or a dot separated path.';
     }
-    const hasIntegerPathSegment = value.split('.').some(segment => /^\d+$/.test(segment));
-    if (hasIntegerPathSegment) {
+    if (hasIntegerPathSegment(value)) {
       return 'Must not contain numerical path segments.';
     }
     const replacements = {
@@ -9491,8 +9734,14 @@ function Key$1(props) {
 
     // unclaim temporarily to avoid self-conflicts
     pathRegistry.unclaimPath(oldPath);
-    const canClaim = pathRegistry.canClaimPath(newPath, true);
-    pathRegistry.claimPath(oldPath, true);
+    const canClaim = pathRegistry.canClaimPath(newPath, {
+      isClosed: true,
+      claimerId: field.id
+    });
+    pathRegistry.claimPath(oldPath, {
+      isClosed: true,
+      claimerId: field.id
+    });
     return canClaim ? null : 'Must not conflict with other key/path assignments.';
   };
   return TextfieldEntry({
@@ -9511,13 +9760,15 @@ function Key$1(props) {
 function PathEntry(props) {
   const {
     editField,
-    field
+    field,
+    getService
   } = props;
   const {
     type
   } = field;
   const entries = [];
-  if (type === 'group') {
+  const formFieldDefinition = getService('formFields').get(type);
+  if (formFieldDefinition && formFieldDefinition.config.pathed) {
     entries.push({
       id: 'path',
       component: Path,
@@ -9536,6 +9787,8 @@ function Path(props) {
   } = props;
   const debounce = useService('debounce');
   const pathRegistry = useService('pathRegistry');
+  const fieldConfig = useService('formFields').get(field.type).config;
+  const isRepeating = fieldConfig.repeatable && field.isRepeating;
   const path = ['path'];
   const getValue = () => {
     return minDash.get(field, path, '');
@@ -9547,32 +9800,53 @@ function Path(props) {
     return editField(field, path, value);
   };
   const validate = value => {
-    if (!value || value === field.path) {
+    if (!value && isRepeating) {
+      return 'Must not be empty';
+    }
+
+    // Early return for empty value in non-repeating cases or if the field path hasn't changed
+    if (!value && !isRepeating || value === field.path) {
       return null;
     }
-    if (value && !isValidDotPath(value)) {
-      return 'Must be empty, a variable or a dot separated path';
+
+    // Validate dot-separated path format
+    if (!isValidDotPath(value)) {
+      const msg = isRepeating ? 'Must be a variable or a dot-separated path' : 'Must be empty, a variable or a dot-separated path';
+      return msg;
     }
-    const hasIntegerPathSegment = value && value.split('.').some(segment => /^\d+$/.test(segment));
+
+    // Check for integer segments in the path
+    const hasIntegerPathSegment = value.split('.').some(segment => /^\d+$/.test(segment));
     if (hasIntegerPathSegment) {
       return 'Must not contain numerical path segments.';
     }
-    const options = value && {
+
+    // Check for path collisions
+    const options = {
       replacements: {
-        [field.id]: [value]
+        [field.id]: value.split('.')
       }
-    } || {};
+    };
     const canClaim = pathRegistry.executeRecursivelyOnFields(field, ({
       field,
-      isClosed
+      isClosed,
+      isRepeatable
     }) => {
       const path = pathRegistry.getValuePath(field, options);
-      return pathRegistry.canClaimPath(path, isClosed);
+      return pathRegistry.canClaimPath(path, {
+        isClosed,
+        isRepeatable,
+        claimerId: field.id
+      });
     });
     if (!canClaim) {
-      return 'Must not cause two binding paths to colide';
+      return 'Must not cause two binding paths to collide';
     }
+
+    // If all checks pass
+    return null;
   };
+  const tooltip = isRepeating ? 'Routes the children of this component into a form variable, may be left empty to route at the root level.' : 'Routes the children of this component into a form variable.';
   return TextfieldEntry({
     debounce,
     description: 'Where the child variables of this component are pathed to.',
@@ -9580,7 +9854,7 @@ function Path(props) {
     getValue,
     id,
     label: 'Path',
-    tooltip: 'Routes the children of this component into a form variable, may be left empty to route at the root level.',
+    tooltip,
     setValue,
     validate
   });
@@ -9637,37 +9911,141 @@ const SimpleBoolComponent = props => {
   });
 };
 
-function GroupEntries(props) {
+function simpleSelectEntryFactory(options) {
   const {
+    id,
+    label,
+    path,
+    props,
+    optionsArray
+  } = options;
+  const {
+    editField,
     field
   } = props;
-  const {
-    type
-  } = field;
-  if (type !== 'group') {
-    return [];
-  }
-  const entries = [simpleBoolEntryFactory({
-    id: 'showOutline',
-    path: ['showOutline'],
-    label: 'Show outline',
-    props
-  })];
-  return entries;
+  return {
+    id,
+    label,
+    path,
+    field,
+    editField,
+    optionsArray,
+    component: SimpleSelectComponent,
+    isEdited: isEdited$3
+  };
 }
-
-function LabelEntry(props) {
+const SimpleSelectComponent = props => {
   const {
+    id,
+    label,
+    path,
     field,
-    editField
-  } = props;
-  const entries = [];
-  entries.push({
-    id: 'date-label',
-    component: DateLabel,
     editField,
-    field,
-    isEdited: isEdited$6,
+    optionsArray
+  } = props;
+  const getValue = () => minDash.get(field, path, '');
+  const setValue = value => editField(field, path, value);
+  const getOptions = () => optionsArray;
+  return SelectEntry({
+    label,
+    element: field,
+    getOptions,
+    getValue,
+    id,
+    setValue
+  });
+};
+
+function simpleRangeIntegerEntryFactory(options) {
+  const {
+    id,
+    label,
+    path,
+    props,
+    min,
+    max,
+    defaultValue
+  } = options;
+  const {
+    editField,
+    field
+  } = props;
+  return {
+    id,
+    label,
+    path,
+    field,
+    editField,
+    min,
+    max,
+    defaultValue,
+    component: SimpleRangeIntegerEntry,
+    isEdited: isEdited$7
+  };
+}
+const SimpleRangeIntegerEntry = props => {
+  const {
+    id,
+    label,
+    path,
+    field,
+    editField,
+    min,
+    max,
+    defaultValue
+  } = props;
+  const debounce = useService('debounce');
+  const getValue = () => {
+    const value = minDash.get(field, path, defaultValue);
+    return Number.isInteger(value) ? value : defaultValue;
+  };
+  const setValue = value => {
+    editField(field, path, value);
+  };
+  return NumberFieldEntry({
+    debounce,
+    label,
+    element: field,
+    step: 1,
+    min,
+    max,
+    getValue,
+    id,
+    setValue
+  });
+};
+
+function GroupAppearanceEntry(props) {
+  const {
+    field
+  } = props;
+  const {
+    type
+  } = field;
+  if (!['group', 'dynamiclist'].includes(type)) {
+    return [];
+  }
+  const entries = [simpleBoolEntryFactory({
+    id: 'showOutline',
+    path: ['showOutline'],
+    label: 'Show outline',
+    props
+  })];
+  return entries;
+}
+
+function LabelEntry(props) {
+  const {
+    field,
+    editField
+  } = props;
+  const entries = [];
+  entries.push({
+    id: 'date-label',
+    component: DateLabel,
+    editField,
+    field,
+    isEdited: isEdited$6,
     isDefaultVisible: function (field) {
       return field.type === 'datetime' && (field.subtype === formJsViewer.DATETIME_SUBTYPES.DATE || field.subtype === formJsViewer.DATETIME_SUBTYPES.DATETIME);
     }
@@ -9684,15 +10062,15 @@ function LabelEntry(props) {
   });
   entries.push({
     id: 'label',
-    component: Label$1,
+    component: Label$2,
     editField,
     field,
     isEdited: isEdited$6,
-    isDefaultVisible: field => INPUTS.includes(field.type) || field.type === 'button' || field.type === 'group' || field.type === 'iframe'
+    isDefaultVisible: field => [...INPUTS, 'button', 'group', 'table', 'iframe', 'dynamiclist'].includes(field.type)
   });
   return entries;
 }
-function Label$1(props) {
+function Label$2(props) {
   const {
     editField,
     field,
@@ -9709,7 +10087,7 @@ function Label$1(props) {
   const setValue = value => {
     return editField(field, path, value || '');
   };
-  const label = getLabelText(field);
+  const label = getLabelText(field.type);
   return FeelTemplatingEntry({
     debounce,
     element: field,
@@ -9780,17 +10158,22 @@ function TimeLabel(props) {
 
 // helpers //////////
 
-function getLabelText(field) {
-  const {
-    type
-  } = field;
-  if (type === 'group') {
-    return 'Group label';
-  }
-  if (type === 'iframe') {
-    return 'Title';
+/**
+ * @param {string} type
+ * @returns {string}
+ */
+function getLabelText(type) {
+  switch (type) {
+    case 'group':
+    case 'dynamiclist':
+      return 'Group label';
+    case 'table':
+      return 'Table label';
+    case 'iframe':
+      return 'Title';
+    default:
+      return 'Field label';
   }
-  return 'Field label';
 }
 
 function HeightEntry(props) {
@@ -9945,7 +10328,7 @@ function SourceEntry(props) {
   const entries = [];
   entries.push({
     id: 'source',
-    component: Source,
+    component: Source$1,
     editField: editField,
     field: field,
     isEdited: isEdited$6,
@@ -9953,7 +10336,7 @@ function SourceEntry(props) {
   });
   return entries;
 }
-function Source(props) {
+function Source$1(props) {
   const {
     editField,
     field,
@@ -9998,18 +10381,6 @@ function TextEntry(props) {
     isEdited: isEdited$6,
     isDefaultVisible: field => field.type === 'text'
   }];
-
-  // todo: skipped to make the release without too much risk
-  // if (templating.isTemplate(field.text)) {
-  //   entries.push(simpleBoolEntryFactory({
-  //     id: 'strict',
-  //     path: [ 'strict' ],
-  //     label: 'Strict templating',
-  //     description: 'Enforces types to be correct',
-  //     props
-  //   }));
-  // }
-
   return entries;
 }
 function Text(props) {
@@ -10437,7 +10808,7 @@ function ValueEntry(props) {
     validateFactory
   } = props;
   const entries = [{
-    component: Label,
+    component: Label$1,
     editField,
     field,
     id: idPrefix + '-label',
@@ -10455,7 +10826,7 @@ function ValueEntry(props) {
   }];
   return entries;
 }
-function Label(props) {
+function Label$1(props) {
   const {
     editField,
     field,
@@ -10523,7 +10894,7 @@ function CustomValueEntry(props) {
     validateFactory
   } = props;
   const entries = [{
-    component: Key,
+    component: Key$1,
     editField,
     field,
     id: idPrefix + '-key',
@@ -10541,7 +10912,7 @@ function CustomValueEntry(props) {
   }];
   return entries;
 }
-function Key(props) {
+function Key$1(props) {
   const {
     editField,
     field,
@@ -10666,7 +11037,7 @@ function AutoFocusSelectEntry(props) {
   });
 }
 
-function ValuesSourceSelectEntry(props) {
+function OptionsSourceSelectEntry(props) {
   const {
     editField,
     field,
@@ -10686,25 +11057,25 @@ function ValuesSourceSelect(props) {
     field,
     id
   } = props;
-  const getValue = formJsViewer.getValuesSource;
+  const getValue = formJsViewer.getOptionsSource;
   const setValue = value => {
     let newField = field;
     const newProperties = {};
-    newProperties[formJsViewer.VALUES_SOURCES_PATHS[value]] = formJsViewer.VALUES_SOURCES_DEFAULTS[value];
+    newProperties[formJsViewer.OPTIONS_SOURCES_PATHS[value]] = formJsViewer.OPTIONS_SOURCES_DEFAULTS[value];
     newField = editField(field, newProperties);
     return newField;
   };
-  const getValuesSourceOptions = () => {
-    return Object.values(formJsViewer.VALUES_SOURCES).map(valueSource => ({
-      label: formJsViewer.VALUES_SOURCES_LABELS[valueSource],
+  const getOptionsSourceOptions = () => {
+    return Object.values(formJsViewer.OPTIONS_SOURCES).map(valueSource => ({
+      label: formJsViewer.OPTIONS_SOURCES_LABELS[valueSource],
       value: valueSource
     }));
   };
   return AutoFocusSelectEntry({
-    autoFocusEntry: getAutoFocusEntryId(field),
+    autoFocusEntry: getAutoFocusEntryId$1(field),
     label: 'Type',
     element: field,
-    getOptions: getValuesSourceOptions,
+    getOptions: getOptionsSourceOptions,
     getValue,
     id,
     setValue
@@ -10713,19 +11084,19 @@ function ValuesSourceSelect(props) {
 
 // helpers //////////
 
-function getAutoFocusEntryId(field) {
-  const valuesSource = formJsViewer.getValuesSource(field);
-  if (valuesSource === formJsViewer.VALUES_SOURCES.EXPRESSION) {
-    return `${field.id}-valuesExpression-expression`;
-  } else if (valuesSource === formJsViewer.VALUES_SOURCES.INPUT) {
-    return `${field.id}-dynamicValues-key`;
-  } else if (valuesSource === formJsViewer.VALUES_SOURCES.STATIC) {
-    return `${field.id}-staticValues-0-label`;
+function getAutoFocusEntryId$1(field) {
+  const valuesSource = formJsViewer.getOptionsSource(field);
+  if (valuesSource === formJsViewer.OPTIONS_SOURCES.EXPRESSION) {
+    return 'optionsExpression-expression';
+  } else if (valuesSource === formJsViewer.OPTIONS_SOURCES.INPUT) {
+    return 'dynamicOptions-key';
+  } else if (valuesSource === formJsViewer.OPTIONS_SOURCES.STATIC) {
+    return 'staticOptions-0-label';
   }
   return null;
 }
 
-function InputKeyValuesSourceEntry(props) {
+function InputKeyOptionsSourceEntry(props) {
   const {
     editField,
     field,
@@ -10746,7 +11117,7 @@ function InputValuesKey(props) {
     id
   } = props;
   const debounce = useService('debounce');
-  const path = formJsViewer.VALUES_SOURCES_PATHS[formJsViewer.VALUES_SOURCES.INPUT];
+  const path = formJsViewer.OPTIONS_SOURCES_PATHS[formJsViewer.OPTIONS_SOURCES.INPUT];
   const schema = '[\n  {\n    "label": "dollar",\n    "value": "$"\n  }\n]';
   const tooltip = jsxRuntime.jsxs("div", {
     children: ["The input property may be an array of simple values or alternatively follow this schema:", jsxRuntime.jsx("pre", {
@@ -10784,7 +11155,7 @@ function InputValuesKey(props) {
   });
 }
 
-function StaticValuesSourceEntry(props) {
+function StaticOptionsSourceEntry(props) {
   const {
     editField,
     field,
@@ -10797,10 +11168,10 @@ function StaticValuesSourceEntry(props) {
     e.stopPropagation();
     const index = values.length + 1;
     const entry = getIndexedEntry(index, values);
-    editField(field, formJsViewer.VALUES_SOURCES_PATHS[formJsViewer.VALUES_SOURCES.STATIC], arrayAdd(values, values.length, entry));
+    editField(field, formJsViewer.OPTIONS_SOURCES_PATHS[formJsViewer.OPTIONS_SOURCES.STATIC], arrayAdd(values, values.length, entry));
   };
   const removeEntry = entry => {
-    editField(field, formJsViewer.VALUES_SOURCES_PATHS[formJsViewer.VALUES_SOURCES.STATIC], minDash.without(values, entry));
+    editField(field, formJsViewer.OPTIONS_SOURCES_PATHS[formJsViewer.OPTIONS_SOURCES.STATIC], minDash.without(values, entry));
   };
   const validateFactory = (key, getValue) => {
     return value => {
@@ -10990,6 +11361,76 @@ function Readonly(props) {
   });
 }
 
+function LayouterAppearanceEntry(props) {
+  const {
+    field
+  } = props;
+  if (!['group', 'dynamiclist'].includes(field.type)) {
+    return [];
+  }
+  const entries = [simpleSelectEntryFactory({
+    id: 'verticalAlignment',
+    path: ['verticalAlignment'],
+    label: 'Vertical alignment',
+    optionsArray: [{
+      value: 'start',
+      label: 'Top'
+    }, {
+      value: 'center',
+      label: 'Center'
+    }, {
+      value: 'end',
+      label: 'Bottom'
+    }],
+    props
+  })];
+  return entries;
+}
+
+function RepeatableEntry(props) {
+  const {
+    field,
+    getService
+  } = props;
+  const {
+    type
+  } = field;
+  const formFieldDefinition = getService('formFields').get(type);
+  if (!formFieldDefinition || !formFieldDefinition.config.repeatable) {
+    return [];
+  }
+  const entries = [simpleRangeIntegerEntryFactory({
+    id: 'defaultRepetitions',
+    path: ['defaultRepetitions'],
+    label: 'Default number of items',
+    min: 0,
+    max: 20,
+    props
+  }), simpleBoolEntryFactory({
+    id: 'allowAddRemove',
+    path: ['allowAddRemove'],
+    label: 'Allow add/delete items',
+    props
+  }), simpleBoolEntryFactory({
+    id: 'disableCollapse',
+    path: ['disableCollapse'],
+    label: 'Disable collapse',
+    props
+  })];
+  if (!field.disableCollapse) {
+    const nonCollapseItemsEntry = simpleRangeIntegerEntryFactory({
+      id: 'nonCollapsedItems',
+      path: ['nonCollapsedItems'],
+      label: 'Number of non-collapsing items',
+      min: 1,
+      defaultValue: 5,
+      props
+    });
+    entries.push(nonCollapseItemsEntry);
+  }
+  return entries;
+}
+
 function ConditionEntry(props) {
   const {
     editField,
@@ -11038,7 +11479,7 @@ function Condition(props) {
   });
 }
 
-function ValuesExpressionEntry(props) {
+function OptionsExpressionEntry(props) {
   const {
     editField,
     field,
@@ -11046,13 +11487,13 @@ function ValuesExpressionEntry(props) {
   } = props;
   return [{
     id: id + '-expression',
-    component: ValuesExpression,
+    component: OptionsExpression,
     isEdited: isEdited$6,
     editField,
     field
   }];
 }
-function ValuesExpression(props) {
+function OptionsExpression(props) {
   const {
     editField,
     field,
@@ -11062,7 +11503,7 @@ function ValuesExpression(props) {
   const variables = useVariables().map(name => ({
     name
   }));
-  const path = formJsViewer.VALUES_SOURCES_PATHS[formJsViewer.VALUES_SOURCES.EXPRESSION];
+  const path = formJsViewer.OPTIONS_SOURCES_PATHS[formJsViewer.OPTIONS_SOURCES.EXPRESSION];
   const schema = '[\n  {\n    "label": "dollar",\n    "value": "$"\n  }\n]';
   const tooltip = jsxRuntime.jsxs("div", {
     children: ["The expression may result in an array of simple values or alternatively follow this schema:", jsxRuntime.jsx("pre", {
@@ -11087,97 +11528,620 @@ function ValuesExpression(props) {
   });
 }
 
-function GeneralGroup(field, editField, getService) {
-  const entries = [...IdEntry({
-    field,
-    editField
-  }), ...LabelEntry({
-    field,
-    editField
-  }), ...DescriptionEntry({
-    field,
-    editField
-  }), ...KeyEntry({
-    field,
-    editField
-  }), ...PathEntry({
-    field,
-    editField
-  }), ...GroupEntries({
-    field,
-    editField
-  }), ...DefaultOptionEntry({
-    field,
-    editField
-  }), ...ActionEntry({
-    field,
-    editField
-  }), ...DateTimeEntry({
-    field,
-    editField
-  }), ...TextEntry({
-    field,
+function TableDataSourceEntry(props) {
+  const {
     editField,
-    getService
-  }), ...IFrameUrlEntry({
-    field,
-    editField
-  }), ...IFrameHeightEntry({
-    field,
-    editField
-  }), ...HeightEntry({
-    field,
-    editField
-  }), ...NumberEntries({
-    field,
-    editField
-  }), ...SourceEntry({
-    field,
-    editField
-  }), ...AltTextEntry({
-    field,
-    editField
-  }), ...SelectEntries({
-    field,
-    editField
-  }), ...DisabledEntry({
-    field,
-    editField
-  }), ...ReadonlyEntry({
-    field,
-    editField
-  })];
-  if (entries.length === 0) {
-    return null;
-  }
-  return {
-    id: 'general',
-    label: 'General',
-    entries
-  };
+    field
+  } = props;
+  const entries = [];
+  entries.push({
+    id: 'dataSource',
+    component: Source,
+    editField: editField,
+    field: field,
+    isEdited: isEdited$6,
+    isDefaultVisible: field => field.type === 'table'
+  });
+  return entries;
 }
-
-function SerializationGroup(field, editField) {
-  const entries = [...NumberSerializationEntry({
-    field,
-    editField
-  }), ...DateTimeFormatEntry({
+function Source(props) {
+  const {
+    editField,
     field,
-    editField
-  })];
-  if (!entries.length) {
-    return null;
-  }
-  return {
-    id: 'serialization',
-    label: 'Serialization',
-    entries
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const path = ['dataSource'];
+  const getValue = () => {
+    return minDash.get(field, path, field.id);
   };
-}
-
-function ConstraintsGroup(field, editField) {
-  const entries = [...DateTimeConstraintsEntry({
-    field,
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    editField(field, path, value);
+  };
+
+  /**
+   * @param {string|void} value
+   * @returns {string|null}
+   */
+  const validate = value => {
+    if (!minDash.isString(value) || value.length === 0) {
+      return 'Must not be empty.';
+    }
+    if (value.startsWith('=')) {
+      return null;
+    }
+    if (!isValidDotPath(value)) {
+      return 'Must be a variable or a dot separated path.';
+    }
+    if (hasIntegerPathSegment(value)) {
+      return 'Must not contain numerical path segments.';
+    }
+    return null;
+  };
+  return FeelTemplatingEntry({
+    debounce,
+    description: 'Specify the source from which to populate the table',
+    element: field,
+    feel: 'required',
+    getValue,
+    id,
+    label: 'Data source',
+    tooltip: 'Enter a form input variable that contains the data for the table or define an expression to populate the data dynamically.',
+    setValue,
+    singleLine: true,
+    variables,
+    validate
+  });
+}
+
+function PaginationEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const entries = [];
+  entries.push({
+    id: 'pagination',
+    component: Pagination,
+    editField: editField,
+    field: field,
+    isEdited: isEdited$8,
+    isDefaultVisible: field => field.type === 'table'
+  });
+  return entries;
+}
+function Pagination(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const defaultRowCount = 10;
+  const path = ['rowCount'];
+  const getValue = () => {
+    return minDash.isNumber(minDash.get(field, path));
+  };
+
+  /**
+    * @param {boolean} value
+    */
+  const setValue = value => {
+    value ? editField(field, path, defaultRowCount) : editField(field, path, undefined);
+  };
+  return ToggleSwitchEntry({
+    element: field,
+    getValue,
+    id,
+    label: 'Pagination',
+    inline: true,
+    setValue
+  });
+}
+
+const path$2 = ['rowCount'];
+function RowCountEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const entries = [];
+  entries.push({
+    id: 'rowCount',
+    component: RowCount,
+    isEdited: isEdited$7,
+    editField,
+    field,
+    isDefaultVisible: field => field.type === 'table' && minDash.isNumber(minDash.get(field, path$2))
+  });
+  return entries;
+}
+function RowCount(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const getValue = () => minDash.get(field, path$2);
+
+  /**
+   * @param {number|void} value
+   * @param {string|null} error
+   * @returns {void}
+   */
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    editField(field, path$2, value);
+  };
+
+  /**
+   * @param {string|void} value
+   * @returns {string|null}
+   */
+  const validate = value => {
+    if (minDash.isNil(value)) {
+      return null;
+    }
+    if (!minDash.isNumber(value)) {
+      return 'Must be number';
+    }
+    if (!Number.isInteger(value)) {
+      return 'Should be an integer.';
+    }
+    if (value < 1) {
+      return 'Should be greater than zero.';
+    }
+    return null;
+  };
+  return NumberFieldEntry({
+    debounce,
+    label: 'Number of rows per page',
+    element: field,
+    id,
+    getValue,
+    setValue,
+    validate
+  });
+}
+
+const OPTIONS = {
+  static: {
+    label: 'List of items',
+    value: 'static'
+  },
+  expression: {
+    label: 'Expression',
+    value: 'expression'
+  }
+};
+const SELECT_OPTIONS = Object.values(OPTIONS);
+const COLUMNS_PATH = ['columns'];
+const COLUMNS_EXPRESSION_PATH = ['columnsExpression'];
+function HeadersSourceSelectEntry(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  return [{
+    id: id + '-select',
+    component: HeadersSourceSelect,
+    isEdited: isEdited$3,
+    editField,
+    field
+  }];
+}
+function HeadersSourceSelect(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+
+  /**
+   * @returns {string|void}
+   */
+  const getValue = () => {
+    const columns = minDash.get(field, COLUMNS_PATH);
+    const columnsExpression = minDash.get(field, COLUMNS_EXPRESSION_PATH);
+    if (minDash.isString(columnsExpression)) {
+      return OPTIONS.expression.value;
+    }
+    if (minDash.isArray(columns)) {
+      return OPTIONS.static.value;
+    }
+  };
+
+  /**
+   * @param {string|void} value
+   */
+  const setValue = value => {
+    switch (value) {
+      case OPTIONS.static.value:
+        editField(field, {
+          columns: [{
+            label: 'Column',
+            key: 'inputVariable'
+          }]
+        });
+        break;
+      case OPTIONS.expression.value:
+        editField(field, {
+          columnsExpression: '='
+        });
+        break;
+    }
+  };
+  const getValuesSourceOptions = () => {
+    return SELECT_OPTIONS;
+  };
+  return AutoFocusSelectEntry({
+    autoFocusEntry: getAutoFocusEntryId(field),
+    label: 'Type',
+    element: field,
+    getOptions: getValuesSourceOptions,
+    getValue,
+    id,
+    setValue
+  });
+}
+
+// helpers //////////
+
+function getAutoFocusEntryId(field) {
+  const columns = minDash.get(field, COLUMNS_PATH);
+  const columnsExpression = minDash.get(field, COLUMNS_EXPRESSION_PATH);
+  if (minDash.isString(columnsExpression)) {
+    return `${field.id}-columnsExpression`;
+  }
+  if (minDash.isArray(columns)) {
+    return `${field.id}-columns-0-label`;
+  }
+  return null;
+}
+
+const PATH = ['columnsExpression'];
+function ColumnsExpressionEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const entries = [];
+  entries.push({
+    id: `${field.id}-columnsExpression`,
+    component: ColumnsExpression,
+    editField: editField,
+    field: field,
+    isEdited: isEdited$6,
+    isDefaultVisible: field => field.type === 'table' && minDash.isString(minDash.get(field, PATH))
+  });
+  return entries;
+}
+function ColumnsExpression(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const getValue = () => {
+    return minDash.get(field, PATH);
+  };
+
+  /**
+    * @param {string|void} value
+    * @param {string|void} error
+    * @returns {void}
+    */
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    editField(field, PATH, value);
+  };
+
+  /**
+   * @param {string|void} value
+   * @returns {string|null}
+   */
+  const validate = value => {
+    if (!minDash.isString(value) || value.length === 0 || value === '=') {
+      return 'Must not be empty.';
+    }
+    return null;
+  };
+  const schema = '[\n  {\n    "key": "column_1",\n    "label": "Column 1"\n  }\n]';
+  const tooltip = jsxRuntime.jsxs("div", {
+    children: ["The expression may result in an array of simple values or alternatively follow this schema:", jsxRuntime.jsx("pre", {
+      children: jsxRuntime.jsx("code", {
+        children: schema
+      })
+    })]
+  });
+  return FeelTemplatingEntry({
+    debounce,
+    description: 'Specify an expression to populate column items',
+    element: field,
+    feel: 'required',
+    getValue,
+    id,
+    label: 'Expression',
+    tooltip,
+    setValue,
+    singleLine: true,
+    variables,
+    validate
+  });
+}
+
+const path$1 = 'columns';
+const labelPath = 'label';
+const keyPath = 'key';
+function ColumnEntry(props) {
+  const {
+    editField,
+    field,
+    idPrefix,
+    index,
+    validateFactory
+  } = props;
+  const entries = [{
+    component: Label,
+    editField,
+    field,
+    id: idPrefix + '-label',
+    idPrefix,
+    index,
+    validateFactory
+  }, {
+    component: Key,
+    editField,
+    field,
+    id: idPrefix + '-key',
+    idPrefix,
+    index,
+    validateFactory
+  }];
+  return entries;
+}
+function Label(props) {
+  const {
+    editField,
+    field,
+    id,
+    index
+  } = props;
+  const debounce = useService('debounce');
+
+  /**
+    * @param {string|void} value
+    * @param {string|void} error
+    * @returns {void}
+    */
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    const columns = minDash.get(field, [path$1]);
+    editField(field, path$1, minDash.set(columns, [index, labelPath], value));
+  };
+  const getValue = () => {
+    return minDash.get(field, [path$1, index, labelPath]);
+  };
+  return TextfieldEntry({
+    debounce,
+    element: field,
+    getValue,
+    id,
+    label: 'Label',
+    setValue
+  });
+}
+function Key(props) {
+  const {
+    editField,
+    field,
+    id,
+    index
+  } = props;
+  const debounce = useService('debounce');
+
+  /**
+    * @param {string|void} value
+    * @param {string|void} error
+    * @returns {void}
+    */
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    const columns = minDash.get(field, [path$1]);
+    editField(field, path$1, minDash.set(columns, [index, keyPath], value));
+  };
+  const getValue = () => {
+    return minDash.get(field, [path$1, index, keyPath]);
+  };
+  return TextfieldEntry({
+    debounce,
+    element: field,
+    getValue,
+    id,
+    label: 'Key',
+    setValue,
+    validate
+  });
+}
+
+// helpers //////////////////////
+
+/**
+  * @param {string|void} value
+  * @returns {string|null}
+  */
+function validate(value) {
+  if (!minDash.isString(value) || value.length === 0) {
+    return 'Must not be empty.';
+  }
+  return null;
+}
+
+const path = ['columns'];
+function StaticColumnsSourceEntry(props) {
+  const {
+    editField,
+    field,
+    id: idPrefix
+  } = props;
+  const {
+    columns
+  } = field;
+  const addEntry = event => {
+    event.stopPropagation();
+    const entry = {
+      label: 'Column',
+      key: 'inputVariable'
+    };
+    editField(field, path, arrayAdd(columns, columns.length, entry));
+  };
+  const removeEntry = entry => {
+    editField(field, path, minDash.without(columns, entry));
+  };
+  const items = columns.map((entry, index) => {
+    const id = `${idPrefix}-${index}`;
+    return {
+      id,
+      label: entry.label || entry.key,
+      entries: ColumnEntry({
+        editField,
+        field,
+        idPrefix: id,
+        index
+      }),
+      autoFocusEntry: `${id}-label`,
+      remove: () => removeEntry(entry)
+    };
+  });
+  return {
+    items,
+    add: addEntry,
+    shouldSort: false
+  };
+}
+
+function GeneralGroup(field, editField, getService) {
+  const entries = [...IdEntry({
+    field,
+    editField
+  }), ...LabelEntry({
+    field,
+    editField
+  }), ...DescriptionEntry({
+    field,
+    editField
+  }), ...KeyEntry({
+    field,
+    editField,
+    getService
+  }), ...PathEntry({
+    field,
+    editField,
+    getService
+  }), ...RepeatableEntry({
+    field,
+    editField,
+    getService
+  }), ...DefaultOptionEntry({
+    field,
+    editField
+  }), ...ActionEntry({
+    field,
+    editField
+  }), ...DateTimeEntry({
+    field,
+    editField
+  }), ...TextEntry({
+    field,
+    editField,
+    getService
+  }), ...IFrameUrlEntry({
+    field,
+    editField
+  }), ...IFrameHeightEntry({
+    field,
+    editField
+  }), ...HeightEntry({
+    field,
+    editField
+  }), ...NumberEntries({
+    field,
+    editField
+  }), ...SourceEntry({
+    field,
+    editField
+  }), ...AltTextEntry({
+    field,
+    editField
+  }), ...SelectEntries({
+    field,
+    editField
+  }), ...DisabledEntry({
+    field,
+    editField
+  }), ...ReadonlyEntry({
+    field,
+    editField
+  }), ...TableDataSourceEntry({
+    field,
+    editField
+  }), ...PaginationEntry({
+    field,
+    editField
+  }), ...RowCountEntry({
+    field,
+    editField
+  })];
+  if (entries.length === 0) {
+    return null;
+  }
+  return {
+    id: 'general',
+    label: 'General',
+    entries
+  };
+}
+
+function SerializationGroup(field, editField) {
+  const entries = [...NumberSerializationEntry({
+    field,
+    editField
+  }), ...DateTimeFormatEntry({
+    field,
+    editField
+  })];
+  if (!entries.length) {
+    return null;
+  }
+  return {
+    id: 'serialization',
+    label: 'Serialization',
+    entries
+  };
+}
+
+function ConstraintsGroup(field, editField) {
+  const entries = [...DateTimeConstraintsEntry({
+    field,
     editField
   })];
   if (!entries.length) {
@@ -11436,67 +12400,66 @@ function ValidationType(props) {
   });
 }
 
-function ValuesGroups(field, editField, getService) {
+function OptionsGroups(field, editField, getService) {
   const {
-    type,
-    id: fieldId
+    type
   } = field;
   const formFields = getService('formFields');
   const fieldDefinition = formFields.get(type).config;
-  if (!VALUES_INPUTS.includes(type) && !hasValuesGroupsConfigured(fieldDefinition)) {
+  if (!OPTIONS_INPUTS.includes(type) && !hasOptionsGroupsConfigured(fieldDefinition)) {
     return [];
   }
   const context = {
     editField,
     field
   };
-  const valuesSourceId = `${fieldId}-valuesSource`;
+  const id = 'valuesSource';
 
   /**
    * @type {Array<Group|ListGroup>}
    */
   const groups = [{
-    id: valuesSourceId,
+    id,
     label: 'Options source',
     tooltip: getValuesTooltip(),
     component: Group,
-    entries: ValuesSourceSelectEntry({
+    entries: OptionsSourceSelectEntry({
       ...context,
-      id: valuesSourceId
+      id
     })
   }];
-  const valuesSource = formJsViewer.getValuesSource(field);
-  if (valuesSource === formJsViewer.VALUES_SOURCES.INPUT) {
-    const dynamicValuesId = `${fieldId}-dynamicValues`;
+  const valuesSource = formJsViewer.getOptionsSource(field);
+  if (valuesSource === formJsViewer.OPTIONS_SOURCES.INPUT) {
+    const id = 'dynamicOptions';
     groups.push({
-      id: dynamicValuesId,
+      id,
       label: 'Dynamic options',
       component: Group,
-      entries: InputKeyValuesSourceEntry({
+      entries: InputKeyOptionsSourceEntry({
         ...context,
-        id: dynamicValuesId
+        id
       })
     });
-  } else if (valuesSource === formJsViewer.VALUES_SOURCES.STATIC) {
-    const staticValuesId = `${fieldId}-staticValues`;
+  } else if (valuesSource === formJsViewer.OPTIONS_SOURCES.STATIC) {
+    const id = 'staticOptions';
     groups.push({
-      id: staticValuesId,
+      id,
       label: 'Static options',
       component: ListGroup,
-      ...StaticValuesSourceEntry({
+      ...StaticOptionsSourceEntry({
         ...context,
-        id: staticValuesId
+        id
       })
     });
-  } else if (valuesSource === formJsViewer.VALUES_SOURCES.EXPRESSION) {
-    const valuesExpressionId = `${fieldId}-valuesExpression`;
+  } else if (valuesSource === formJsViewer.OPTIONS_SOURCES.EXPRESSION) {
+    const id = 'optionsExpression';
     groups.push({
-      id: valuesExpressionId,
+      id,
       label: 'Options expression',
       component: Group,
-      entries: ValuesExpressionEntry({
+      entries: OptionsExpressionEntry({
         ...context,
-        id: valuesExpressionId
+        id
       })
     });
   }
@@ -11546,7 +12509,7 @@ function CustomPropertiesGroup(field, editField) {
       event.stopPropagation();
       return editField(field, ['properties'], removeKey(properties, key));
     };
-    const id = `${field.id}-property-${index}`;
+    const id = `property-${index}`;
     return {
       autoFocusEntry: id + '-key',
       entries: CustomValueEntry({
@@ -11595,10 +12558,16 @@ function removeKey(properties, oldKey) {
   }, {});
 }
 
-function AppearanceGroup(field, editField) {
+function AppearanceGroup(field, editField, getService) {
   const entries = [...AdornerEntry({
     field,
     editField
+  }), ...GroupAppearanceEntry({
+    field,
+    editField
+  }), ...LayouterAppearanceEntry({
+    field,
+    editField
   })];
   if (!entries.length) {
     return null;
@@ -11649,6 +12618,55 @@ function ConditionGroup(field, editField) {
   };
 }
 
+function TableHeaderGroups(field, editField) {
+  const {
+    type,
+    id: fieldId
+  } = field;
+  if (type !== 'table') {
+    return [];
+  }
+  const areStaticColumnsEnabled = minDash.isArray(minDash.get(field, ['columns']));
+
+  /**
+    * @type {Array<Group>}
+    */
+  const groups = [{
+    id: `${fieldId}-columnsSource`,
+    label: 'Headers source',
+    tooltip: TOOLTIP_TEXT,
+    component: Group,
+    entries: [...HeadersSourceSelectEntry({
+      field,
+      editField
+    }), ...ColumnsExpressionEntry({
+      field,
+      editField
+    })]
+  }];
+  if (areStaticColumnsEnabled) {
+    const id = `${fieldId}-columns`;
+    groups.push({
+      id,
+      label: 'Header items',
+      component: ListGroup,
+      ...StaticColumnsSourceEntry({
+        field,
+        editField,
+        id
+      })
+    });
+  }
+  return groups;
+}
+
+// helpers //////////
+
+const TOOLTIP_TEXT = `"List of items" defines a constant, predefined set of form options.
+
+"Expression" defines options that are populated from a FEEL expression.
+`;
+
 class PropertiesProvider {
   constructor(propertiesPanel, injector) {
     this._injector = injector;
@@ -11684,7 +12702,7 @@ class PropertiesProvider {
         return groups;
       }
       const getService = (type, strict = true) => this._injector.get(type, strict);
-      groups = [...groups, GeneralGroup(field, editField, getService), ConditionGroup(field, editField), LayoutGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ...ValuesGroups(field, editField, getService), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomPropertiesGroup(field, editField)].filter(group => group != null);
+      groups = [...groups, GeneralGroup(field, editField, getService), ...TableHeaderGroups(field, editField), ConditionGroup(field, editField), LayoutGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ...OptionsGroups(field, editField, getService), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomPropertiesGroup(field, editField)].filter(group => group != null);
       this._filterVisibleEntries(groups, field, getService);
 
       // contract: if a group has no entries or items, it should not be displayed at all
@@ -11750,6 +12768,58 @@ var RenderInjectionModule = {
   renderInjector: ['type', RenderInjector]
 };
 
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgRepeat = function SvgRepeat(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M3 3h10.086l-1.793-1.793L12 .5l3 3-3 3-.707-.707L13.086 4H3v3.5H2V4a1.001 1.001 0 0 1 1-1ZM4.707 10.207 2.914 12H13V8.5h1V12a1.002 1.002 0 0 1-1 1H2.914l1.793 1.793L4 15.5l-3-3 3-3 .707.707Z"
+  })));
+};
+var RepeatSvg = SvgRepeat;
+
+class RepeatRenderManager {
+  constructor(formFields, formFieldRegistry) {
+    this._formFields = formFields;
+    this._formFieldRegistry = formFieldRegistry;
+    this.RepeatFooter = this.RepeatFooter.bind(this);
+  }
+
+  /**
+   * Checks whether a field should be repeatable.
+   *
+   * @param {string} id - The id of the field to check
+   * @returns {boolean} - True if repeatable, false otherwise
+   */
+  isFieldRepeating(id) {
+    if (!id) {
+      return false;
+    }
+    const formField = this._formFieldRegistry.get(id);
+    const formFieldDefinition = this._formFields.get(formField.type);
+    return formFieldDefinition.config.repeatable && formField.isRepeating;
+  }
+  RepeatFooter() {
+    return jsxRuntime.jsxs("div", {
+      className: "fjs-repeat-render-footer",
+      children: [jsxRuntime.jsx(RepeatSvg, {}), jsxRuntime.jsx("span", {
+        children: "Repeatable"
+      })]
+    });
+  }
+}
+RepeatRenderManager.$inject = ['formFields', 'formFieldRegistry'];
+
+var RepeatRenderManagerModule = {
+  __init__: ['repeatRenderManager'],
+  repeatRenderManager: ['type', RepeatRenderManager]
+};
+
 class EditorTemplating {
   // same rules as viewer templating
   isTemplate(value) {
@@ -12021,7 +13091,7 @@ class FormEditor {
    * @internal
    */
   _getModules() {
-    return [ModelingModule, EditorActionsModule, DraggingModule, KeyboardModule, SelectionModule, PaletteModule, ExpressionLanguageModule, formJsViewer.MarkdownModule, PropertiesPanelModule, RenderInjectionModule];
+    return [ModelingModule, EditorActionsModule, DraggingModule, KeyboardModule, SelectionModule, PaletteModule, ExpressionLanguageModule, formJsViewer.MarkdownModule, PropertiesPanelModule, RenderInjectionModule, RepeatRenderManagerModule];
   }
 
   /**