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

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

Last updated