Skip to main content

items

Description​

Optional. An array with controls arranged on Toolbar of Kanban

Usage​

items?: [
    "search" | {
        // search parameters
        type: "search",
        options?: [
            {
                id: string,
                label: string,
                searchRule?: (card, value, by) => {} // returns a boolean value 
            }, {...}
        ]
    },
    "sort" | {
        // sort parameters
        type: "sort",
        options?: [
            {    
                text: string,
                by?: string, // by?: ((card: object) => any),
                dir?: "asc" | "desc"
            }, {...}
        ]
        
    },
    "spacer",
    "undo",
    "redo",
    "addColumn",
    "addRow",
    custom_control // string or function
];

Parameters​

In the items array you can specify the following parameters:

info

To set a default searchbar, you can specify a "search" string.​

To set a custom searchbar, you can specify an object with the following parameters:​

  • type - (required) a type of control ("search")
  • options - (optional) an array of objects, that define the search parameters. For each object (search option) you can specify the following parameters:
    • id - (required) a key of card field, by which the cards will be searched
    • label - (required) a name of option, used in a dropdown list of the searchbar selector
    • searchRule (optional) - a custom function that allows defining search rules. It takes the following arguments:
      • card - an object of the card data
      • value - a searched value, specified in the searchbar
      • by - a key of card field, by which the cards will be searched
items: [
    "search", // default searchbar
    // other controls
]
// or 
items: [
    { // custom searchbar
        type: "search",
        options: [
            {
                id: "label",
                label: "By label"
            },
            {
                id: "start_date",
                label: "By date",
                searchRule: (card, value, by) => {
                    const date = card[by];
                    return date?.toString().includes(value);
                }
            }
        ]
    },
    // other controls
]
info

To set a default sort control, you can specify a "sort" string.​

To set a custom sort control, you can specify an object with the following parameters:​

  • type - (required) a type of control ("sort")
  • options - (optional) an array of objects, that define the sort parameters. For each object (sort option) you can specify the following parameters:
    • text - (required) a name of option, used in a dropdown list of the sort selector
    • by - (optional) a key of card field, by which the cards will be sorted. This parameter can be set to the string or function value. The function needs to return the card field for sorting
    • dir - (optional) an order of sorting. The possible values are "asc" and "desc"
items: [
    "sort", // default sort control
    // other controls
]
// or 
items: [
    { // custom sort control
        type: "sort",
        options: [
            {
                text: "Sort by label",
                by: "label",
                dir: "asc"
            },
            {
                text: "Sort by description",
                by: "description",
                dir: "desc"
            }
        ]
    },
    // other controls
]
  • "spacer" - an empty space between controls
  • "undo" - a control for managing history (one click makes one step back)
  • "redo" - a control for managing history (one click makes one step forward)
  • "addColumn" - a control for adding new columns
  • "addRow" - a control for adding new rows
  • custom_control - (optional) custom control. Here you can specify the custom control(s) both as a string or function. See the Customization section

Example​

const board = new kanban.Kanban("#root", {
    columns,
    cards
});

new kanban.Toolbar("#toolbar", {
    api: board.api,
    items: [
        "search",
        "spacer",
        "sort",
        "undo",
        "redo", 
        "addColumn",
        "addRow"
    ],
});

Change log:

  • The "Undo" and "Redo" controls were added in v1.3
  • The items.options[0].label parameter of the sort control was replaced by the items.options[0].text parameter in v1.4

Related articles: Configuration and Customization

Related sample: Kanban. Custom toolbar