> For the complete documentation index, see [llms.txt](https://rubanraj54.gitbook.io/vue-bootstrap4-table/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rubanraj54.gitbook.io/vue-bootstrap4-table/1.0.21/filtering.md).

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

{% 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        |

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

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

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

{% 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.options     | You can provide your list of name and value objects to be populated in the multi-select filter dropdown.                                                                                                                                                                 | Array  | Empty array  |