Skip to main content

Kanban

shadow

The Kanban component is an element that displays a full-size Kanban table. It allows you to manage tasks and projects using a visual interface.

The Kanban board is divided into columns, with each column representing a specific process phase or task category. Tasks are displayed as tabs that can be moved between columns to set and track their current status.

Basic use​

When to use​

Use wje-kanban when you need a consistent WebJET-based implementation for this UI concern.

When not to use​

Do not stretch the component beyond its responsibility; compose smaller primitives for edge cases.

Accessibility​

Validate keyboard behavior, focus states, contrast, and meaningful labels for interactive elements.

Best Practices​

  • Prefer component APIs over direct DOM manipulation.
  • Stick to design tokens and naming conventions.
  • Test components with realistic data before production rollout.

Attributes and Properties​

totalPages​

DescriptionSets the numeric value used for total-pages.
Attributetotal-pages
Typenumber
Default0

isLoading​

DescriptionDefines the list of values managed through is-loading.
Attributeis-loading
Typearray
Default[]

isDragging​

DescriptionControls whether is-dragging is enabled and affects component behavior.
Attributeis-dragging
Typeboolean
Defaultfalse

selectedCards​

DescriptionControls item selection behavior for selected-cards.
Attributeselected-cards
Typearray
Default[]

Events​

No events available for this component.

Methods​

setupDragAndDropEvents​

DescriptionSets up the drag and drop events for the component.
Signature() => void

setupSelectAllCardsEvent​

DescriptionSets up the select all cards event for the component.
Signature() => void

setupMenuItemClickEvents​

DescriptionSets up the menu item click events for the component.
Signature() => void

updateSelectedCards​

DescriptionUpdates the selected cards in the pool.
Signature(pool: HTMLElement, isChecked: boolean) => void

movePool​

DescriptionMoves the pool in the specified direction.
Signature(pool: HTMLElement, direction: string) => void

renamePool​

DescriptionRenames the pool.
Signature(pool: HTMLElement) => void

getCardPlaceholder​

DescriptionGets the card placeholder.
Signature() => null｜*

live​

DescriptionAdds a live event listener to the component.
Signature(eventType: string, selector: string, callback: function) => void

setSelectedCards​

DescriptionSets the selected cards.
Signature(isChecked: boolean, card: HTMLElement) => void

setSelectedItems​

DescriptionSets the selected items.
Signature() => void

getPages​

DescriptionFetches the pages.
Signature(page: any) => Promise<any>

dispatchEvent​

DescriptionDispatches a custom event from the component context.
Signature(event: any) => void

CSS Shadow Parts​

NameDescription
native-infinite-scrollStyles the native part of the Kanban board.

CSS Custom Properties​

No CSS custom properties available for this component.

Slots​

NameDescription
defaultThe default slot for the Kanban board.

Content