DragAndDrop component

The DragAndDrop component is an extension for Columns, allowing users to change columns position in the table.

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

Integration

This example configures the DragAndDrop component for the Columns component and integrates it with the Listing component:

<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

DateColumn Component Example

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:

<listing>
    ...
    <columns>
        <settings>
            <dndConfig>
                <param name="enabled" xsi:type="boolean">false</param>
            </dndConfig>
        </settings>
        ...
    </columns>
</listing>