TaskBoard - RTL

Render TaskBoard in right-to-left direction while keeping movement, scroll, and keyboard behavior active.

#Usage

import { TaskBoard } from '@primeui/vue-taskboard';
<TaskBoard.Root v-model:tasks="tasks" data-key="id" column-field="columnId" :rtl="isRtl">
    <!-- TaskBoard parts -->
</TaskBoard.Root>

rtl sets dir="rtl" on the root and adds RTL-aware classes. Labels, card text, toolbar copy, dialogs, and menu text stay app-owned so products can use their own translation system.

#RTL Scope

rtl changes the root direction, applies RTL layout classes, and keeps the same item data, event payloads, methods, and ids. Column ids, item ids, column-field, swimlane-field, and move payloads do not change when direction changes.

#Visual Parts

Copied or custom UI parts should avoid left-only spacing assumptions and should mirror icons that imply direction. Prefer logical CSS properties or direction-aware utility classes for spacing, borders, and alignment.

#Interaction

RTL is visual direction, not a different data model. Drag/drop, selection, keyboard focus, export, and state serialization continue to use the same ids and column order. App-owned toolbars, dialogs, and filters should receive direction-aware layout in the same layer that renders their copy.

#Right To Left Board

The RTL sample toggles board direction while preserving movement and layout behavior.

Loading Demo...