Filtering

Filtering configuration is added along with the each column config.

Simple Filter

Filter the rows based on the given keyword. If you don't specify filter config then filter feature will be disabled for the specific column.

Example

SimplFilter.vue
...
columns: [
    {
        label: "First Name",
        name: "name.first_name", // access nested objects properties with "."
        filter: {
            type: "simple",
            placeholder: "Enter first name",
            case_sensitive: true, // "false" by default
            showClearButton: false,
            filterOnPressEnter: false,
            debounceRate: 1000,
            init: {
                value : "Christin"
            }
        }
    }
]
...

Attributes details

Attributes

Description

Type

Default

filter.type

Defines the type of filter.

String

Empty string

filter.placeholder

Placeholder is hint text for filter text box

String

Empty string

filter.case_sensitive

Enable/Disable case sensitive filtering.

Boolean

false

filter.filterOnPressEnter

Enable/Disable filtering on "enter" key press.

Boolean

false

filter.debounceRate

Defines the wait time for filtering between the key strokes. Value should be in milliseconds.

Number

60

filter.showClearButton

Show/Hide clear button in the simple filter.

Boolean

true

filter.init.value

Assign initial value to the the filter before rendering the table.

String

Empty string

Clear button icon slot

You can override the default clear button icon in the simple filter text input.

ClearButtonIconSlot.vue
...
<vue-bootstrap4-table :rows="rows" :columns="columns">
    <template slot="simple-filter-clear-icon">
        <i class="fas fa-times-circle"></i>
    </template>
</vue-bootstrap4-table>
...

Select Filter

You can have select dropdown filter for each columns. The options in the dropdown will be rendered with bootstrap 4 custom radio/checkboxes.

Example (Single select)

Single select will render a dropdown list with radio buttons.

MultiColumnFilter.vue
...
columns: [
    {
        label: "First Name",
        name: "name.first_name", // access nested objects properties with "."
        filter: {
            type: "select",
            mode: "single",
            placeholder: "Select options",
            options: [{
                    "name": "option one",
                    "value": "option one"
                },
                {
                    "name": "option two",
                    "value": "option two"
                },
                {
                    "name": "option three",
                    "value": "option three"
                }
            ],
            init: {
                value : 2
            }
        }
    }
]
...

Example (Multi select)

Multi select will render a dropdown list with checkboxes.

MultiColumnFilter.vue
...
columns: [
    {
        label: "First Name",
        name: "name.first_name", // access nested objects properties with "."
        filter: {
            type: "select",
            mode: "multi",
            placeholder: "Select options",
            options: [{
                    "name": "option one",
                    "value": "option one"
                },
                {
                    "name": "option two",
                    "value": "option two"
                },
                {
                    "name": "option three",
                    "value": "option three"
                }
            ],
            select_all_checkbox : {
                visibility: true,
                text: "Select all items"
            },
            init: {
                value : [0,1]
            }
        }
    }
]
...

Attributes details

Attributes

Description

Type

Default

filter.type

Defines the type of filter.

String

Empty string

filter.mode

Defines the mode of selection in the dropdown. Allowed options are single and multi. If the mode is single, then dropdown will be rendered with radio buttons, else if the mode is multi, then dropdown will be rendered with checkboxes.

String

"single"

filter.placeholder

Default text for the dropdown.

String

Empty string

filter.options

You can provide your list of name and value objects to be populated in the multi-select filter dropdown.

Array

Empty array

filter.init.value

Select initial value in the dropdown list before rendering the table. In single select mode, value should be a single number (index of the item).

In multi select mode, value should be array of numbers (indexes of the items).

Number | Array

-

select_all_checkbox.visibility

Enable or disable select all items checkbox in the dropdown list. This option is valid only in multi select mode.

Boolean

true

select_all_checkbox.text

You can override the default text of Select all item text. This option is valid only in multi select mode.

String

"Select All"

Last updated