syncfusion-react-dashboard-layout

# Implementing Syncfusion React Dashboard Layout Syncfusion React Dashboard Layout is a powerful component for building responsive, interactive dashboard interfaces with draggable and resizable panels. It provides a flexible grid-based system for organizing content, automatic floating arrangement, and comprehensive state management. **Key Capabilities:** - Multi-column grid layouts with flexible cell sizing - Drag-and-drop panel repositioning - Resizable panels with size constraints - Automatic floating arrangement (fills empty spaces) - Responsive design with media queries - Dynamic panel add/remove/update operations - State persistence across sessions - Comprehensive event system for monitoring changes - Accessibility support and RTL rendering ## Documentation and Navigation Guide Choose the reference that matches your current task: ### 🚀 Getting Started 📄 **Read:** [references/getting-started.md](references/getting-started.md) - Installation and package setup - CSS theme imports and configuration - Creating your first dashboard - Basic panel implementation - Common setup issues and solutions ### 🎯 Core Concepts 📄 **Read:** [references/core-functionality.md](references/core-functionality.md) - Panel creation and configuration (PanelModel interface) - Basic dragging and positioning - Basic resizing with constraints - Grid configuration fundamentals - Complete component overview 📄 **Read:** [references/properties-reference.md](references/properties-reference.md) - All 15 component properties documented - Layout properties (columns, cellSpacing, cellAspectRatio) - Customization options (enableRtl, enablePersistence, showGridLines) - Advanced properties (mediaQuery, draggableHandle, resizableHandles) - Complete property reference with patterns ### 🎨 User Interface & Customization 📄 **Read:** [references/panel-templates.md](references/panel-templates.md) - Panel structure and composition - Header templates (text, HTML, interactive) - Content templates (HTML strings, JSX, Syncfusion components) - Embedding charts, grids, and widgets - Dynamic content updates - Template best practices and optimization 📄 **Read:** [references/styling-customization.md](references/styling-customization.md) - Complete CSS selector reference - Theme system integration (Tailwind, Bootstrap, Material, Fluent) - Header and content area styling - Resize handle styling and customization - Panel backgrounds, borders, and gradients - Dragging and interaction state styling - Advanced customization patterns ### 🎮 Interaction & Behavior 📄 **Read:** [references/dragging-behavior.md](references/dragging-behavior.md) - Enable and configure drag functionality - Drag events (dragStart, drag, dragStop) - Collision detection and panel pushing - Custom drag handles (header-only, icon-only, multiple) - Preventing specific panels from dragging - Visual feedback and placeholder styling - Programmatic panel movement - Undo/redo implementation 📄 **Read:** [references/resizing-floating.md](references/resizing-floating.md) - Enable and configure resize functionality - Resize handle directions (SE, E, W, N, S, NW, NE, SW) - Size constraints (minSizeX, minSizeY, maxSizeX, maxSizeY) - Resize events (resizeStart, resize, resizeStop) - Floating behavior and gap filling - Programmatic resizing (resizePanel method) - Responsive resizing and aspect ratio maintenance - Best practices for resizing ### ⚙️ Configuration & Layout 📄 **Read:** [references/cell-configuration.md](references/cell-configuration.md) - Grid columns and cell distribution - Cell sizing basics (sizeX, sizeY) - Cell aspect ratio configuration - Cell spacing and gap management - Cell calculation examples - Responsive cell configuration - Masonry, hero, and nested grid patterns 📄 **Read:** [references/responsive-design.md](references/responsive-design.md) - Built-in responsive behavior - Media query configuration and custom breakpoints - Standard breakpoint systems - Adaptive layouts for different screen sizes - Mobile-first approach - Touch device support and optimization - Testing responsive layouts - Performance optimization for responsiveness ### 💾 Advanced Features 📄 **Read:** [references/state-persistence.md](references/state-persistence.md) - Serialize method for saving layout - Save/restore state patterns - localStorage integration - sessionStorage integration - Database API integration - Advanced state management (Redux, Context API) - Versioning and migration - Error recovery and backups 📄 **Read:** [references/methods-reference.md](references/methods-reference.md) - All 9 component methods documented - Panel management: addPanel, removePanel, removeAll, updatePanel - Layout manipulation: movePanel, resizePanel - Serialization: serialize method - Utility methods: refreshDraggableHandle, destroy - Complete method examples and use cases 📄 **Read:** [references/events-reference.md](references/events-reference.md) - All 10 component events documented - Lifecycle events: created, destroyed - Interaction events: dragStart, drag, dragStop, resizeStart, resize, resizeStop - Change event: monitoring panel additions, removals, position changes - Event arguments and properties - Complete event handling patterns ### ♿ Compliance & Accessibility 📄 **Read:** [references/accessibility-wcag.md](references/accessibility-wcag.md) - WCAG 2.2 Level AA compliance - Section 508 standards compliance - WAI-ARIA implementation (roles, properties, states) - Keyboard navigation and accessibility - Screen reader support - RTL (right-to-left) language support - Testing and validation procedures - Accessibility audit checklist ## Quick Start Example Create an interactive dashboard in minutes: ```tsx import React, { useRef } from 'react'; import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts'; import '@syncfusion/ej2-base/styles/tailwind3.css'; import '@syncfusion/ej2-react-layouts/styles/tailwind3.css'; function Dashboard() { const dashboardRef = useRef<DashboardLayoutComponent>(null); const panels = [ { id: 'sales', header: 'Sales', content: '<div style="padding: 20px;">Sales data</div>', row: 0, col: 0, sizeX: 2, sizeY: 2 }, { id: 'users', header: 'Users', content: '<div style="padding: 20px;">User analytics</div>', row: 0, col: 2, sizeX: 2, sizeY: 2 }, { id: 'reports', header: 'Reports', content: '<div style="padding: 20px;">Report metrics</div>', row: 2, col: 0, sizeX: 4, sizeY: 1 } ]; return ( <div style={{ padding: '20px' }}> <h1>Dashboard</h1> <DashboardLayoutComponent ref={dashboardRef} id='dashboard' columns={5} cellSpacing={[10, 10]} panels={panels} allowDragging={true} allowResizing={true} allowFloating={true} enablePersistence={true} > </DashboardLayoutComponent> </div> ); } export default Dashboard; ``` ## Common Patterns ### Pattern 1: Responsive Dashboard with Mobile Support **📖 Read:** [responsive-design.md](references/responsive-design.md) for comprehensive mobile adaptation patterns ```tsx <DashboardLayoutComponent id='responsive-dashboard' columns={5} mediaQuery='max-width:768px' // Single column on tablets/mobile cellSpacing={[10, 10]} allowDragging={true} allowResizing={true} panels={panels} > </DashboardLayoutComponent> ``` **Key Features:** - Responsive column adjustment based on screen size - Mobile-first design with media queries - Touch optimization for mobile devices - See `responsive-design.md` for breakpoint configuration and testing ### Pattern 2: Save and Restore User Layout **📖 Read:** [state-persistence.md](references/state-persistence.md) for complete state serialization and storage options ```tsx const handleSaveLayout = () => { const layout = dashboardRef.current?.serialize(); localStorage.setItem('userDashboard', JSON.stringify(layout)); }; const handleRestoreLayout = () => { const saved = localStorage.getItem('userDashboard'); if (saved) { const layout = JSON.parse(saved); dashboardRef.current?.removeAll(); layout.forEach(panel => { dashboardRef.current?.addPanel(panel); }); } }; ``` **Key Features:** - serialize() method exports current layout state - localStorage for client-side persistence - See `state-persistence.md` for API integration, Redux/Context patterns, and auto-save ### Pattern 3: Dynamic Panel Management **📖 Read:** [core-functionality.md](references/core-functionality.md) for panel addition/removal and runtime management ```tsx const handleAddPanel = () => { dashboardRef.current?.addPanel({ id: `panel-${Date.now()}`, header: 'New Panel', content: 'Panel content', row: 0, col: 0, sizeX: 2, sizeY: 1 }); }; const handleRemovePanel = (panelId: string) => { dashboardRef.current?.removePanel(panelId); }; ``` **Key Features:** - Runtime panel creation and deletion - Unique panel IDs and positioning - Event handling for panel changes - See `methods-reference.md` for all available panel methods ### Pattern 4: Constrained Panel Sizes **📖 Read:** [cell-configuration.md](references/cell-configuration.md) and [resizing-floating.md](references/resizing-floating.md) for size constraints and resizing behavior ```tsx const constrainedPanels = [ { id: 'fixed-panel', header: 'Fixed Size', row: 0, col: 0, sizeX: 2, sizeY: 1, minSizeX: 2, // Cannot shrink maxSizeX: 2, // Cannot expand minSizeY: 1, maxSizeY: 1 }, { id: 'flexible-panel', header: 'Flexible', row: 0, col: 2, sizeX: 2, sizeY: 1, minSizeX: 1, // Can shrink to 1 cell maxSizeX: 4 // Can expand to 4 cells } ]; ``` **Key Features:** - minSizeX/Y and maxSizeX/Y constraints - Fixed vs. flexible panel sizing - Programmatic size updates via resizePanel() - See `cell-configuration.md` for grid calculations and `resizing-floating.md` for advanced resize patterns ### Pattern 5: Monitor Layout Changes **📖 Read:** [events-reference.md](references/events-reference.md) for all available events and handlers ```tsx const handleChange = (args: ChangeEventArgs) => { console.log('Panels added:', args.addedPanels); console.log('Panels removed:', args.removedPanels); console.log('Panels position changed:', args.changedPanels); console.log('User interaction:', args.isInteracted); }; <DashboardLayoutComponent panels={panels} change={handleChange} > </DashboardLayoutComponent> ``` **Key Features:** - Change event fires on any layout modification - Access to added, removed, and repositioned panels - User interaction detection - See `events-reference.md` for drag, resize, and other event handlers ## Key API Overview ### Component Properties **📖 Full Reference:** [properties-reference.md](references/properties-reference.md) - **columns** - Number of grid columns (default: 1) → See `cell-configuration.md` - **cellSpacing** - Spacing between panels [horizontal, vertical] → See `cell-configuration.md` - **panels** - Array of PanelModel objects defining layout → See `panel-templates.md` - **allowDragging** - Enable panel drag-and-drop (default: true) → See `dragging-behavior.md` - **allowResizing** - Enable panel resizing (default: false) → See `resizing-floating.md` - **allowFloating** - Auto-fill empty spaces (default: true) → See `resizing-floating.md` - **enablePersistence** - Save layout state (default: false) → See `state-persistence.md` - **mediaQuery** - Responsive breakpoint for mobile layouts → See `responsive-design.md` - **draggableHandle** - Custom drag handle selector → See `dragging-behavior.md` - **resizableHandles** - Resize handle directions → See `resizing-floating.md` - **cssClass** - Custom CSS classes → See `styling-customization.md` ### Core Methods **📖 Full Reference:** [methods-reference.md](references/methods-reference.md) - **addPanel(panel)** - Add new panel at runtime → See `core-functionality.md` - **removePanel(id)** - Remove panel by ID → See `core-functionality.md` - **removeAll()** - Clear all panels → See `core-functionality.md` - **updatePanel(panel)** - Modify existing panel → See `core-functionality.md` - **movePanel(id, row, col)** - Change panel position → See `dragging-behavior.md` - **resizePanel(id, sizeX, sizeY)** - Adjust panel dimensions → See `resizing-floating.md` - **serialize()** - Get current layout state → See `state-persistence.md` ### Important Events **📖 Full Reference:** [events-reference.md](references/events-reference.md) - **created** - Component initialized - **dragStart** / **drag** / **dragStop** - Drag operations → See `dragging-behavior.md` - **resizeStart** / **resize** / **resizeStop** - Resize operations → See `resizing-floating.md` - **change** - Layout changed (additions, removals, movements) → See `events-reference.md` ### Styling & Customization **📖 Full Reference:** [styling-customization.md](references/styling-customization.md) - CSS selectors for all panel elements - Theme customization (Tailwind, Bootstrap, Material, Fluent) - Responsive styling patterns - Accessibility styling (WCAG 2.2) ## Common Use Cases **🎯 Creating Dashboards:** Implement customizable dashboard layouts with multiple content panels organized in a grid. - Read: [core-functionality.md](references/core-functionality.md), [panel-templates.md](references/panel-templates.md) **🎯 User-Customizable Layouts:** Allow users to rearrange and resize dashboard panels to their preference with automatic saving. - Read: [dragging-behavior.md](references/dragging-behavior.md), [resizing-floating.md](references/resizing-floating.md), [state-persistence.md](references/state-persistence.md) **🎯 Responsive Interfaces:** Build layouts that adapt from multi-column desktop views to single-column mobile views.