arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
Kanban
A Kanban board component for visualizing workflow and managing tasks with drag-and-drop functionality.
Source

<pe:kanban id="kanban"
                widgetVar="kanbanWidget"
                value="#{kanbanController.columns}"
                draggable="true"
                addItemButton="true"
                style="height:400px">
        <p:ajax event="drop" listener="#{kanbanController.onDrop}" update="growl" />
        <p:ajax event="itemAdd" listener="#{kanbanController.onAddItem}" update="kanban growl" />
    </pe:kanban>
            
Components and more
Use Cases
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.
Events (move mouse over the names to see classes)
Name Description
dropfires when a Kanban item is dropped onto a column
itemAddfires when the add item button is clicked
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-05-19 16:37