Table component first check in by armaang1729 · Pull Request #1879 · adobe/aem-core-forms-components

armaang1729 · 2026-05-11T11:14:19Z

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

I have signed the Adobe Open Source CLA.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have read the CONTRIBUTING document.
I have added tests to cover my changes and the overall coverage did not decrease.
All unit tests pass on CircleCi.
I ran all tests locally and they pass.

adobe-bot · 2026-05-12T05:23:02Z

Accessibility Violations Found

Id	Impact
aria-required-attr	critical
empty-heading	minor
label-title-only	serious
page-has-heading-one	moderate
target-size	serious

adobe-bot · 2026-05-12T05:43:15Z

Accessibility Violations Found

Id	Impact
aria-required-attr	critical
empty-heading	minor
label-title-only	serious
target-size	serious

adobe-bot · 2026-05-13T07:32:10Z

Accessibility Violations Found

Id	Impact
aria-required-attr	critical
empty-heading	minor
label-title-only	serious
target-size	serious

codecov · 2026-05-19T05:57:40Z

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

armaang1729 · 2026-05-19T06:04:07Z

        'checkbox-group': fieldTypes.SELECT,
        'checkbox': fieldTypes.CHECKBOX,
        'date-input': fieldTypes.TEXT,
+        'datetime-input': fieldTypes.TEXT,


Previously, the replace dialog restricted targets to the same typeMap family (e.g. text-input could only be replaced with TEXT-family components). This was too limiting inside table row cells where any policy-allowed component should be swappable.

Changes:

isUnderCoreTableRow: detects when the editable is inside a table row/header and skips the type-family check entirely for those cells.

buildAllowedTemplatePathSet: still enforces the parent container's policy, so only components the row actually allows appear in the list.

getTemplateFieldType + null guard: fixes a crash when a component's .json omits fieldType — now falls back to model.json.

Added datetime-input and multiline-input to typeMap so they match correctly in standard (non-table) replace flows.

adobe-bot · 2026-05-19T06:25:47Z

Accessibility Violations Found

Id	Impact
aria-required-attr	critical
empty-heading	minor
label-title-only	serious
target-size	serious

adobe-bot · 2026-05-19T06:27:53Z

Accessibility Violations Found

Id	Impact
aria-required-attr	critical
empty-heading	minor
label-title-only	serious
target-size	serious

armaang1729 · 2026-05-19T09:53:15Z

