PrimeFaces Extensions Showcase

Kanban

Any custom key-value data attached to a KanbanItem via putData(key, value) is rendered as a data-* attribute on the card DOM element. This allows you to attach arbitrary metadata such as priority, assignee, due date, or story points to each card.

The data attributes are rendered on each card as visual badges (priority, assignee, due date, labels, story points) via the extender callback, and are also available for CSS attribute selectors (e.g. [data-priority="high"]) and JavaScript via element.dataset.*. Inspect a card with your browser's developer tools to see the data-* attributes on the DOM element.

Source

XHTML page
Managed bean


<h:outputScript>
        //<![CDATA[
        function kanbanExtender() {
            this.boards.forEach(function(board) {
                (board.item || []).forEach(function(item) {
                    var badges = [];

                    if (item.priority) badges.push(
                        '<span class="kanban-badge kb-priority-' + item.priority + '">' + item.priority + '</span>');

                    if (item.assignee) badges.push(
                        '<span class="kanban-badge kb-assignee">' + item.assignee + '</span>');

                    if (item.dueDate) badges.push(
                        '<span class="kanban-badge kb-duedate">' + item.dueDate + '</span>');

                    if (item.storyPoints) badges.push(
                        '<span class="kanban-badge kb-points">' + item.storyPoints + 'pts</span>');

                    if (item.labels) {
                        item.labels.split(',').forEach(function(l) {
                            badges.push('<span class="kanban-badge kb-label">' + l.trim() + '</span>');
                        });
                    }

                    if (badges.length) {
                        item.title += '<div class="kanban-badges">' + badges.join('') + '</div>';
                    }
                });
            });
        }
        //]]>
    </h:outputScript>

    <pe:kanban id="kanbanCustomData"
                value="#{kanbanCustomDataController.columns}"
                draggable="true"
                extender="kanbanExtender"
                style="height:400px" />


@Named
@ViewScoped
public class KanbanCustomDataController implements Serializable {

    private static final long serialVersionUID = 1L;

    private List<KanbanColumn> columns;

    @PostConstruct
    public void init() {
        columns = new ArrayList<>();

        KanbanColumn todo = new KanbanColumn();
        todo.setId("todo");
        todo.setTitle("To Do");
        todo.setCssClass("kanban-todo");
        todo.getItems().addAll(List.of(
                    new KanbanItem("td-1", "Design new landing page")
                                .putData("priority", "high")
                                .putData("assignee", "Alice")
                                .putData("dueDate", "2026-06-10")
                                .putData("labels", "design,frontend")
                                .putData("storyPoints", 5),
                    new KanbanItem("td-2", "Research competitor features")
                                .putData("priority", "medium")
                                .putData("assignee", "Bob")
                                .putData("dueDate", "2026-06-15")
                                .putData("labels", "research")
                                .putData("storyPoints", 3),
                    new KanbanItem("td-3", "Write unit tests")
                                .putData("priority", "low")
                                .putData("assignee", "Carol")
                                .putData("dueDate", "2026-06-20")
                                .putData("labels", "testing")
                                .putData("storyPoints", 8)));
        columns.add(todo);

        KanbanColumn inprogress = new KanbanColumn();
        inprogress.setId("inprogress");
        inprogress.setTitle("In Progress");
        inprogress.setCssClass("kanban-inprogress");
        inprogress.getItems().addAll(List.of(
                    new KanbanItem("ip-1", "Implement OAuth integration")
                                .putData("priority", "high")
                                .putData("assignee", "Alice")
                                .putData("dueDate", "2026-06-05")
                                .putData("labels", "backend,security")
                                .putData("storyPoints", 13),
                    new KanbanItem("ip-2", "API rate limiting")
                                .putData("priority", "high")
                                .putData("assignee", "Bob")
                                .putData("dueDate", "2026-06-08")
                                .putData("labels", "backend,performance")
                                .putData("storyPoints", 5)));
        columns.add(inprogress);

        KanbanColumn done = new KanbanColumn();
        done.setId("done");
        done.setTitle("Done");
        done.setCssClass("kanban-done");
        done.getItems().addAll(List.of(
                    new KanbanItem("dn-1", "Setup CI/CD pipeline")
                                .putData("priority", "high")
                                .putData("assignee", "Carol")
                                .putData("dueDate", "2026-05-28")
                                .putData("labels", "devops")
                                .putData("storyPoints", 8),
                    new KanbanItem("dn-2", "Database migration script")
                                .putData("priority", "medium")
                                .putData("assignee", "Bob")
                                .putData("dueDate", "2026-05-30")
                                .putData("labels", "backend,database")
                                .putData("storyPoints", 3)));
        columns.add(done);
    }

    public List<KanbanColumn> getColumns() {
        return columns;
    }
}

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.
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