rowShape

Description

Optional. An object of settings for managing the rows appearance

Usage

rowShape?: {
    menu?: {
        show?: boolean, 
        items?: [
            {
                id?: string,
                icon?: string,
                label?: string,
                disabled? boolean,
                onClick?: ({ id, item, row }) => void
            }, 
            {...}
        ] | ({ row, rowIndex, store }) => array | boolean
    }
};

Parameters

To configure the rows appearance, in the rowShape object you can specify the following parameters:

• menu - (optional) an object of parameters of the rows context menu. Here you can specify the following parameters:

  • show - (optional) enables/disables a row context menu
  • items - (optional) an array of objects containing parameters of items of the rows context menu. For each item you can specify the following parameters:
    • id - (optional) an ID of the menu item
    • icon - (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 item
    • disabled - (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
      • row - a data object of the target row
  info

  You can also set the items parameter to a custom function, that takes the following arguments:

  • row - a data object of a current row
  • rowIndex - an index of a current row
  • store - an object of dataStore

  This function allows customizing menu for any row or hide it for a specific one (by returning null or false):

  items: ({ row, rowIndex, store }) => {
      if(rowIndex == 0){
          return null;
      } else {
          return [
              { id: "set-edit", icon: "wxi-edit", label: "Rename" },
              {
                  id: "delete-row",
                  icon: "wxi-delete",
                  label: "Remove row",
                  onClick: ({ id, item, row }) => board.deleteRow({ id: row.id })
              },
              {
                  id: "move-row:up",
                  icon: "wxi-arrow-up",
                  label: "Move up",
                  disabled: false
              }
          ];
      }
  }

Default config

const getDefaultRowMenuItems = ({ row, rowIndex, store }) => [
    { id: "set-edit", icon: "wxi-edit", label: "Rename" },
    {
        id: "move-row:up",
        icon: "wxi-arrow-up",
        label: "Move up",
        disabled: rowIndex <= 0
    },
    {
        id: "move-row:down",
        icon: "wxi-arrow-down",
        label: "Move down",
        disabled: rowIndex >= rows.length - 1
    },
    { id: "delete-row", icon: "wxi-delete", label: "Delete" }
];
const rowShape = {
    menu: {
        show: true,
        items: getDefaultRowMenuItems
    }
};

Example

const rowShape = {
    menu: {
        show: true,
        items: [
            { id: "set-edit", icon: "wxi-edit", label: "Rename" },
            { id: "delete-row", icon: "wxi-delete", label: "Delete" },
            {
                id: "move-row:up",
                icon: "wxi-arrow-up",
                label: "Move up",
                disabled: true
            },
            {
                id: "move-row:down",
                icon: "wxi-arrow-down",
                label: "Move down",
                disabled: true
            }
        ]
};

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

Change log: The property was added in v1.2

Related articles: Configuration

Related sample: Kanban. Custom context menu