ColumnHeaderMenu

Feature

Adds a menu button (···) to column headers, clicking it displays a menu. Items are populated by other features and/or application code.

Default items

These are the default items provided by TaskBoard features:

Default items in the menu can be changed or removed and new items can be added. This is handled using the items config of the feature.

Add items

Add menu items for all column headers by adding a key (used as menu item ref) with a config object for a menu item as the value to the items config:

const taskBoard = new TaskBoard({
    features : {
        columnHeaderMenu : {
            items : {
                flagTasks : {
                    text : 'Flag task',
                    icon : 'fa fa-fw fa-flag',
                    onItem({ columnRecord }) {
                        columnRecord.tasks.forEach(taskRecord => taskRecord.flagged = true);
                    }
                }
            }
        }
    }
});

Remove items

To remove default items, configure them as null in the items config:

const taskBoard = new TaskBoard({
    features : {
        columnHeaderMenu : {
            items : {
                moveColumnLeft  : null,
                moveColumnRight : null
            }
        }
    }
});

Customize items

To customize default items, supply a new config object for them in the items config. It will merge with the default config object:

const taskBoard = new TaskBoard({
    features : {
        columnHeaderMenu : {
            items : {
                // Change the text of the "Add new task" item
                addTask : {
                    text : 'New card'
                }
            }
        }
    }
});

Manipulating items at runtime

Manipulate items for all columns or specific columns at runtime by supplying a processItems function:

const taskBoard = new TaskBoard({
    features : {
        columnHeaderMenu : {
            // Process items before menu is shown
            processItems({ columnRecord, items }) {
                 // Push an extra item for the done column
                 if (columnRecord.id === 'done') {
                     items.archive = {
                         text : 'Archive',
                         icon : 'fa fa-fw fa-archive',
                         onItem({ columnRecord }) {
                             columnRecord.tasks.forEach(taskRecord => taskRecord.archived = true);
                         }
                     };
                 }

                 // Do not show "Add new task" for the todo column
                 if (columnRecord.id === 'todo') {
                     items.addTask = null;
                 }
            }
        }
    }
});

This feature is enabled by default.

Keyboard shortcuts

This feature has the following default keyboard shortcuts:

For more information on how to customize keyboard shortcuts, please see our guide.