Implement Syncfusion React Kanban component for flexible task management and workflow visualization. Use this when building kanban boards, workflow stages, or card-based task management systems. This skill covers drag-and-drop card operations, swimlane organization, WIP limit validation, custom card

Implementing Syncfusion React Kanban A comprehensive skill for working with Syncfusion's React Kanban component to build flexible task management boards with cards, columns, swimlanes, and drag and drop interactions. When to Use This Skill Use this skill when you need to: Install and set up the Kanban component with Syncfusion Create a basic Kanban board with columns and cards Organize cards in swimlanes (group by category/assignee) Implement drag and drop functionality between columns and swimlanes Configure card displays with headers, content, templates, and tags Bind data from arrays or APIs (DataManager, OData, REST) Handle user interactions (card selection, drag events, double click to edit) Add dialogs for card creation and editing Customize appearance with themes, CSS, and responsive design Validate card counts with WIP (work in progress) min/max limits Configure sorting, filtering, and search functionality Apply custom tooltips, templates, and styling Implement virtual scrolling for large datasets Save board state and configuration Component Overview The Kanban component provides a visual task management system with these core concepts: Cards : Represent tasks or items. Each card displays a header (from a field) and content (from another field). Cards can have tags, custom templates, and be selected individually or in groups. Columns : Define workflow stages (e.g., "To Do", "In Progress", "Done"). Each column has a header, can display item counts, and control drag/drop behavior independently. Swimlanes : Optional horizontal grouping layers that organize cards by category (e.g., by user, priority, or team). Swimlanes help with organization and can have custom headers. Drag and Drop : Built in support for moving cards between columns, within columns, across swimlanes, or to external sources. Fully configurable per column. Data Binding : Connect to static arrays or dynamic sources (DataManager with OData/REST APIs) for real time updates. Templates : Customize card layout, column headers, swimlane headers, tooltips, and dialogs with your own HTML/JSX. Documentation and Navigation Guide Choose the reference that matches your current need: Getting Started 📄 Read: [references/getting started.md](references/getting started.md) Installing @syncfusion/ej2 react kanban CSS theme imports (Material, Bootstrap, Fluent, Tailwind) Basic Kanban component setup Configuring dataSource and field mappings First working example Core Structure (Cards, Columns, Key Fields) 📄 Read: [references/core structure.md](references/core structure.md) Card properties and cardSettings configuration Column definition and properties keyField mapping (linking cards to columns) showHeader, showAddButton, showItemCount Card templates and styling options When to use default vs custom card layouts Swimlanes (Grouping Cards by Category) 📄 Read: [references/swimlanes.md](references/swimlanes.md) What swimlanes are and when to use them swimlaneSettings configuration Grouping cards by category, user, priority, or team Swimlane headers and custom rendering Nested vs flat layout variations Drag and Drop (Moving Cards and Managing Flow) 📄 Read: [references/drag and drop.md](references/drag and drop.md) Internal drag and drop (column to column, within columns) External drag and drop (Kanban to Kanban, to external sources) allowDragAndDrop, allowDrag, allowDrop per column transitionColumns to control valid transitions Drag event handlers and preventing drops Data Binding (Connecting to Data Sources) 📄 Read: [references/data binding.md](references/data binding.md) Binding to static JSON arrays DataManager integration with OData and REST APIs Remote data sources and refresh patterns Modifying data and triggering updates Real time data synchronization Templates and Dialogs (Custom Content and Card Editing) 📄 Read: [references/dialogs and templates.md](references/dialogs and templates.md) Card templates (custom card layout) Column header templates Swimlane header templates Tooltip templates and configuration Dialog setup for adding/editing cards Template syntax and event handling Sorting, Filtering, and Work in Progress (WIP) Validation 📄 Read: [references/sorting filtering and search.md](references/sorting filtering and search.md) Sort settings and card ordering Min/max card count per column (WIP limits) Allow sorting and searching Filtering and search patterns Selection modes (Single/Multiple) Handling validation errors Customization and Styling (Themes, Responsive, Advanced Features) 📄 Read: [references/customization and styling.md](references/customization and styling.md) Built in themes (Material, Bootstrap, Fluent, Tailwind) CSS customization and variables Responsive design behavior Virtual scrolling for large datasets Persistence (saving card state to storage) Localization (multi language support) Accessibility (ARIA, keyboard navigation) Properties (Configuration and Settings) 📄 Read: [references/properties.md](references/properties.md) All configurable properties with type definitions cardSettings, columns, swimlaneSettings configuration Core properties (allowDragAndDrop, keyField, dataSource) Dialog settings and advanced options Complete configuration examples Decision trees for common configuration patterns Methods (Programmatic Control and Actions) 📄 Read: [references/methods.md](references/methods.md) Card management (addCard, updateCard, deleteCard) Column management (addColumn, deleteColumn, hideColumn, showColumn) Data access methods (getSelectedCards, getCardDetails, getColumnData, getSwimlaneData) UI control methods (showSpinner, hideSpinner, refreshUI, openDialog, closeDialog) Common programmatic patterns (bulk operations, reordering, duplication) Using refs to access methods from parent components Events (Handling User Interactions and Data Changes) 📄 Read: [references/events.md](references/events.md) Card events (cardClick, cardDoubleClick, cardRendered, cardSelectionChanging) Dialog events (dialogOpen, dialogClose) Drag drop events (dragStart, drag, dragStop) Data events (dataBinding, dataBound, actionBegin, actionComplete, actionFailure) Lifecycle events (created) Event validation and prevention patterns Quick Start Example Here's a minimal Kanban board with 3 columns and 5 cards: What this does: Creates 3 workflow columns (Open, InProgress, Closed) Maps cards to columns using the Status field Displays 5 cards with their Summary text Enables drag and drop by default Common Patterns Pattern 1: Add Swimlanes to Group Cards by User Cards are now grouped horizontally by the Assignee field, making it easy to see each user's tasks. Pattern 2: Prevent Drag Drop in Specific Columns Users can drag cards into "Open", but once in "Closed", cards are locked (read only). Pattern 3: Validate Card Counts with WIP Limits The board will warn users if column has fewer than 1 or more than 5 cards, enforcing work in progress limits. Pattern 4: Handle Card Double Click to Edit This pattern enables inline editing workflows. Pattern 5: Bind Kanban to a Remote API

syncfusion-react-kanban