syncfusion-react-dashboard-layout

name	syncfusion-react-dashboard-layout
description	Build responsive, interactive dashboard layouts with Syncfusion React Dashboard Layout component. Implement draggable and resizable panels, responsive grid systems, dynamic panel management, and state persistence. This skill covers multi-column layouts, floating panel arrangement, extensive customization, drag-drop panel rearrangement, and state management for React applications.
metadata	{"author":"Syncfusion Inc","version":"33.1.44"}

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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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:

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 for comprehensive mobile adaptation patterns

<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 for complete state serialization and storage options

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 for panel addition/removal and runtime management

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 and resizing-floating.md for size constraints and resizing behavior

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 for all available events and handlers

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

• 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

• 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

• 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

• 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, panel-templates.md

🎯 User-Customizable Layouts: Allow users to rearrange and resize dashboard panels to their preference with automatic saving.

• Read: dragging-behavior.md, resizing-floating.md, state-persistence.md

🎯 Responsive Interfaces: Build layouts that adapt from multi-column desktop views to single-column mobile views.

• Read: responsive-design.md, cell-configuration.md

🎯 Real-Time Monitoring: Display multiple real-time data sources in resizable panels with live updates.

• Read: panel-templates.md (component embedding), events-reference.md

🎯 Admin Panels: Create administrative interfaces with draggable widgets for system monitoring and control.

• Read: dragging-behavior.md, styling-customization.md, accessibility-wcag.md

🎯 Data Visualization: Organize multiple charts, tables, and metrics in flexible, responsive panel layouts.

• Read: panel-templates.md (embedding charts/grids), styling-customization.md

Panel Model Interface

interface PanelModel {
  id: string;              // Unique identifier (required)
  row: number;             // Row position (required)
  col: number;             // Column position (required)
  sizeX: number;           // Width in cells (default: 1)
  sizeY: number;           // Height in cells (default: 1)
  header?: string | HTMLElement | Function;
  content?: string | HTMLElement | Function;
  cssClass?: string;       // Custom CSS classes
  enabled?: boolean;       // Enable/disable (default: true)
  minSizeX?: number;       // Minimum width (default: 1)
  minSizeY?: number;       // Minimum height (default: 1)
  maxSizeX?: number;       // Maximum width
  maxSizeY?: number;       // Maximum height
  zIndex?: number;         // Stacking order
}

Quick Reference Guide

Task	Read This Documentation
Get Started	getting-started.md - Installation, setup, themes
Learn Panel Management	core-functionality.md - Create, update, remove panels
Customize Panel Content	panel-templates.md - Headers, templates, component embedding
Make It Draggable	dragging-behavior.md - Drag events, collision, custom handles
Make It Resizable	resizing-floating.md - Resize handles, constraints, floating
Configure Grid System	cell-configuration.md - Columns, spacing, aspect ratio, responsive grids
Make It Responsive	responsive-design.md - Breakpoints, mobile, touch optimization
Save User Layouts	state-persistence.md - serialize(), localStorage, API, Redux, Context
Style & Theme	styling-customization.md - CSS selectors, themes, responsive styling
Make It Accessible	accessibility-wcag.md - WCAG 2.2, WAI-ARIA, screen readers, RTL
API Reference	properties-reference.md, methods-reference.md, events-reference.md
Advanced Patterns	advanced-features.md - Custom integrations, performance optimization

Implementation Roadmap

Phase 1 - Foundation (Start Here):

1. Read getting-started.md for setup
2. Review core-functionality.md for panel basics
3. Check properties-reference.md for all available options

Phase 2 - Interaction (Build Functionality): 4. Implement dragging: dragging-behavior.md 5. Implement resizing: resizing-floating.md 6. Configure grid: cell-configuration.md

Phase 3 - Content (Customize Visuals): 7. Create panel templates: panel-templates.md 8. Apply styling: styling-customization.md

Phase 4 - Polish (Production Ready): 9. Optimize for mobile: responsive-design.md 10. Add accessibility: accessibility-wcag.md 11. Implement persistence: state-persistence.md

Phase 5 - Advanced (Expert Features): 12. Explore patterns: advanced-features.md 13. Refer to event/method APIs: events-reference.md, methods-reference.md