UI Grid Draggable Rows

Overview

The ui-grid draggable rows plugin is a powerful addition to any Angular application that utilizes the ui-grid framework, allowing for a seamless HTML5 drag and drop experience. Whether you're building a complex data table or a simple grid, this plugin enhances user interactivity by enabling dynamic row manipulation. With its straightforward implementation and extensive event handling, developers can easily incorporate drag-and-drop capabilities into their projects.

This plugin not only improves user experience but also adds functionality that is often expected in modern web applications. It is maintained by codewave.eu and has its origins with the developer Szymon, ensuring consistent updates and support for anyone looking to implement this feature.

Features

• Easy Installation: Quickly add the plugin to your project via NPM or Bower for seamless integration with your existing Angular ui-grid setup.
• Draggable Rows: Add the ui-grid-draggable-rows directive to your table to enable users to drag and drop rows with ease.
• Custom Row Templates: Flexible enough to accommodate your own row templates by simply modifying the inner div for drag-and-drop capability.
• Event Handling: A variety of events such as rowDragged, rowDropped, and beforeRowMove to handle actions smoothly when rows are dragged and dropped.
• Handle Option: Enable a designated drag handle by adding the useUiGridDraggableRowsHandle property to your grid options, enhancing usability.
• CSS Styling: Default styling is provided for drag-and-drop actions, with options to customize further through LESS or direct CSS imports.
• Public Methods: Access an array of public methods for controlling drag-and-drop functionality programmatically, including the ability to disable dragging.
• Grouping Support: Specifically designed to handle grouping, allowing developers to effectively manage row index changes during drag-and-drop.