Draggable Dashboard
A flexible dashboard component with drag-and-drop functionality for rearranging layout items.
Installation
Install the Draggable Dashboard component using your preferred package manager.
Usage
The Draggable Dashboard component provides a grid-based layout system where users can drag and drop items to customize their dashboard arrangement. It includes lock/unlock functionality, flexible grid sizing options, and automatic state persistence using localStorage to maintain layout across sessions.
Dashboard
Drag items to customize your layout
System Alert
Server maintenance scheduled
Update Available
New features released
Discover Its Features
The Draggable Dashboard component is packed with powerful features designed to provide an exceptional user experience.
Drag & Drop
Intuitive drag and drop interface allows users to reorder dashboard components easily.
Grid Layout
Responsive grid system with customizable columns and flexible item sizing.
Lock/Unlock
Toggle between edit and view modes to prevent accidental changes to the layout.
Flexible Sizing
Components can span multiple columns and rows to create complex dashboard layouts.
State Persistence
Dashboard layout is automatically saved to localStorage and persists across page reloads and browser sessions.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | undefined | The draggable wrapper components to be rendered in the dashboard |
| className | string | '' | Additional class names for styling the dashboard container |
| showLockToggle | boolean | true | Whether to show the lock/unlock toggle switch |
| showHandles | boolean | true | Whether to show drag handles on items |
| gridCols | number | 3 | Number of grid columns for the dashboard layout |
| gap | number | 6 | Gap between grid items (in Tailwind spacing units) |
| defaultLocked | boolean | false | Whether the dashboard should be locked by default |
| onOrderChange | (newOrder: string[]) => void | undefined | Callback function called when item order changes |
| persistenceKey | string | 'draggable-dashboard-order' | Unique key for localStorage to persist item order across sessions |
DraggableWrapper Props
The DraggableWrapper component wraps individual dashboard items and provides the drag-and-drop functionality.
| Prop | Type | Default | Description |
|---|---|---|---|
id* | string | undefined | Unique identifier for the draggable item |
children | ReactNode | undefined | The content to be wrapped and made draggable |
gridSize | { cols: number, rows: number } | { cols: 1, rows: 1 } | Size of the item in grid columns and rows |
className | string | '' | Additional class names for styling the wrapper |
isLocked | boolean | false | Whether this specific item is locked (inherited from parent) |
showHandle | boolean | true | Whether to show the drag handle for this item (inherited from parent) |
* Required prop