ColumnFilter

Adds the ability to filter each column of the TaskBoard.

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

new TaskBoard({
    features : {
        columnFilter : true
    },

Column filter

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

    features : {
        columnFilter     : true,
        columnHeaderMenu : true
    },

    // Columns to display
    columns : [
        'todo',
        'doing',
        'done'
    ],

    // Field used to pair a task to a column
    columnField : 'status',

    // Project using inline data
    project : {
        tasks : [
            { name : 'Click filter icon above', status : 'todo', prio : 'normal' },
            { name : 'Filter by [prio] [one of] [high]', status : 'todo', prio : 'high' },
            { name : 'Be amazed!', status : 'doing' },
            { name : 'Understood column filtering :-)', status : 'done' },
            { name : 'See new items in the ⋯ menu', status : 'todo', prio : 'high' }
        ]
    }
});

Enable or disable the feature per column

By default, the filter 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 filterable:

const taskBoard = new TaskBoard({
    features : {
        columnFilter : true
    },

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

Configs

Common

disabledInstancePlugin

listenersEvents

Other

defaultFilters: CollectionFilterConfig[]= []

Define a filter setup for the column filter editor that is pre-populated when opening it for the first time. Note that this is an editor template and not automatically applied to the store.

By default, the filter popup has one template filter defined:

{ property : 'name', operator : 'includes', value : '' }

To preconfigure filters, pass an array of CollectionFilter#configs objects:

columnFilter : {
    defaultFilters : [
        { property : 'prio', operator : '=', value : 'high' },
        { property : 'description', operator : 'startsWith', value : 'fix' }
    ]
}

To start with an empty filter popup, pass an empty array:

columnFilter : {
    defaultFilters : []
}

draggable: Boolean= true

Popups are draggable by default. Setting this to false will prevent the user from moving the popup by dragging on the picker group's background.

excludeFields: String[] | null

Pass field names that should not be displayed in the property dropdown of the filter editor. The columnField defined in the TaskBoard config will be excluded by default, because it matches either all tasks or none, and therefore is not a meaningful filter criterion.

showFilterInHeader: Boolean= true

To show or hide the filter icon in the header tools section.

showFilterTooltip: Boolean= true

To disable showing the tooltip when hovering over the filter icon.

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Properties

Common

disabledInstancePlugin

Class hierarchy

isColumnFilter: Boolean= truereadonly

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

isColumnFilter: Boolean= truereadonlystatic

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

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

isTaskBoardFeatureTaskBoardFeature

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

clientInstancePlugin

localeHelperLocalizable

localeManagerLocalizable

Other

catchEventHandlerExceptionsEvents

Functions

Filter & sort

toggleColumnFilter

Toggle the visibility of the filter editor programmatically.

Parameter	Type	Description
`columnRecord`	ColumnModel

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

columnFilterHide

Triggered when the column filter is hidden.

// Adding a listener using the "on" method
columnFilter.on('columnFilterHide', ({ source, columnRecord }) => {

});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`columnRecord`	ColumnModel	Column record

columnFilterShow

Triggered when the column filter is displayed.

// Adding a listener using the "on" method
columnFilter.on('columnFilterShow', ({ source, columnRecord }) => {

});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`columnRecord`	ColumnModel	Column record

columnFilterToggle

Triggered when the column filter visibility is toggled.

// Adding a listener using the "on" method
columnFilter.on('columnFilterToggle', ({ source, columnRecord, visible }) => {

});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`columnRecord`	ColumnModel	Column record
`visible`	Boolean	True if filter popup is visible, false otherwise

beforeDestroyEvents

catchAllEvents

destroyEvents

disableInstancePlugin

enableInstancePlugin

Event handlers

onColumnFilterHide

Called when the column filter is hidden.

new ColumnFilter({
    onColumnFilterHide({ source, columnRecord }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`columnRecord`	ColumnModel	Column record

onColumnFilterShow

Called when the column filter is displayed.

new ColumnFilter({
    onColumnFilterShow({ source, columnRecord }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`columnRecord`	ColumnModel	Column record

onColumnFilterToggle

Called when the column filter visibility is toggled.

new ColumnFilter({
    onColumnFilterToggle({ source, columnRecord, visible }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	This TaskBoard
`columnRecord`	ColumnModel	Column record
`visible`	Boolean	True if filter popup is visible, false otherwise

onBeforeDestroyEvents

onCatchAllEvents

onDestroyEvents

onDisableInstancePlugin

onEnableInstancePlugin

Typedefs

BryntumListenerConfigEvents

CSS variables

Name	Description
`--b-task-board-column-filter-width`	The width of the column filter popup.

ColumnFilter

Enable or disable the feature per column

Configs

Common

Other

Misc

Properties

Common

Class hierarchy

Lifecycle

Misc

Other

Functions

Filter & sort

Configuration

Events

Lifecycle

Misc

Other

Events

Event handlers

Typedefs

CSS variables