arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
Kanban
Board dragging allows users to reorder entire boards (columns) by dragging them to a new position. Use the dragBoards attribute to enable/disable this feature, and the dragBoard / dragendBoard events to react to board drag operations.
Source

<p:growl id="growl" showDetail="true" />

    <div style="margin-bottom:8px">
        <p:outputLabel for="dragBoards" value="Board Dragging" styleClass="font-bold" style="margin-right:8px" />
        <p:selectOneMenu id="dragBoards" value="#{kanbanBoardDragController.dragBoards}" style="width:120px">
            <f:selectItem itemLabel="Enabled" itemValue="true" />
            <f:selectItem itemLabel="Disabled" itemValue="false" />
            <p:ajax update="kanban" process="@this" />
        </p:selectOneMenu>
    </div>

    <pe:kanban id="kanban"
                widgetVar="kanbanBoardDragWidget"
                value="#{kanbanBoardDragController.columns}"
                draggable="true"
                dragBoards="#{kanbanBoardDragController.dragBoards}"
                style="height:450px">
        <p:ajax event="drop" listener="#{kanbanBoardDragController.onDrop}" update="growl" />
        <p:ajax event="dragBoard" listener="#{kanbanBoardDragController.onDragBoard}" update="growl" />
        <p:ajax event="dragendBoard" listener="#{kanbanBoardDragController.onDragendBoard}" update="growl" />
    </pe:kanban>
            
Components and more
Documentation pe:kanban
Attributes (move mouse over the names to see data types)
Name Description
addItemButtonEnable add item button on each board.Default is false.
bindContextMenuClient-side id of a PrimeFaces contextMenu component to bind to right-click events.
bindingAn EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
dragBoardsEnable board (column) dragging and reordering.Default is true.
dragHandleEnable drag handle on items. When enabled, only the handle area is draggable, preventing accidental drags on the card body.Default is false.
draggableEnable drag-and-drop functionality.Default is true.
extenderJavaScript function to extend the widget configuration.
gutterGutter (spacing) between boards in CSS units, e.g. "15px".Default is 15px.
idUnique identifier of the component in a namingContainer.Default is generated.
renderedBoolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
responsivePercentageIf true, boards use percentage-based widths instead of fixed pixel widths.Default is false.
styleInline CSS style of the component.
styleClassStyle class of the component.
valueList of KanbanColumn objects representing the kanban board columns and items.
widgetVarName of the client side widget.Default is generated ('widget_' + componentClientId).
widthBoardDefault width of each board in CSS units, e.g. "250px".Default is 250px.
PrimeFaces Extensions Showcase - © 2011-2026,PrimeFaces: 16.0.0-RC1,PrimeFaces Extensions: 16.0.0-SNAPSHOT,JSF: Apache MyFaces Core 4.0 - Impl 4.0.3,Server: Apache Tomcat (TomEE)/10.1.52 (10.1.4),Build time: 2026-07-24 12:41