@@ -0,0 +1,1108 @@
+/*******************************************************************************


Author-side editor hook for the core table component. Powers all structural editing actions on a table in the AEM page editor — add/delete/reorder rows, add/delete columns, and merge/split header cells — by making Sling POST requests to manipulate JCR nodes directly and refreshing the table editable. Also patches the AEM overlay renderer to correctly position edit overlays on <tr> elements, which can get misplaced due to browser foster-parenting of table markup.

armaang1729 · 2026-05-19T10:14:38Z


+    /**
+     * Table row cells must not expose the standard Delete action (row/column flows handle structure).
+     * @param {Granite.author.Editable} editable


Table row cells must not expose the standard Delete action like normal components. The rows must be deleted through the delete row option added in the edit config of the table row.

adobe-bot · 2026-05-19T11:13:01Z

Accessibility Violations Found

Id	Impact
aria-required-attr	critical
empty-heading	minor
label-title-only	serious
page-has-heading-one	moderate
target-size	serious

adobe-bot · 2026-05-19T11:13:18Z

Accessibility Violations Found

Id	Impact
aria-required-attr	critical
empty-heading	minor
label-title-only	serious
target-size	serious

adobe-bot · 2026-05-19T11:14:45Z

Accessibility Violations Found

Id	Impact
aria-required-attr	critical
empty-heading	minor
label-title-only	serious
target-size	serious

adobe-bot · 2026-05-19T11:15:54Z

Accessibility Violations Found

Id	Impact
aria-required-attr	critical
empty-heading	minor
label-title-only	serious
page-has-heading-one	moderate
target-size	serious

armaang1729 · 2026-05-20T05:36:25Z

@@ -0,0 +1,233 @@
+/*******************************************************************************


tableview.js — purpose

This file is the runtime view for the Adaptive Form Table component. It has three responsibilities:

Row insertion () — inserts a cloned <tr> into the correct <tbody> position using the row model's index. Handles three cases: empty tbody (append), index 0 (prepend before the first sibling), and mid-list (insert after the preceding sibling resolved by model index).

Hook attribute patching (#syncTableRowHooks) — FormView.Utils.updateId patches element id attributes on cloned nodes but does not touch data-cmp-hook-* attributes. Without this step, cloned add/remove buttons retain the template row's stale ID, causing every dynamically-added row to dispatch the wrong model index. This method re-stamps data-cmp-hook-add-instance and data-cmp-hook-remove-instance with the newly assigned model ID immediately after insertion.

min/maxOccur enforcement (#syncTableRowRepeatableControls) — after every addition or removal, walks every live row and sets data-cmp-visible on its add and remove buttons according to the instance manager's current item count vs. minOccur/maxOccur. A maxOccur of -1 means unbounded; minOccur of -1 means no floor.

armaang1729 · 2026-05-20T06:44:49Z

                handler="CQ.FormsCoreComponents.editorhooks.viewQualifiedName"
                icon="viewSOMExpression"
                text="View Qualified Name"/>
+        <addcolumn


Added addColumn and deleteColumn option in the text editconfig as the option to add column and delete will be displayed when the column cell is clicked which will be a text component so added a condition isCoreTableHeaderCell(editable) to display this option.

armaang1729

Inline comments explaining the key changes in FormPanel.js, InstanceManager.js, and utils.js.

armaang1729 · 2026-05-20T09:43:29Z

+     * @returns {HTMLElement|undefined}
+     */
+    getRepeatableInstancesContainerElement() {
+        return this.element.parentElement?.parentElement;


New virtual hook that returns the DOM container holding all sibling repeat instances. The default (parentElement?.parentElement) covers the standard Sling-wrapped panel structure. Subclasses like TableRow override this to return <tbody> instead, since a <tr> sits at a different nesting depth. instantiateInstanceManager() reads this so InstanceManager knows where to append/insert cloned instances.

armaang1729 · 2026-05-20T09:43:29Z

+     * @returns {HTMLElement|undefined}
+     */
+    getRepeatableDomWrapper() {
+        return this.element.parentElement;


Virtual hook that returns the node to clone as the repeat template and to remove when an instance is deleted. Default is parentElement (the Sling wrapper div). TableRow overrides this to return the <tr> itself. Without this hook, updateTemplate and handleRemoval in InstanceManager would always clone/remove the wrong element for table rows.

armaang1729 · 2026-05-20T09:43:29Z

         this.markerElement = markerElement;
         **/
+        const wrapper = (typeof childView.getRepeatableDomWrapper === "function")
+            ? childView.getRepeatableDomWrapper()


Uses the view's declared wrapper node (e.g. <tr> for a table row) instead of always parentElement. Cloning the wrong node would produce a template with a mismatched tag that breaks table structure when inserted into <tbody>.

armaang1729 · 2026-05-20T09:43:29Z

        }
-        return this.handleAddition(addedModel, beforeElement);
+        const addedHtmlElement = this.handleAddition(addedModel, beforeElement);
+        if (addedHtmlElement) {


createFieldsForAddedElement was previously called in two separate branches of #syncViewModel. Consolidating it here means any path through #addChildInstance automatically gets field initialization — no risk of a future caller forgetting it.

armaang1729 · 2026-05-20T09:43:29Z

+            return;
+        }
+        let removedChildView = this.children.find((cv) => cv && cv.getId() === removedModel.id);
+        if (!removedChildView && typeof removedModel.index === "number" && removedModel.index >= 0


Changed from index-based to id-based lookup because model.index can be stale after a prior remove shifts the children array. The index fallback is kept only for cases where the view hasn't been registered by id yet (e.g. prefill-removed instances). this.children.indexOf(removedChildView) at the end re-derives the live array position rather than trusting the model value.

armaang1729 · 2026-05-20T09:43:29Z

-        //removing just the parent view HTML child instance, to avoid repainting of UI for removal of each child HTML
-        removedInstanceView.element.parentElement.remove();
+        let toRemove;
+        if (typeof removedInstanceView.getRepeatableDomWrapper === "function") {


Delegates to getRepeatableDomWrapper so the correct node (e.g. the whole <tr>) is removed. Without this, removing a table row would call .remove() on a <div> wrapper that doesn't exist in the DOM, silently doing nothing.

armaang1729 · 2026-05-20T09:43:29Z

-            const fieldElements = addedElement.querySelectorAll(fieldCreatorSet['fieldSelector']);
+            const fieldElements = Array.from(addedElement.querySelectorAll(fieldCreatorSet['fieldSelector']));
+            if (addedElement.matches && addedElement.matches(fieldCreatorSet['fieldSelector'])) {
+                fieldElements.unshift(addedElement);


querySelectorAll only searches descendants — it never matches the element itself. When addedElement is a <tr data-cmp-is="adaptiveFormTableRow">, the existing call returned nothing and the row's view was never created. The matches check at the root fixes this for any component whose outermost element carries data-cmp-is.

armaang1729 · 2026-05-20T09:43:29Z

     */
    static #removeChildReferences(fieldView, formContainer) {
+        if (!fieldView) {
+            return;


Null guard added so a missing fieldView exits early instead of throwing on fieldView.children.

armaang1729 · 2026-05-20T09:43:29Z

            for (let index = 0; index < childViewList.length; index++) {
-                Utils.#removeChildReferences(childViewList[index]);
+                Utils.#removeChildReferences(childViewList[index], formContainer);
            }


The recursive call was previously missing formContainer, so it received undefined and silently skipped #removeFieldId for all grandchild views. Deep nested panels (e.g. a panel inside a repeatable table row) would leak their field references in the form container's field map.

armaang1729 · 2026-05-20T09:43:29Z

     */
    static updateId(htmlElement, oldId, newId) {
+        if (htmlElement.id === oldId) {
+            htmlElement.id = newId;


Same root vs. descendants issue as createFieldsForAddedElement. When htmlElement is the cloned <tr> and its id needs to be swapped, querySelectorAll('#oldId') finds nothing because it only searches children. The early return on a direct id match handles this before falling through to the descendant search.

armaang1729

Inline comments for tablerowview.js and repeatable.updatelabel.cy.js

armaang1729 · 2026-05-20T09:47:31Z

+         * @returns {HTMLElement}
+         */
+        getRepeatableDomWrapper() {
+            const parent = this.element.parentElement;


This is the consumer of the virtual hook defined in FormPanel. The check for bemBlock on parentElement handles the edit-mode case where Sling wraps the <tr> in a <div class="cmp-adaptiveform-tablerow"> for the authoring overlay. In publish mode the <tr> has no such wrapper, so this.element (the <tr> itself) is returned directly. InstanceManager uses this for both cloning the template and tearing down removed rows.

armaang1729 · 2026-05-20T09:47:31Z

+         * @returns {HTMLElement}
+         */
+        getRepeatableInstancesContainerElement() {
+            const tableBody = this.element.closest(".cmp-adaptiveform-table__body") ||


Returns <tbody> as the container so InstanceManager.handleAddition inserts cloned rows into the right parent. Using closest handles both the semantic <tbody class="cmp-adaptiveform-table__body"> and any fallback structure, with parentElement as a last resort to stay consistent with the base class default.

armaang1729 · 2026-05-20T09:47:31Z

+         * @param {Object} label - The label state object.
+         */
+        updateLabel(label) {
+            // Table rows don't have visible labels, so this is a no-op


No-op intentionally — table rows have no visible label of their own (column headers are owned by tableheader). Without this override, applyState would call the base class updateLabel which would try to update a non-existent label DOM element.

armaang1729 · 2026-05-20T09:47:31Z

+         * @param {Object} state - The state to be applied.
+         */
+        applyState(state) {
+            this.updateVisible(state.visible);


Matches the FormPanel.applyState signature but explicitly skips anything table-row-irrelevant (e.g. updateLabel is a no-op here). Calling initializeHelpContent is kept because a row's visibility/enabled state still drives data-cmp-visible / data-cmp-enabled attributes that the rules engine reads.

armaang1729 · 2026-05-20T09:47:31Z

+    }
+
+    FormView.Utils.setupField(({element, formContainer}) => {
+        return new TableRow({element, formContainer})


Registers TableRow as the view for all elements matching [data-cmp-is="adaptiveFormTableRow"]. This is the standard FormView.Utils.setupField pattern — it both creates the view for elements already in the DOM and wires up the mutation observer so dynamically added rows (repeat add) are initialized automatically.

armaang1729 · 2026-05-20T09:47:31Z

-                    checkLabelText(textinputid11, panelid11, 'Text Input2', 'Panel2');
+                // find Panel[1]'s remove button by its model index
+                const removeBtn1 = Object.values(formContainer._fields).find(f =>
+                    f.getModel &&


Previous code used a hardcoded _fields array index to find the remove button, which broke after the instance removal logic was changed to id-based lookup (the field map order is no longer guaranteed to match insertion order). This change finds the remove button by inspecting the model — specifically the parent panel's index === 1 — making the test resilient to field map reordering.

armaang1729 · 2026-05-20T09:47:31Z

+                cy.get(`#${removeBtn1.getId()}`).find("button").click().then(() => {
+                    // after Panel[1] removed, find the surviving panel at index 1 by model
+                    const panel1remaining = Object.values(formContainer._fields).find(f =>
+                        f.getModel &&


After removal, the surviving panel at model index === 1 and its child text input are located dynamically rather than by a fixed _fields position. This is necessary because #removeChildInstance now splices by the live array index, which can shift the order of remaining entries in formContainer._fields.

… dependencies which are declared in the content.xml

… present

…correctly here

…i for now

… table header

adobe-bot · 2026-05-20T10:58:03Z

Accessibility Violations Found

Id	Impact
aria-required-attr	critical
empty-heading	minor
label-title-only	serious
page-has-heading-one	moderate
target-size	serious

adobe-bot · 2026-05-20T10:58:48Z

Accessibility Violations Found

Id	Impact
aria-required-attr	critical
empty-heading	minor
label-title-only	serious
page-has-heading-one	moderate
target-size	serious

adobe-bot · 2026-05-20T10:59:15Z

Accessibility Violations Found

Id	Impact
aria-required-attr	critical
empty-heading	minor
label-title-only	serious
target-size	serious

adobe-bot · 2026-05-20T10:59:47Z

Accessibility Violations Found

Id	Impact
aria-required-attr	critical
empty-heading	minor
label-title-only	serious
target-size	serious

adobe-bot · 2026-05-20T11:04:38Z

Accessibility Violations Found

Id	Impact
aria-required-attr	critical
empty-heading	minor
label-title-only	serious
page-has-heading-one	moderate
target-size	serious

adobe-bot · 2026-05-20T11:04:59Z

Accessibility Violations Found

Id	Impact
aria-required-attr	critical
empty-heading	minor
label-title-only	serious
target-size	serious

armaang1729 added the work in progress label May 15, 2026

iamsudhanshu reviewed May 15, 2026

View reviewed changes

Comment thread .../main/content/jcr_root/apps/forms-components-examples/components/form/table/_cq_template.xml Outdated

armaang1729 commented May 19, 2026

View reviewed changes

github-actions Bot force-pushed the tableComponentFirstCheckIn branch from 552a08c to e878597 Compare May 19, 2026 10:37

armaang1729 commented May 20, 2026

View reviewed changes

armaang1729 force-pushed the tableComponentFirstCheckIn branch from e878597 to 90ced91 Compare May 20, 2026 10:21

github-actions Bot force-pushed the tableComponentFirstCheckIn branch from 90ced91 to 16d7af4 Compare May 20, 2026 10:21

Armaan Gupta added 8 commits May 20, 2026 15:54

added basic config files for the table component

04b5237

added .content.xml for the table component

610f333

added edit toolbar for the table component _cq_editConfig.xml

90b7378

added table.html

f6f559a

added basic css and js for the table authoring currently refering the…

a9bf21c

… dependencies which are declared in the content.xml

added site clientlibs for the table component

ede462e

added basic config files for the tableheader

09fb1d5

added basic config files for the tablerow

3c8b01c

Armaan Gupta added 23 commits May 20, 2026 15:54

removed cell numbers from dynamic addition of the table cols and rows

cc38115

added the feature of repeatable panels to the table row at runtime

92f0c36

added the replace feature for the tablecell to any component which is…

8d2c91f

… present

removed the delete options from the table cells in the table row

739b7e9

in this commit table tags have gone -> repeatable panels not working …

f5df9d5

…correctly here

added files to fix the repeatative panels with the table tags

037803e

fixed the repeatable rows with indexing

20e8cc9

changed the authoring from divs to tabletags sacirificing the touch u…

75fe4f1

…i for now

fixed the touch ui with the table tags

197f472

fixed the tablecell css having controls

ac6cd77

removed the tableeditor.css file

8afa75a

added replace feature to the components of the table Header also

2d4d4e0

fixed the refresh issue by adding authoring dialogs for table row and…

f54d589

… table header

added cypress tests and collaterals for testing

8cd726e

added sling folder for collaterals

9a40d91

fixed the test cases

e0d79e5

fixed the content.xml

28eb19c

fixed the failing testcases

691a66b

updated the year to 2026

11d8f89

fixed the short and long description for the table component

ff1b504

removed unsupported authoring from the table component

07fb3c6

refactored the table.html

205b37a

updated README for the table Component

3db51ce

armaang1729 force-pushed the tableComponentFirstCheckIn branch from 16d7af4 to 3db51ce Compare May 20, 2026 10:26

		@@ -0,0 +1,1108 @@
		/*******************************************************************************

		@@ -0,0 +1,233 @@
		/*******************************************************************************

Conversation

armaang1729 commented May 11, 2026

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Checklist:

Uh oh!

adobe-bot commented May 12, 2026

Accessibility Violations Found

Uh oh!

adobe-bot commented May 12, 2026

Accessibility Violations Found

Uh oh!

adobe-bot commented May 13, 2026

Accessibility Violations Found

Uh oh!

Uh oh!

codecov Bot commented May 19, 2026

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adobe-bot commented May 19, 2026

Accessibility Violations Found

Uh oh!

adobe-bot commented May 19, 2026

Accessibility Violations Found

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adobe-bot commented May 19, 2026

Accessibility Violations Found

Uh oh!

adobe-bot commented May 19, 2026

Accessibility Violations Found

Uh oh!

adobe-bot commented May 19, 2026

Accessibility Violations Found

Uh oh!

adobe-bot commented May 19, 2026

Accessibility Violations Found

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

armaang1729 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

armaang1729 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment