title: Reset Vue Bootstrap Table
body: <p>i  am using <strong>vue-bootstrap4-table</strong> in my application i have a custom input though which i search and populate the data,now i need to build a feature in which their is a cross button inside the search field and on clicking on it it should reset the table to empty state here is my code</p>
  
  <pre><code>&lt;template&gt;
              &lt;auto-complete
                @autocomplete-result-selected="setCustomer"
                placeholder="Enter Customer name"
                :selected="selectedCustomer"
                :styles="{width: 'calc(100% - 10px)'}"
                index="locations"
                attribute="name"
              &gt;
                &lt;template slot-scope="{ hit }"&gt;
                  &lt;span&gt;
                    {{ hit.customer.company &amp;&amp; hit.customer.company + ' - ' }}{{ hit.customer.fname }}
                    {{ hit.customer.lname }}
                  &lt;/span&gt;
                &lt;/template&gt;
              &lt;/auto-complete&gt;
              &lt;i class="fas fa-times" @click="clearTable()" v-show="selectedCustomer"&gt;&lt;/i&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  import http from "../../helpers/api.js";
  import AutoComplete from "../autocomplete/Autocomplete";
  import axios from "axios";
  import VueBootstrap4Table from "vue-bootstrap4-table";
  export default {
    components: {
      "auto-complete": AutoComplete,
      VueBootstrap4Table
    },
    computed: {},
    data() {
      return {
        value: "",
        selectedCustomer: "",
        selectedFirstName: "",
        selectedLastName: "",
        selectedFields: [
          { name: "Invoice", value: "invoices" },
          {
            name: "Estimate",
            value: "workorder_estimates"
          }
        ],
        filters: [
          { is_checked: true, value: "invoices", name: "Invoice" },
          { is_checked: true, value: "workorder_estimates", name: "Estimate" }
        ],
        selectedFilters: [],
        estimateChecked: false,
        invoiceChecked: false,
        config: {
          card_mode: false,
          show_refresh_button: false,
          show_reset_button: false,
          global_search: {
            placeholder: "Enter custom Search text",
            visibility: false,
            case_sensitive: false
          },
          pagination: true,
          pagination_info: false,
          per_page: 10,
          rows_selectable: true,
          server_mode: true,
          preservePageOnDataChange: true,
          selected_rows_info:true
        },
        classes: {},
        rows: [],
        columns: [
          {
            label: "TYPE",
            name: "type"
          },
          {
            label: "ID",
            name: "distinction_id"
          },
          {
            label: "CUSTOMER NAME",
            name: "full_name"
          },
          {
            label: "SERVICE DATE",
            name: "service_date"
          },
          {
            label: "ADDRESS",
            name: "address1"
          },
          {
            label: "CREATE DATE",
            name: "created_at"
          }
        ],
        queryParams: {
          sort: [],
          filters: [],
          global_search: "",
          per_page: 10,
          page: 1
        },
        selected_rows: [],
        total_rows: 0
      };
    },
    methods: {
      onNameSearch() {
        this.selectedFilters = ["invoices", "workorder_estimates"];
        this.fetchData();
      },
      clearTable(){
          this.rows=[];
          console.log(this.config.selected_rows_info);
          this.config.selected_rows_info=false;
      },
      onChangeQuery(queryParams) {
        console.log(queryParams);
        this.queryParams = queryParams;
        this.fetchData();
      },
      onRowClick(payload) {
        console.log(payload);
      },
      setCustomer(selectedResult) {
        this.selectedCustomer = selectedResult.customer.company
          ? `${selectedResult.customer.company + " - "}${
              selectedResult.customer.fname
            } ${selectedResult.customer.lname}`
          : `${selectedResult.customer.fname} ${selectedResult.customer.lname}`;
  
        this.selectedFirstName = selectedResult.customer.fname;
        this.selectedLastName = selectedResult.customer.lname;
      },
      changeCheck(event, index, value) {
        var checked = event.target.checked;
        switch (value) {
          case "invoices":
            if (checked) {
              this.selectedFields.push({ name: "Invoice", value: "invoices" });
              this.invoiceChecked = true;
              var data = this.filters[index];
              data.is_checked = true;
              Vue.set(this.filters, data, index);
            } else {
              var index = this.selectedFields.findIndex(
                item =&gt; item.value === value
              );
              this.selectedFields.splice(index, 1);
              this.invoiceChecked = false;
              var data = this.filters[index];
              data.is_checked = false;
              Vue.set(this.filters, data, index);
            }
            break;
  
          case "workorder_estimates":
            if (checked) {
              this.selectedFields.push({
                name: "Estimate",
                value: "workorder_estimates"
              });
              var data = this.filters[index];
              data.is_checked = true;
              Vue.set(this.filters, data, index);
            } else {
              var index = this.selectedFields.findIndex(
                item =&gt; item.value === value
              );
              this.selectedFields.splice(index, 1);
              this.estimateChecked = false;
              var data = this.filters[index];
              data.is_checked = false;
              Vue.set(this.filters, data, index);
            }
            break;
        }
      },
      removeFilter(index, value) {
        switch (value) {
          case "workorder_estimates":
            this.selectedFields.splice(index, 1);
            this.estimateChecked = false;
            var i = this.filters.findIndex(item =&gt; item.value === value);
            var data = this.filters[i];
            data.is_checked = false;
            Vue.set(this.filters, data, i);
            break;
  
          case "invoices":
            this.selectedFields.splice(index, 1);
            this.invoiceChecked = false;
            var i = this.filters.findIndex(item =&gt; item.value === value);
            var data = this.filters[i];
            data.is_checked = false;
            Vue.set(this.filters, data, i);
            break;
        }
      },
      updateFilters() {
        this.selectedFilters = [];
        this.selectedFields.forEach(element =&gt; {
          this.selectedFilters.push(element.value);
        });
  
        if(this.selectedFilters.length == 0){
          this.selectedFilters = ['invoices', 'workorder_estimates'];
        }
  
        this.fetchData();
      },
      async fetchData() {
        var final = [];
        try {
          var result = await http.post("/estimate-invoice-search", {
            type: this.selectedFilters,
            search: {
              value: this.selectedFirstName + " " + this.selectedLastName
            },
            per_page: this.queryParams.per_page,
            page: this.queryParams.page,
            sort: this.queryParams.sort
          });
          this.total_rows = result.recordsFiltered;
          result.data.forEach(element =&gt; {
            element.full_name = element.first_name + " " + element.last_name;
            final.push(element);
          });
          this.rows = final;
        } catch (error) {
          console.log(error);
        }
      }
    },
    mounted() {}
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>now the method named <strong>clearTable</strong> here i want to reset my table to the point lie we see on page refresh in the method i used  <code>this.rows=[];</code> this clears all the rows which is exactly what i want but the text which shows the number of rows is still their and i cant seem to remove it please view the below image for clarification <a href="https://i.stack.imgur.com/5cS2j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5cS2j.png" alt="enter image description here"></a></p>
  
  <p>i read the documentation on <a href="https://www.npmjs.com/package/vue-bootstrap4-table" rel="nofollow noreferrer">link</a> but cant seem to find a solution for hiding the text, is their any way?</p>