Skip to main content

columnShape

Description​

Optional. Settings object to customize the look of columns

Usage​

columnShape?: {
    menu?: {
        show?: boolean,
        items?: [
            {
                id?: string,
                icon?: string,
                text?: string,
                disabled?: boolean,
                onClick?: ({ id, item, column }) => void
            },
            {...}
        ] | ({ column, columnIndex, columns, store }) => array | boolean
    },
    fixedHeaders?: boolean,
    css?: (column, cards) => string,
    headerTemplate?: template(column => {
        return "The HTML template of the column header in the expanded state";
    }),
    collapsedTemplate?: template(column => {
        return "The HTML template of the column header in the collapsed state";
    }),
    confirmDeletion?: boolean
};

Parameters​

To style the columns, the columnShape object supports these options:

  • menu - (optional) settings for the column context menu. This includes:
    • show - (optional) toggles the column context menu on or off
    • items - (optional) an array defining menu items. Each item can have:
      • id - (optional) menu item ID. Use these values for built-in actions:
    • "add-card" - adds a new card
    • "set-edit" - edits the column name
    • "move-column:left" - moves the column left
    • "move-column:right" - moves the column right
    • "delete-column" - deletes the column - icon - (optional) icon class for the menu item, e.g., mdi-delete - text - (optional) label for the menu item - disabled - (optional) sets if the menu item is active or disabled - onClick - (optional) callback with these arguments:
    • id - current menu item ID
    • item - current menu item data object
    • column - target column data object
info

You can also set items to a function receiving:

  • column - current column data
  • columnIndex - index of the current column
  • columns - array of all columns data
  • store - dataStore object

This enables custom menus per column or hiding menus for certain columns by returning null or false:

items: ({ column, columnIndex, columns, store }) => {
  if (column.id === "inprogress") return null;

  if (column.id === "backlog")
    return [
      { id: "set-edit", icon: "wxi-edit", text: "Rename" },
      {
        id: "delete-card",
        icon: "wxi-delete",
        text: "Remove card",
      },
    ];
};
  • fixedHeaders - (optional) keeps column headers visible during vertical scrolling (true by default). Note: scrolling must be enabled in Kanban (height limited).
  • css - (optional) function returning a CSS class for conditional column styling
  • headerTemplate - (optional) HTML template for column headers when expanded
  • collapsedTemplate - (optional) HTML template for column headers when collapsed
  • confirmDeletion - (optional) toggles the confirmation dialog for deleting a column

Default config​

const getDefaultColumnMenuItems = ({ column, columnIndex, columns, store }) => [
  { id: "add-card", icon: "wxi-plus", text: "Add new card" },
  { id: "set-edit", icon: "wxi-edit", text: "Rename" },
  {
    id: "move-column:left",
    icon: "wxi-arrow-left",
    text: "Move left",
    disabled: columnIndex <= 0,
  },
  {
    id: "move-column:right",
    icon: "wxi-arrow-right",
    text: "Move right",
    disabled: columnIndex >= columns.length - 1,
  },
  { id: "delete-column", icon: "wxi-delete", text: "Delete" },
];
const columnShape = {
  menu: {
    show: true,
    items: getDefaultColumnMenuItems,
  },
  fixedHeaders: true,
  confirmDeletion: true,
};

Example​

const columnShape = {
  menu: {
    show: true,
    items: [
      {
        id: "color",
        text: "Color",
        items: [
          {
            id: "yellow",
            text: "Yellow",
            onClick: ({ column }) => changeColumnColor(column, "yellow"),
          },
          {
            id: "red",
            text: "Red",
            onClick: ({ column }) => changeColumnColor(column, "red"),
          },
          {
            id: "green",
            text: "Green",
            onClick: ({ column }) => changeColumnColor(column, "green"),
          },
        ],
      },
    ],
  },
  fixedHeaders: false,
  css: (column, cards) =>
    column.id == "inprogress" && cards.length < 5 ? "green" : "red",
  headerTemplate: template((column) => {
    return `<div className="wx-collapse-icon" data-action=${"collapse"}>
                    <i className=${column.column.collapsed ? "wxi-angle-right" : "wxi-angle-left"}></i>
                </div>
                ${
                  !column.column.collapsed
                    ? `<div className="wx-label" data-action="rename">
                                ${escapeHTML(column.column.label)}
                                (${column.columnState.cardsCount})
                            </div>`
                    : ""
                }
                ${
                  !column.column.collapsed
                    ? `<div className="wx-menu" data-menu-id=${column.id}>
                                <i className="wxi-dots-h"></i>
                            </div>`
                    : ""
                }`;
  }),
  collapsedTemplate: template((column) => {
    return `<div className="wx-collapsed-label">
                    <div className="wx-label-text">${escapeHTML(column.column.label)} (${
                      column.columnState?.cardsCount
                    })</div>
                </div>`;
  }),
  confirmDeletion: true,
};

new kanban.Kanban("#root", {
  cards,
  columns,
  rows,
  columnShape,
  // other parameters
});

Change log:

  • The css option was added in v1.4
  • The menu.items[0].label was renamed to menu.items[0].text in v1.4
  • The fixedHeaders option was added in v1.5
  • The headerTemplate and collapsedTemplate options were added in v1.6

Related articles: Configuration

Related samples: