PHP 7.3 reaches end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in April 2022. We
strongly recommend planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.
DragAndDrop component
The DragAndDrop component is an extension for Columns, allowing users to change columns position in the table.
Configuration options
| Option | Description | Type | Default Value |
|---|---|---|---|
enabled |
Whether the component is allowed to change the position of columns. | Boolean | true |
fixedX |
Whether the column has a fixed position on the X-axis. That is, whether it can be moved horizontally. | Boolean | false |
fixedY |
Whether the column has a fixed position on the Y-axis. That is, whether it can be moved vertically. | Boolean | true |
noSelectClass |
CSS class applied to the table when one of its columns is being dragged. | String | '_no-select' |
Source files
Extends UiCollection:
Examples
Integrate the DragAndDrop component with the Listing component
This example configures the DragAndDrop component for the Columns component and integrates it with the Listing component:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<listing>
...
<columns>
<settings>
<dndConfig>
<param name="enabled" xsi:type="boolean">true</param>
<param name="fixedX" xsi:type="boolean">false</param>
<param name="fixedY" xsi:type="boolean">true</param>
<param name="noSelectClass" xsi:type="string">_no-select</param>
</dndConfig>
</settings>
...
</columns>
</listing>
Result
Disable the DragAndDrop component for the Columns component
This example disables the DragAndDrop component for the Columns component and integrates it with the Listing component:
1
2
3
4
5
6
7
8
9
10
11
<listing>
...
<columns>
<settings>
<dndConfig>
<param name="enabled" xsi:type="boolean">false</param>
</dndConfig>
</settings>
...
</columns>
</listing>