ColumnSort

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:

Column sort single

//<code-header>
fiddle.title = 'Column sort single';
//</code-header>
new TaskBoard({
    appendTo : targetElement,

    features : {
        columnHeaderMenu : true,
        columnSort       : {
            sortableFields : ['name']
        }
    },

    columnField : 'column',

    columns : ['one', 'two', 'three'],

    project : {
        tasks : [
            { name : 'B', column : 'three' },
            { name : 'A', column : 'two' },
            { name : 'F', column : 'one' },
            { name : 'E', column : 'two' },
            { name : 'C', column : 'two' },
            { name : 'H', column : 'one' },
            { name : 'G', column : 'three' },
            { name : 'D', column : 'one' }
        ]
    }
});

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.

Column sort menu

//<code-header>
fiddle.title = 'Column sort menu';
//</code-header>
const taskBoard = new TaskBoard({
    appendTo : targetElement,

    features : {
        columnHeaderMenu : true,
        columnSort       : {
            sortableFields : [{ field : 'id', label : 'Primary key' }, 'name']
        }
    },

    columnField : 'column',

    columns : ['one', 'two', 'three'],

    headerItems : {
        id : { type : 'text' }
    },

    project : {
        tasks : [
            { id : 1, name : 'B', column : 'three'  },
            { id : 2, name : 'A', column : 'two' },
            { id : 3, name : 'F', column : 'one' },
            { id : 4, name : 'C', column : 'two' },
            { id : 5, name : 'H', column : 'one' },
            { id : 6, name : 'E', column : 'two' },
            { id : 7, name : 'G', column : 'three' },
            { id : 8, name : 'D', column : 'one' }
        ]
    }
});

Sorting by a custom function

Column sort function

//<code-header>
fiddle.title = 'Column sort function';
//</code-header>
const
    prioMap = {
        low      : 1,
        normal   : 2,
        high     : 3,
        critical : 4
    },
    prioSort = (a, b) => prioMap[b.prio] - prioMap[a.prio];

const taskBoard = new TaskBoard({
    appendTo : targetElement,

    features : {
        columnHeaderMenu : true,
        columnSort       : {
            sortableFields : [
                'name',
                { label : 'Priority', fn : prioSort }
            ]
        }
    },

    columnField : 'column',

    columns : ['one', 'two', 'three'],

    headerItems : {
        prio : { type : 'text' }
    },

    project : {
        tasks : [
            { id : 1, name : 'B', prio : 'high', column : 'three'  },
            { id : 2, name : 'A', prio : 'normal', column : 'two' },
            { id : 3, name : 'F', prio : 'low', column : 'one' },
            { id : 4, name : 'C', prio : 'critical', column : 'two' },
            { id : 5, name : 'H', prio : 'low', column : 'one' },
            { id : 6, name : 'E', prio : 'low', column : 'two' },
            { id : 7, name : 'G', prio : 'high', column : 'three' },
            { id : 8, name : 'D', prio : 'normal', column : 'one' }
        ]
    }
});

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.

If no initialSorter was configured, the current sorter will be removed, but the items will keep their current order, since the initial sort order cannot be determined.

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
    ...
});

Configs

Common

disabledInstancePlugin

listenersEvents

Other

closeOnItem: Boolean= false

In case it is desirable to have the sort menu closing itself after clicking an item, set this property to true. To change the sort direction when closeOnItem is enabled, the menu needs to be opened a second time to click the selected item again, or the column title can be clicked to toggle the sort order of the currently selected sorter item.

Pressing the Shift key while clicking a sorter item inverses the behaviour, i.e. when closeOnItem = true, shift-clicking keeps the menu open, and when closeOnItem = false, shift-clicking closes the menu.

initialSorter: TaskStoreSorterConfig | null

The sorter that will be applied to every column on page load. When passing a field name, a TaskStoreSorterConfig, or an appropriate config object, the column will be sorted by that field.

showButtonTooltip: Boolean= trueAlso a property

Button by default displays a tooltip, showing which field and direction the column is sorted by. Set to false to disable the tooltip.

sortableFields: String[] | TaskStoreSorterConfig[]

Specify a list of field names which are allowed to be sorted by. These fields will be displayed in the sorting menu. If the list contains a single field, the menu will be omitted, and only sorting by that field is possible.

sortableFields can be either an array of field names, or an array of TaskStoreSorterConfig objects to allow for localization.

When passing an array of strings, labels will be fetched from Model field definitions if defined, or generated from the field names by de-camelizing: startDate will result in { field : 'startDate', label : 'Start date', ascending : true }.

sortableFields : [
    {
        field : 'prio',
        label : 'Priority'
    }, {
        field : 'someKey',
        label : this.L('L{some.translation.path}')
    },
    ...
]

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Properties

Common

disabledInstancePlugin

Class hierarchy

isColumnSort: Boolean= truereadonly

Identifies an object as an instance of ColumnSort class, or subclass thereof.

isColumnSort: Boolean= truereadonlystatic

Identifies an object as an instance of ColumnSort class, or subclass thereof.

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

isTaskBoardFeatureTaskBoardFeature

Other

showButtonTooltip: Boolean= trueAlso a config

Button by default displays a tooltip, showing which field and direction the column is sorted by. Set to false to disable the tooltip.

catchEventHandlerExceptionsEvents

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

clientInstancePlugin

localeHelperLocalizable

localeManagerLocalizable

Functions

destroystaticBase

doDestroyBase

setConfigBase

Misc

animatePropertyBase

callbackBase

doDisableInstancePlugin

downloadTestCaseBase

initClassstaticBase

isOfTypeNamestaticBase

mixinstaticBase

optionalLstaticLocalizable

resolveCallbackBase

updateLocalizationLocalizable

Other

addListenerEvents

hasListenerEvents

LstaticLocalizable

onEvents

relayAllEvents

removeAllListenersEvents

removeListenerEvents

resumeEventsEvents

suspendEventsEvents

triggerEvents

unEvents

Events

beforeDestroyEvents

catchAllEvents

destroyEvents

disableInstancePlugin

enableInstancePlugin

Event handlers

onBeforeDestroyEvents

onCatchAllEvents

onDestroyEvents

onDisableInstancePlugin

onEnableInstancePlugin

Typedefs

TaskStoreSorterConfig

An object representing a TaskStore sorter.

Parameter	Type	Description
`field`	String	Field name
`label`	String	Text to be displayed in UI instead of "field"
`fn`	function	A custom sorting function, to be used instead of the "field"
`ascending`	Boolean	`true` to sort ascending, `false` to sort descending

BryntumListenerConfigEvents

ColumnSort

Sorting by a custom function

Good to know

Enable or disable the feature per column

Configs

Common

Other

Misc

Properties

Common

Class hierarchy

Other

Lifecycle

Misc

Functions

Configuration

Events

Lifecycle

Misc

Other

Events

Event handlers

Typedefs