columnShape
Description
Optional. An object of settings for managing the columns appearance
Usage
columnShape?: {
menu?: {
show?: boolean,
items?: [
{
id?: string,
icon?: string,
label?: string,
disabled? boolean,
onClick?: ({ id, item, column }) => void
},
{...}
] | ({ column, columnIndex, store }) => array | boolean
}
};
Parameters
To configure the columns appearance, in the columnShape object you can specify the following parameters:
menu
- (optional) an object of parameters of the columns context menu. Here you can specify the following parameters:show
- (optional) - enables/disables a column context menuitems
- (optional) an array of objects containing parameters of items of the columns context menu. For each item you can specify the following parameters:id
- (optional) an ID of the menu itemicon
- (optional) a classname of icon of the menu item. Here you can specify any icon related to the icon fonts (mdi-delete)label
- (optional) a name of the menu itemdisabled
- (optional) a state of the menu item (active or disabled depending on the boolean value)onClick
- (optional) a custom callback function, that takes the following arguments:- id - an ID of the current menu item
- item - a data object of the current menu item
- column - a data object of the target column
infoYou can also set the
items
parameter to a custom function, that takes the following arguments:- column - a data object of a current column
- columnIndex - an index of a current column
- store - an object of dataStore
This function allows customizing menu for any column or hide it for a specific one (by returning null or false):
items: ({ column, columnIndex, store }) => {
if(column.id === "inprogress"){
return null;
}
const items = [
{ id: "set-edit", icon: "wxi-edit", label: "Rename" },
{
id: "delete-card",
icon: "wxi-delete",
label: "Remove card",
onClick: ({ id, item, column }) => {
board.deleteCard({
id: board.getAreaCards(column.id)[0].id,
});
},
},
];
if (column.id === "backlog") {
items.push({ id: "add-card", icon: "wxi-plus", label: "Add card" });
}
return items;
}
Default config
const getDefaultColumnMenuItems = ({ column, columnIndex, store }) => [
{ id: "add-card", icon: "wxi-plus", label: "Add new card" },
{ id: "set-edit", icon: "wxi-edit", label: "Rename" },
{
id: "move-column:left",
icon: "wxi-arrow-left",
label: "Move left",
disabled: columnIndex <= 0
},
{
id: "move-column:right",
icon: "wxi-arrow-right",
label: "Move right",
disabled: columnIndex >= columns.length - 1
},
{ id: "delete-column", icon: "wxi-delete", label: "Delete" }
];
const columnShape = {
menu: {
show: true,
items: getDefaultColumnMenuItems
}
};
Example
const columnShape = {
menu: {
show: true,
items: [
{ id: "set-edit", icon: "wxi-edit", label: "Rename" },
{ id: "delete-column", icon: "wxi-delete", label: "Delete" },
{ id: "add-card", icon: "wxi-plus", label: "Add new card" },
{
id: "move-column:left",
icon: "wxi-arrow-left",
label: "Move left",
disabled: true
},
{
id: "move-column:right",
icon: "wxi-arrow-right",
label: "Move right",
disabled: true
}
]
}
};
new kanban.Kanban("#root", {
cards,
columns,
rows,
columnShape,
// other parameters
});
Change log: The property was added in v1.2
Related articles: Configuration
Related sample: Kanban. Custom context menu