Skip to main content Home Creators syncfusion vue-ui-components-skills syncfusion-vue-kanban
syncfusion-vue-kanban Implements the Syncfusion Vue Kanban component for column-based task board UIs with drag-and-drop, swimlanes, WIP constraints, and virtual scrolling. Use this when building sprint boards, kanban boards, workflow trackers, or any column-based task management UI. Covers data binding (local and remote), cards, columns, dialog, events, and accessibility.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/syncfusion/vue-ui-components-skills --skill syncfusion-vue-kanbanThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... name syncfusion-vue-kanban description Implements the Syncfusion Vue Kanban component for column-based task board UIs with drag-and-drop, swimlanes, WIP constraints, and virtual scrolling. Use this when building sprint boards, kanban boards, workflow trackers, or any column-based task management UI. Covers data binding (local and remote), cards, columns, dialog, events, and accessibility. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"Data Visualization"}
Implementing Syncfusion Vue Kanban
A column-based task board that groups cards by a status field, supports drag-and-drop reordering,
swimlane row grouping, column validation (WIP limits), and virtual scrolling for large datasets.
When to Use This Skill
User needs a Kanban / sprint board with status columns (To Do, In Progress, Done, etc.)
User wants drag-and-drop card movement between columns or across swimlane rows
User needs to bind Kanban to a REST API, OData, or local JSON dataset
User wants to group cards by assignee, team, or any field (swimlanes)
User needs WIP limits (min/max card counts per column)
User wants virtual scrolling for 1000+ cards without performance issues
User wants to customize card layout with a template or apply custom CSS
Component Overview
Concept What it does keyFieldBoard-level field that maps data records to columns (e.g. "Status") cardSettingsSpecifies headerField (unique ID) and
contentField
<e-columns>Declare each board column; keyField on column matches data values
swimlaneSettingsGroups cards into horizontal rows by a data field
allowDragAndDropEnables/disables card drag between columns (default: true)
enableVirtualizationEnables virtual scrolling for large datasets
Documentation and Navigation Guide
Component Overview
Full feature list with descriptions (drag-and-drop, swimlanes, WIP, virtual scrolling, etc.)
When-to-use decision table matching user needs to features
Package installation and all required CSS imports
Minimal working example
Accessibility
WCAG 2.2 and Section 508 compliance summary
All WAI-ARIA attributes (aria-label, aria-expanded, aria-selected, aria-grabbed, etc.)
Full keyboard shortcut reference
Disabling keyboard interaction (allowKeyboard: false)
Screen reader support details
RTL accessibility with enableRtl
Testing with axe-core and accessibility checker tools
Getting Started
Vite + Vue 3 project setup
Package installation (@syncfusion/ej2-vue-kanban)
CSS imports (tailwind3 theme)
Minimal Kanban with columns
Populating cards from a local data array
Enabling swimlanes on first render
Data Binding
Binding local JSON arrays
Remote data with DataManager + ODataAdaptor / ODataV4Adaptor
Web API binding with WebApiAdaptor
CRUD operations with UrlAdaptor (insertUrl, updateUrl, removeUrl)
Custom adaptor by extending ODataAdaptor
Sending extra query parameters with Query.addParams
Loading data dynamically via Ajax
Handling HTTP errors with actionFailure
Cards
headerField (mandatory unique ID) and contentFieldHiding the card header with showHeader: false
Custom card layout using Vue component template
Card selection: None / Single / Multiple (selectionType)
Multi-select with Ctrl+click / Shift+click
Columns
Single-key and multi-key column mapping
Column header text and header templates
Toggle columns (expand/collapse) with allowToggle
Rendering a column initially collapsed (isExpanded: false)
Stacked headers grouping multiple columns
Column-level drag-and-drop reordering (allowColumnDragAndDrop)
Dialog (Add / Edit / Delete Cards)
Default built-in dialog (double-click to open)
Custom dialog fields with dialogSettings.fields
Custom field labels and field types
Field validation with validationRules
Full dialog template using Vue component
Preventing dialog open with dialogOpen event
Programmatic openDialog() and closeDialog()
Dimensions (Height and Width)
Auto height/width (default)
Pixel dimensions (height="550px", :width="650")
Percentage dimensions (width="100%", height="100%")
When to use each mode
Events
Action events: actionBegin, actionComplete, actionFailure
Card events: cardClick, cardDoubleClick, cardRendered
Column drag events: columnDragStart, columnDrag, columnDrop
Data events: dataBinding, dataBound, dataSourceChanged, dataStateChange
Dialog events: dialogOpen, dialogClose
Card drag events: dragStart, drag, dragStop
Lifecycle: created, queryCellInfo
Swimlanes
Rendering swimlane rows with swimlaneSettings.keyField
Custom row label text with textField
Custom swimlane header template
Sorting rows (Ascending / Descending)
Cross-row drag-and-drop (allowDragAndDrop: true in swimlaneSettings)
Empty row display (showEmptyRow)
Card count badge (showItemCount)
Frozen swimlane header while scrolling (enableFrozenRows)
Drag and Drop
Disabling drag-and-drop globally (allowDragAndDrop: false)
Per-column drag/drop control (allowDrag, allowDrop)
Cross-swimlane drag-and-drop
Kanban-to-Kanban drag-and-drop (externalDropId, dragStop, addCard, deleteCard)
Kanban to TreeView drag-and-drop
Kanban to Scheduler drag-and-drop
Localization and RTL
All locale keys reference table
Loading translations with L10n.load()
Setting locale prop on the board
Right-to-left (RTL) mode with enableRtl
Public Methods
Card CRUD: addCard, updateCard, deleteCard, getCardDetails
Column methods: addColumn, deleteColumn, showColumn, hideColumn, getColumnData
Dialog: openDialog, closeDialog
Data: getSwimlaneData
Selection: getSelectedCards
UI: refreshHeader, refreshUI, showSpinner, hideSpinner, destroy
State Persistence
Enabling enablePersistence to save state in localStorage
Persisted state: data source, column expand/collapse, swimlane expand/collapse
Setting a unique id to avoid key collisions
Clearing persisted state
Priority and Sort Settings
cardSettings.priority for rank-based card positioningsortSettings.sortBy: 'Index', 'DataSourceOrder', 'Custom'sortSettings.field for field-mapped orderingsortSettings.direction: 'Ascending' / 'Descending'
Responsive Mode
Mobile layout: column sizing, swipe navigation, tap-and-hold drag
Swimlane popup menu on mobile
Single and multiple card selection on touch devices
Tooltip
Enabling default card tooltip (enableTooltip)
e-tooltip-text class for custom element tooltipsCustom tooltip template via tooltipTemplate
Customization and Troubleshooting
CSS class reference table
Sticky/fixed column headers
Column WIP validation (minCount, maxCount, constraintType)
WAI-ARIA attributes
Full keyboard shortcut reference
Theme Studio
Virtual Scrolling
Enabling virtualization (enableVirtualization: true)
Setting cardHeight in pixels
Remote data service configuration for virtual scrolling
Known limitations (swimlane + virtualization, card position, % height)
How-To Recipes
Dynamically change column properties at runtime
Replace all columns at runtime
Filter cards with a Query
Search cards by text with Query.search()
Handle column header double-click
Properties Reference
Complete root-level prop table (all types, defaults, descriptions)
cardSettings sub-properties (headerField, contentField, selectionType, priority, etc.)columns sub-properties (keyField, allowToggle, minCount, maxCount, transitionColumns, etc.)dialogSettings and DialogFieldsModel fieldssortSettings, swimlaneSettings, stackedHeaders interfacesAll enum values: SelectionType, ConstraintType, SortOrderBy, SortDirection
Style and CSS Customization
Full CSS class reference table for header cells and WIP limit indicators
CSS classes for card elements (header, content, footer, tags, color stripe)
Swimlane row and cell CSS selectors
Compact table-scoped selector variants
Fixed / sticky Kanban header (height-based and position: sticky)
Theme Studio for generating custom themes
Validation (WIP Limits)
minCount — minimum cards required per column/cellmaxCount — maximum cards allowed per column/cellconstraintType: 'Column' (default) vs 'Swimlane' scopeVisual feedback: highlight colors when limits are violated
CSS classes to customize validation highlight colors
Quick Start <template>
<div id="app">
<ejs-kanban id="kanban" keyField="Status" :dataSource="kanbanData" :cardSettings="cardSettings">
<e-columns>
<e-column headerText="To Do" keyField="Open"></e-column>
<e-column headerText="In Progress" keyField="InProgress"></e-column>
<e-column headerText="Testing" keyField="Testing"></e-column>
<e-column headerText="Done" keyField="Close"></e-column>
</e-columns>
</ejs-kanban>
</div>
</template>
<script setup>
import { KanbanComponent as EjsKanban, ColumnDirective as EColumn, ColumnsDirective as EColumns }
from '@syncfusion/ej2-vue-kanban';
import { extend } from '@syncfusion/ej2-base';
const rawData = [
{ Id: 1, Status: 'Open', Summary: 'Analyze requirements', Assignee: 'Nancy' },
{ Id: 2, Status: 'InProgress', Summary: 'Improve performance', Assignee: 'Andrew' },
{ Id: 3, Status: 'Testing', Summary: 'Fix IE browser bug', Assignee: 'Janet' },
{ Id: 4, Status: 'Close', Summary: 'Deploy to production', Assignee: 'Nancy' },
];
const kanbanData = extend([], rawData, null, true);
const cardSettings = { contentField: 'Summary', headerField: 'Id' };
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-vue-kanban/styles/tailwind3.css';
</style>
Common Patterns
Add swimlanes (group by assignee) <ejs-kanban keyField="Status" :dataSource="kanbanData"
:cardSettings="cardSettings" :swimlaneSettings="swimlaneSettings">
...columns...
</ejs-kanban>
<script setup>
const swimlaneSettings = { keyField: 'Assignee' };
</script>
Bind to remote OData service <script setup>
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
const kanbanData = new DataManager({
url: 'https://your-api.com/api/Tasks',
adaptor: new ODataAdaptor(),
crossDomain: true
});
</script>
Enable WIP limits on a column <e-column headerText="In Progress" keyField="InProgress" :maxCount="5" :minCount="1"></e-column>
Enable virtual scrolling for large data <ejs-kanban :enableVirtualization="true" keyField="Status" :dataSource="largeDataset"
:cardSettings="{ headerField: 'Id', contentField: 'Summary' }">
...
</ejs-kanban>
Key Props Reference Prop Type Purpose keyFieldString Data field that maps records to columns dataSourceArray / DataManager Cards data source cardSettingsObject headerField (required), contentField, template, selectionTypeswimlaneSettingsObject keyField, textField, allowDragAndDrop, showEmptyRow, enableFrozenRowsallowDragAndDropBoolean Board-level card drag-and-drop (default: true) allowColumnDragAndDropBoolean Reorder columns by dragging headers enableVirtualizationBoolean Virtual scrolling for large datasets enableTooltipBoolean Show tooltip on card hover constraintTypeString 'Column' or 'Swimlane' for WIP validation
More from this repository Comprehensive guide for implementing Syncfusion Vue 3 button components including Button, ButtonGroup, DropDownButton, Floating Action Button, ProgressButton, SplitButton, Speed Dial, Switch, RadioButton, and Chips. Use this when adding styled buttons, toggle behavior, icon support, grouped selections, dropdown action menus, programmatic control floating primary actions, expandable speed dial menus, compact interactive elements with avatars and drag-and-drop, or single/multiple selection capabilities to a Vue application.
Comprehensive guide for implementing Syncfusion Vue Calendar components including Calendar, DatePicker, DateRangePicker, DateTimePicker, and TimePicker. Covers installation, data binding, date/time selection, range selection, formatting, localization, masking, validation, customization, templates, accessibility, and reactive data patterns in Vue 3 applications using Composition API.
syncfusion-vue-data-manager Implements Syncfusion Vue DataManager for local/remote binding, CRUD, querying, caching, and middleware. Supports JsonAdaptor, ODataAdaptor, ODataV4Adaptor, UrlAdaptor, WebApiAdaptor, WebMethodAdaptor, RemoteSaveAdaptor, GraphQLAdaptor, CustomDataAdaptor, and CustomAdaptor. Covers Query class, filtering, sorting, paging, grouping, persistence, offline mode, caching, and error handling.
Related occupations SOC
Based on SOC occupation classification
