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

GlobalSearchExample.vue
<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
                    },
                    ...
                }
            }
        },
        components: {
            VueBootstrap4Table
        }
    }
</script>

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

Last updated