ColumnSort

Feature

Adds the ability to sort each column of the TaskBoard.

This feature is disabled by default. To enable it, add the feature to the config and specify sortableFields:

new TaskBoard({
    features : {
        columnSort : {
            sortableFields : ['name', 'prio']
        ]
    },
    ...
});

When sortableFields only contains a single field, sorting is triggered by clicking on the column title, or on the ⇵ button in the column header:

When multiple sortableFields are configured, the first sorter must be picked using the ⇵ button. Clicking it opens the sort menu, where the field to be sorted by can be chosen, and the state will be reflected by a sort order icon. Clicking the selected sort field (or the column title) repeatedly toggles the ascending/descending order.

Sorting by a custom function

Good to know

• Sorting is by default alphanumeric. If a different order is desired, use a custom sort function.
• Sorting by multiple criteria is not supported.
• Sorting is disabled when swimlanes are turned on.
• The default sorting by weight built into TaskBoard will be overridden if this feature is enabled. To sort by weight, add it to the sortableFields. To automatically sort by weight on page load, also add an initialSorter.

To configure default sorting, specify initialSorter with a field name or a TaskStoreSorterConfig object.

When sorting is applied to a column, the ColumnHeaderMenu will have an additional item, Reset sorting. Clicking it will remove the currently applied sorting, and restore the sort order specified by initialSorter.

Enable or disable the feature per column

By default, the sort icon is enabled for all columns when enabling the feature. You can selectively enable or disable the icon for individual columns by configuring them with a flag sortable:

const taskBoard = new TaskBoard({
    features : {
        columnSort : {
            sortableFields : ['name', 'prio']
        ]
    },

    columns : [
        'todo', // enabled by default
        { id : 'doing' }, // enabled by default
        { id : 'done', sortable : true }, // enabled explicitly, not needed, for demonstration only
        { id : '*', sortable : false } // disabled explicitly
    ...
});