FilterBar

Adds the ability to quick search in configured fields of tasks. Renders a filter bar below each column's header.

Filter bar

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

    features : {
        filterBar : {
            fields               : ['name', 'prio', 'id'],
            keyStrokeChangeDelay : 100
        }
    },

    columns : ['todo', 'doing', 'done'],

    columnField : 'status',

    // Project using inline data
    project : {
        tasks : [
            { name : 'Explore the `FilterBar` feature', id : 1, status : 'doing', prio : 'normal' },
            { name : 'Enter some letters in the search field', id : 2, status : 'todo', prio : 'normal' },
            { name : 'Enter a number in the search field', id : 3, status : 'todo', prio : 'high' },
            { name : 'Delete the search term', id : 4, status : 'todo', prio : 'low' },
            { name : 'Read the `What\'s new` section', id : 5, status : 'done', prio : 'normal' }
        ]
    }
});

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

new TaskBoard({
    features : {
        filterBar : true
    },
});

Enable or disable the feature per column

By default, the filter bar is visible for all columns when enabling the feature. You can selectively enable or disable the filter bar for individual columns by configuring them with a flag searchable:

const taskBoard = new TaskBoard({
    features : {
        filterBar : {
            fields : ['id', 'name', 'description', 'prio']
        }
    },

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

Match modes and highlighting

The FilterBar supports the following match modes: and, or, and literal.

The default mode is literal, which means that the search term is used as a single string to match. RegExp support can be enabled by configuration allowRegExp : true.

The other two modes require the search term to be split into words by spaces, but are mutually exclusive with RegExp:

and mode requires each word to be present in any of the configured fields.
or mode requires at least one word to be present in any of the configured fields.

Filter bar highlight

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

    features : {
        filterBar : {
            fields               : ['name', 'prio'],
            keyStrokeChangeDelay : 100,
            showMatchModeTrigger : true,
            highlightMatches     : true
        }
    },

    columns : ['todo', 'doing', 'done'],

    columnField : 'status',

    project : {
        tasks : [
            { name : 'Task One', prio : 'high', status : 'done' },
            { name : 'Task Two', prio : 'normal', status : 'doing' },
            { name : 'Task Three', prio : 'high', status : 'done' },
            { name : 'Task Four', prio : 'low', status : 'todo' },
            { name : 'Task Five', prio : 'normal', status : 'doing' }
        ]
    },

    headerItems : {
        prio : {
            type     : 'template',
            template : ({ taskRecord }) => `
                <div class="app-task-chip ${taskRecord.prio}">${taskRecord.prio}</div>
            `
        }
    }
});

Configs

Common

disabledInstancePlugin

listenersEvents

Other

allowRegExp: Boolean= falseAlso a property

It might be desirable to use RegExp directly for filtering. Set this flag to true to prevent escaping of significant characters in the search value.

This option is mutually exclusive with matchMode being set to 'and' or 'or'. If its initial value is true, it will be set to false when a matchMode is set. Clearing matchMode will restore this config to its initial value.

fields: String[]= ["name"]

The field names of the configured TaskModel to search for matches.

const taskboard = new TaskBoard({
    features : {
        filterBar : {
            fields : ['id', 'name', 'description', 'prio']
        }
    },
    ...
});

highlightMatches: Boolean= falseAlso a property

Set this to true to wrap all matches in the searched fields of the task card with a <mark> tag.

The highlighting requires wrapping of text fragments in accessible <mark> element tags. This might cause undesirable layout and text flow changes. A built-in override is able to prevent additional gaps or missing whitespaces, in the most common case when an element containing matches has the style display : flex. But it is not feasible to account for every imaginable layout.

keyStrokeChangeDelay: Number

Set it to a non-zero number to activate filtering after each keystroke. When value is empty, filtering happens only on Enter, or when blur gets triggered.

matchMode: and | or | literal | nullAlso a property

This config determines how to handle a search term that contains multiple words, separated by spaces.

When set to 'literal' or not set, (default), the entire search term is used as a single string to match. Spaces are treated as literal characters.
When set to 'and', each space-separated word must be present in at least one of the specified fields to produce a match.
When set to 'or', a record matches when at least one of the space-separated words is found in its fields.

const taskboard = new TaskBoard({
    features : {
        filterBar : {
            fields               : ['id', 'name', 'description', 'prio'],
            showMatchModeTrigger : true,
            matchMode            : 'and'
        }
    },
    ...
});

showMatchModeTrigger: Boolean

Toggles visibility of the search mode trigger and its menu in the column search field.

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Properties

Common

disabledInstancePlugin

Class hierarchy

isFilterBar: Boolean= truereadonly

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

isFilterBar: Boolean= truereadonlystatic

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

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

isTaskBoardFeatureTaskBoardFeature

Other

allowRegExp: Boolean= falseAlso a config

It might be desirable to use RegExp directly for filtering. Set this flag to true to prevent escaping of significant characters in the search value.

highlightMatches: Boolean= falseAlso a config

Set this to true to wrap all matches in the searched fields of the task card with a <mark> tag.

matchMode: and | or | literal | nullAlso a config

This config determines how to handle a search term that contains multiple words, separated by spaces.

When set to 'literal' or not set, (default), the entire search term is used as a single string to match. Spaces are treated as literal characters.
When set to 'and', each space-separated word must be present in at least one of the specified fields to produce a match.
When set to 'or', a record matches when at least one of the space-separated words is found in its fields.

const taskboard = new TaskBoard({
    features : {
        filterBar : {
            fields               : ['id', 'name', 'description', 'prio'],
            showMatchModeTrigger : true,
            matchMode            : 'and'
        }
    },
    ...
});

catchEventHandlerExceptionsEvents