TaskBoard - Permissions

Use access rules to hide columns and control drag, edit, create, delete, and reorder actions.

#Usage

import { TaskBoard } from '@primeui/vue-taskboard';
<TaskBoard.Root v-model:tasks="tasks" data-key="id" column-field="columnId" :access="access" context-menu selection-mode="single" @card-context-menu="onCardContextMenu">
    <!-- TaskBoard parts -->
</TaskBoard.Root>

Pass an access object when permissions should affect movement, visible columns, context-menu actions, and editing flows. Client-side access is an interaction guard, not backend authorization.

#Access Shape

const access = {
    role: 'reviewer',
    canDrag: true,
    canEdit: false,
    canCreate: true,
    canDelete: false,
    canReorderColumns: false,
    columnAccess: {
        approved: { canMoveIn: false },
        archived: { canView: false }
    }
};

#Access Fields

FieldUse
canDrag, canEdit, canCreate, canDeleteBoard-level action permissions.
canReorderColumnsColumn reorder permission.
columnAccess[ id ].canViewHides a column from the rendered board.
columnAccess[ id ].canMoveIn, canMoveOutGuards movement into or out of a column.

Access rules are checked by pointer drag, column rendering, and app-owned create, update, delete, or menu controls. They do not replace server authorization; persist only actions the backend also accepts.

Hidden columns are removed from the rendered column list. Items that still point at hidden columns remain in the data array, but they are not visible until the column becomes viewable again or the app moves them.

#Role-Based Board

The permissions sample switches roles and shows how access changes menu actions and movement rules.

Loading Demo...