Adobe Commerce 2.3 reached end of support in September 2022.

DynamicRowsDragAndDrop component

The DynamicRowsDragAndDrop component is an extension for DynamicRows, allowing users to change column position in the table.

Configuration options

Option Description Type Default Value
component The path to the component’s .js file in terms of RequireJS. String 'Magento_Ui/js/dynamic-rows/dnd'
draggableElement The dragged HTML element. Object {}
draggableElementClass The class adds to the dragged element. String '_dragged'
enabled Whether the component is allowed to change the position of columns. Boolean true
name The name of the component in the registry. Boolean '${ $.name }_dnd'
recordsCache The array of cached records. Array []
recordsProvider The path in the registry to the linked records provider. String '${ $.name }'
separatorsClass The object with class separators for top and bottom positions. Object {top: '_dragover-top', bottom: '_dragover-bottom'}
tableClass The selector of the DynamicRows table HTML element. String table.admin__dynamic-rows
template Path to the component’s .html template. String 'ui/dynamic-rows/cells/dnd'

Sources files

Extends UiElement:

Examples

Integrate the DynamicRowsDragAndDrop component with the DynamicRows component

This is an example of how the DynamicRowsDragAndDrop component integrates with the DynamicRows component:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<dynamicRows name="dynamic_rows">
    <settings>
        <addButtonLabel translate="true">Add Record</addButtonLabel>
        <dndConfig>
            <param name="enabled" xsi:type="boolean">true</param>
            <param name="draggableElementClass" xsi:type="string">_dragged</param>
            <param name="tableClass" xsi:type="string">table.admin__dynamic-rows</param>
        </dndConfig>
    </settings>
    <container name="record" component="Magento_Ui/js/dynamic-rows/record">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="isTemplate" xsi:type="boolean">true</item>
                <item name="is_collection" xsi:type="boolean">true</item>
                <item name="componentType" xsi:type="string">container</item>
            </item>
        </argument>
        <field name="field" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="fit" xsi:type="boolean">false</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <dataType>text</dataType>
                <label>Field</label>
            </settings>
        </field>
    </container>
</dynamicRows>

Result

DynamicRowsDragAndDrop Component example

Disable the DynamicRowsDragAndDrop component on the DynamicRows component

This is an example of how the DynamicRowsDragAndDrop component disables the DynamicRows component:

1
2
3
4
5
6
7
8
9
10
11
<dynamicRows name="dynamic_rows">
    <settings>
        ...
        <dndConfig>
            <param name="enabled" xsi:type="boolean">false</param>
        </dndConfig>
    </settings>
    <container name="record" component="Magento_Ui/js/dynamic-rows/record">
        ...
    </container>
</dynamicRows>