Kanban View

• Component source: /src/components/masterdetail/layouts/KanBan/Index.vue

Basic configuration

Props

Prop	Type	Required	Default	Description
items	Array	Yes	-	The array of items to display on the kanban board
field	String	Yes	-	The field path to use for grouping items into columns (e.g., stage.name)
colValues	Array	Yes	-	Array of column definitions with id and name properties
allowDrag	Boolean	No	true	Whether drag and drop is enabled
cardComponent	Object	No	null	Custom Vue component to use for rendering each card
dropFunction	Function	No	null	Custom function to call when an item is dropped

Providing a custom card

You can provide your own card to customize how the items are displayed in the kanban board

In useMasterDetailRegistry

kanban: {
  master: KanbanPage,
  props: {
    field: 'stage.name',
    // 👇 Provide your own card component here
    cardComponent: MyKanbanCard,
    ..
  }
  ..
}

Handling drop events

There are a number of ways you can handle drop events.

1. Custom card with dropped function

TIP

This is the recommended approach because it gives you the most control over how you save and the visual representation.

1. Provide a custom card for your kanban board as per above
2. In your card, provide a dropped function:

// this will be called when the item is dropped on the target column
function dropped(eventData, dragItem, targetCol) {
    console.log('dropped', eventData, dragItem, targetCol)
})

2. Provide a dropped function in the registry

You can use this for a simple case:

kanban: {
    master: KanbanPage,
    props: {
        field: 'stage.name',
        cardComponent: DealKanbanCard,
        dropFunction: (eventData) => {
            console.log('dropped', eventData)
        }
        ...
    }
}