Overview

The Reorderable Drag-and-Drop List widget by Intelizign is a powerful, interactive component that allows users to reorder items within a list by simply dragging and dropping them. This feature is ideal for applications where users need to customize the order of items dynamically, such as task management apps, to-do lists, or customizable dashboards. 

A Reorderable Drag-and-Drop List widget that allows users to drag-and-drop rows to change their order. This also includes dynamic column visibility controls and saves the new order to the Mendix database.

Documentation

Reorderable Drag-Drop List

The Reorderable List is a React-based Mendix widget that renders a draggable list of items based on an input entity collection. It allows users to:

• Sort items via drag-and-drop using SortableJS.
• Save the new order to the database (using an Index attribute).
• Dynamically toggle the visibility of data columns.
• Customize whether table headers are shown.

Features

• Drag-and-drop list reordering.
• Index-based sorting (descending).
• Persist updated order to Mendix database.
• Dynamic column visibility toggling.
• Optional table headers.

Requirements

• Mendix version: 9.18.0+
• Required attribute on the input entity: Index (used to determine order).
• This widget expects the input entity to be a list of objects.

Installation

1. Import the widget into your Mendix project.
2. Drag and drop the widget onto a page.
3. Configure the Datasource and other properties in the widget settings.

Widget Configuration

Datasource

• Type: Object
• Required: Yes
• Description: A data object containing the list of items.

includeHeaders

• Type: Boolean
• Optional: Yes
• Default Value: true

Interactions

Drag & Drop

• Rows can be reordered using drag handles (☰ icon).
• The drag operation reorders the in-memory list.

Save Order

• Clicking the Save Order button updates the Index attribute of each object and commits them via Mendix API.

Notes & Limitations

• The widget assumes each object has a unique Index attribute.
• You should ensure Index is updated and committed as part of the domain model.
• Make sure the entity passed has all necessary attributes exposed to the client.
• The widget works on arrays — ensure the data source is properly formatted before passing it in.

License

License This widget is released under the Intelizign EULA . See license details - Intelizign EULA