Theme
arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
Theme
arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
Homepage
GitHub
Issue Tracking
Kanban
A Kanban board component for visualizing workflow and managing tasks with drag-and-drop functionality.
Based on
jkanban
by Riktar.
Components and more
ClientBehaviours
Converters
Functions, Utils
BlockUI
Calculator
Clipboard
CodeMirror
CodeScanner
CookiePolicy
Counter
Credit Card
ClockPicker
Document Viewer
DynaForm
EChart
FluidGrid
Fuzzy Search
GChart
ImageAreaSelect
ImageRotateAndResize
ImageZoom
InputOtp
InputPhone
InputPlace
Kanban
Keynote
Layout
Legend
LightSwitch
Localized
MarkdownEditor
MarkText
MasterDetail
MeterGroup
MonacoEditor
Orgchart
OpenStreetMap
QRCode
RemoteCommand
Session
Sheet
SlideOut
Speedtest
SunEditor
Timer
TimeAgo
TimePicker
Tooltip
TriStateManyCheckbox
Waypoint
Use Cases
Basic Usage
Item Interaction
Layout Tuning
Board Dragging
Drop Restrictions
Right-Click Context Menu
Client API
Custom Data Attributes
Drag Handles
Documentation pe:kanban
Attributes (move mouse over the names to see data types)
Name
Description
id
Unique identifier of the component in a namingContainer.
rendered
Boolean value to specify the rendering of the component, when Set false component will not be rendered.
binding
An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar
Name of the client side widget.
value
List of KanbanColumn objects representing the kanban board columns and items.
style
Inline CSS style of the component.
styleClass
Style class of the component.
draggable
Enable drag-and-drop functionality. Default is true.
addItemButton
Enable add item button on each board. Default is false.
extender
JavaScript function to extend the widget configuration.
gutter
Gutter (spacing) between boards in CSS units, e.g. "15px". Default is 15px.
widthBoard
Default width of each board in CSS units, e.g. "250px". Default is 250px.
responsivePercentage
If true, boards use percentage-based widths instead of fixed pixel widths. Default is false.
dragBoards
Enable dragging of entire boards (columns) to reorder them. Default is true.
bindContextMenu
Client-side id of a PrimeFaces contextMenu component to bind to right-click events.
dragHandle
Enable drag handle on items. When enabled, only the handle area is draggable, preventing accidental drags on the card body. Default is false.
Events (move mouse over the names to see classes)
Name
Description
drop
fires when a Kanban item is dropped onto a column
itemAdd
fires when the add item button is clicked
dragBoard
fires when a Kanban board starts being dragged
dragendBoard
fires when a Kanban board drag ends
PrimeFaces Extensions Showcase - © 2011-2025,
PrimeFaces: 15.0.15,
PrimeFaces Extensions: 15.0.16-SNAPSHOT,
JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,
Server: Apache Tomcat (TomEE)/9.0.82 (8.0.16),
Build time: 2026-06-01 17:50
occured!