How to filter a bootstrap vue table with an input field

Question

The title says it all. I want to filter my bootstrap table with an input box.

Here is my .html part of the component:

<b-table
:items="Table"
:fields="fields"
striped
small
>

</b-table>

Here is the .vue file

<template src="./jointable.component.html"> </template>
<style scoped src="./jointable.component.css"> </style>


<script>

import axios from 'axios'

export default {
    name: 'jointable',
    data(){
        return {
            Table: [],
            fields: [
                {key: 'client_id', label: "School Code", sortable: true},
                {key: 'client_name', sortable: true},
                {key: 'uuid', label: "ID", sortable: true},
                {key: 'step', label: "Job Running", sortable: true},
                {key: 'serverid', sortable: true},
                {key: 'create_timestamp', label: "Job Start", sortable: true},
                {key: 'time_elapsed', sortable: true},
                {key: 'wh_db_host', sortable: true}
            ]
        }
    },
    methods : {
        loadData: function(){
            axios.get("http://192.168.56.101:5000/jointable")
            .then((res) => {
                this.Table = res.data
            })
            .catch((err) => {
                console.log(err)
            })
        }
    },
    mounted() {
        this.loadData();

        setInterval(function(){
            this.loadData()
        }.bind(this), 10000)
    },
    computed() {

    }
}
</script>

So right now you can see that my script reloads the table every 10 seconds with updated data. This is fine. I want to also now have my table searchable/filterable. I know I have to use the computed thing but how do I use it.

Thank you to whoever helps me!

Answer 1

There's various ways to filter, but the most simple version is simply passing in a string to the filter prop on b-table.

This will search all columns for the string you pass in, so if you bind a data property to a input's v-model and the same data property to the filter property on your table, anything you type in the input will filter the table.

You can read more about how filtering works and some of the other methods in the documentation.

new Vue({
  el: '#app',
  data() {
    return {
      filter: '',
      items: [
        { id: 1, first_name: "Mikkel", last_name: "Hansen", age: 54 },
        { id: 2, first_name: "Kasper", last_name: "Hvidt", age: 42 },
        { id: 3, first_name: "Lasse", last_name: "Boesen", age: 39 },
        { id: 4, first_name: "Kasper", last_name: "Hansen", age: 62 },
        { id: 5, first_name: "Mads", last_name: "Mikkelsen", age: 31 },
      ]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.min.js"></script>

<link href="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div id="app" class="p-5">
  <b-input v-model="filter" placeholder="Filter table.."></b-input>
  <hr />
  <b-table :items="items" :fields="fields" :filter="filter">
  </b-table>
</div>