Thanks to Atwix for contributing this topic!

DynamicRowsDragAndDrop component

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

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

Integration

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

<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>
Copied to your clipboard
<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

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

<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>
Copied to your clipboard
<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>