gridstack/gridstack.js

Features

• Drag and Drop Libraries - Provides a comprehensive library for implementing interactive drag-and-drop grid layouts with collision detection.
• Grid Layouts - Implements a responsive grid layout engine for arranging interactive UI elements in rows and columns.
• JSON Serializers - Converts grid positions and dimensions into JSON format for persisting and restoring dashboard configurations.
• Grid Packing Algorithms - Implements algorithms for automatically arranging and compacting grid items to resolve overlaps.
• Widget Lifecycle Management - Adds, removes, or updates widgets and converts existing DOM elements into manageable grid items.
• Unit-Based Dimensioning - Specifies the size and position of elements using numeric values or strings with unit modifiers.
• Coordinate-Based Positioning - Defines the horizontal and vertical coordinates of a cell to place it accurately within the layout.
• Dashboard Frameworks - Provides a framework for building interactive dashboards with widgets that adapt their placement based on screen breakpoints.
• Overlap Detection Systems - Calculates spatial intersections between grid elements to manage collision and overlap logic.
• Draggable Layout Elements - Implements UI components that can be repositioned within a grid via drag-and-drop interactions.
• Layout Space Compaction - Ships a coordinate-based system to reclaim empty gaps by shifting items vertically.
• Layout State Serialization - Saves and restores the positions and sizes of grid items to preserve user-customized dashboard configurations.
• Grid-Based Reordering - Provides the ability to rearrange the sequence and position of items within the grid.
• Placement Validation - Verifies if an area is empty and finds the first available spot that fits a given dimension.
• Resizing Constraints - Sets minimum and maximum boundaries and handle behaviors to control how users change element dimensions.
• Grid Item Resizers - Creates and manages interactive handles that allow users to modify the dimensions of grid cells.
• Responsive Breakpoints - Provides automatic adjustment of column counts and item placement based on predefined viewport breakpoints.
• Responsive Layout Configurations - Allows defining column counts, row constraints, and floating behaviors to control responsive element positioning.
• Responsive Item Repositioning - Provides automatic repositioning and reordering of widgets when the column count changes across screen breakpoints.
• Touch Layout Interactions - Handles native touch events to allow users to drag and resize grid elements on mobile devices.
• DOM-Driven State Management - Synchronizes internal layout coordinates with actual HTML element positions and dimensions for visual alignment.
• Collision Detection - Implements a collision-based engine to automatically shift or swap elements during drag and resize operations.
• Grid Action Processors - Triggers custom logic when specific grid actions occur by processing the event and the affected layout nodes.
• Layout Event Listeners - Triggers custom logic when widgets are added, removed, dragged, or resized within the layout.
• Custom Resize Handles - Allows the definition of custom elements and event hooks for the start, move, and stop phases of resizing.
• External Element Import - Allows users to drag elements from external areas, such as toolbars, into the grid to create new widgets.
• Content-Driven Sizing - Triggers callbacks to adjust the size of a grid item automatically when its internal content changes.
• Lifecycle Callbacks - Executes callback functions when widgets are added or removed to synchronize layout changes with application logic.
• Boundary Validation - Validates coordinates to ensure elements remain within the grid boundaries during movement.
• Drag and Drop Configurations - Offers settings to define the behavior and constraints of draggable elements, including trigger handles and helper rendering.
• Cross-Container Transfers - Provides mechanisms for moving draggable layout elements between different target containers.
• External Element Import - Configures the grid to accept widgets dragged from external elements, such as a toolbar.
• Event Handlers - Executes custom functions when grid elements trigger events, providing access to associated event data.
• Interaction Lifecycle Managers - Manages the programmatic state transitions and lifecycle hooks for drag, drop, and resize operations.
• Drag-and-Drop Event Callbacks - Provides a chain of callbacks to manage transitions between drag start, movement, and drop phases.
• Grid Cell Configurations - Provides tools for defining column counts, cell heights, and margins to adjust the structural density of the layout.
• Grid Element Relocation - Provides a mechanism to relocate layout items to specific positions while adjusting dimensions and collisions.
• Nested Grid Structures - Supports embedding grid containers within other grid cells to create hierarchical parent-child layout structures.
• Grid Population Methods - Adds items to the grid via code, serialized data sets, or by initializing existing DOM elements.
• Interaction Handle Configuration - Allows configuration of available handles for resizing elements and defines draggable item behaviors.
• Custom Layouts - Allows adding custom methods or replacing the core engine to modify how nodes are positioned.
• Interaction Performance Optimizations - Reduces computational load by deferring placement and collision detection until cursor movement pauses during dragging.
• Position Swapping - Allows exchanging the positions of two compatible nodes to reorganize the layout.
• Dimension Constraints - Enforces minimum and maximum width and height bounds for interactively resizable grid items.
• Grid Column Customization - Sets the number of columns and adjusts layout constraints to fit specific screen or design requirements.
• Interactive Handle Controls - Provides interactive handles and the ability to toggle resizing capabilities for grid items.
• Breakpoint State Caching - Caches layout configurations for different column counts to preserve interface state across breakpoints.
• Responsive Layout Optimizations - Implements techniques to adapt layout behavior and column configurations automatically based on the viewport size.
• Touch-Optimized Interfaces - Implements a touch-optimized grid interface allowing native touch support for rearranging and resizing components on mobile devices.
• Interaction Restrictions - Allows locking specific widgets to prevent them from being moved or resized.
• Widget Behavioral Configurations - Sets widget dimensions, movement restrictions, and scaling behaviors to control how elements behave within the grid.
• Widget Dimension Constraints - Sets minimum and maximum width and height limits to control how users resize elements.
• Framework Component Adapters - Wraps layout functionality for specific component libraries to synchronize state with framework-specific lifecycles.
• Dashboards and BI - Library for building responsive dashboard layouts.
• UI Layout Components - Supports multi-column dashboard layouts with drag-and-drop capabilities.

Star history