# Filtering

## 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

{% code title="SimplFilter.vue" %}

```javascript
...
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"
            }
        }
    }
]
...
```

{% endcode %}

### 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.

{% code title="ClearButtonIconSlot.vue" %}

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

{% endcode %}

## 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.

{% code title="MultiColumnFilter.vue" %}

```javascript
...
columns: [
    {
        label: "First Name",
        name: "name.first_name", // access nested objects properties with "."
        filter: {
            type: "select",
            mode: "single",
            closeDropdownOnSelection: true,
            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
            }
        }
    }
]
...
```

{% endcode %}

### Example (Multi select)

Multi select will render a dropdown list with checkboxes.

{% code title="MultiColumnFilter.vue" %}

```javascript
...
columns: [
    {
        label: "First Name",
        name: "name.first_name", // access nested objects properties with "."
        filter: {
            type: "select",
            mode: "multi",
            closeDropdownOnSelection: true,
            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]
            }
        }
    }
]
...
```

{% endcode %}

### 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.closeDropdownOnSelection  | Immediately close dropdown on selection.                                                                                                                                                                                                                                            | Boolean         | false        |
| 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                | <p>Select initial value in the dropdown list before rendering the table. <br>In <strong>single</strong> select mode, value should be a single number (index of the item).</p><p>In <strong>multi</strong> select mode, value should be array of numbers (indexes of the items).</p> | 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" |