# Global search

Global search searches the complete list of rows for the given search keyword.

You can enable or disable search text input with custom configuration as shown in the below example.

## Example

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

```javascript
<template>
    <div id="app">
        <vue-bootstrap4-table :rows="rows" :columns="columns" :config="config">
        </vue-bootstrap4-table>
    </div>
</template>

<script>
    import VueBootstrap4Table from 'vue-bootstrap4-table'

    export default {
        name: 'App',
        data: function() {
            return {
                rows: [
                ...
                ],
                columns: [
                ...
                ],
                config: {
                    ...
                   global_search: {
                        placeholder: "Enter custom Search text",
                        visibility: true,
                        case_sensitive: false,
                        showClearButton: false,
                        searchOnPressEnter: false,
                        searchDebounceRate: 1000,
                        init: {
                            value : "Christin"
                        }                        
                    },
                    ...
                }
            }
        },
        components: {
            VueBootstrap4Table
        }
    }
</script>
```

{% endcode %}

## Attributes details

| Attributes                        | Description                                                                                   | Type    | Default             |
| --------------------------------- | --------------------------------------------------------------------------------------------- | ------- | ------------------- |
| global\_search.placeholder        | Placeholder is **`hint`** text for search text box                                            | String  | "Enter search text" |
| global\_search.visibility         | Show/Hide global search text input                                                            | Boolean | true                |
| global\_search.case\_sensitive    | Enable/Disable case sensitive searching.                                                      | Boolean | false               |
| global\_search.showClearButton    | Show/Hide clear button in the global search input text.                                       | Boolean | true                |
| global\_search.searchOnPressEnter | Enable/Disable global search on "enter" key press.                                            | Boolean | false               |
| global\_search.searchDebounceRate | Defines the wait time for searching between the key strokes. Value should be in milliseconds. | Number  | 60                  |
| global\_search.init.value         | Assign initial value to the the global search filter before rendering the table.              | String  | Empty string        |

## Clear button icon slot

You can override the default clear button icon in the global search text input.

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

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

{% endcode %}