CODEWITHSUNDEEP
javascriptvue.js
JayK23
JayK23

Reputation: 253

Filtering a bootstrap-vue datatable in Vue

I created a very simple table with bootstrap-vue where i can filter my data using the built-in filter. The problem i have now is that i want to add another filter where i can input a number and get all the rows where value is higher than the specified number. I don't really know where to start with this, since i'm already using a filter. Can anyone suggest an approach i can take for thi? Any advice is appreciated.

<template>
  <div class="overflow-auto">
    <b-form-fieldset horizontal label="Filter" class="col-6">
      <b-input v-model="filter" placeholder="Filter table.."></b-input>
    </b-form-fieldset>

    <b-table
      id="my-table"
      :filter="filter" 
      :fields="fields"
      :items="items"
      small
    ></b-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filter: '',
      fields: [{'key': 'asset', 'sortable': true}, {'key': 'value', 'sortable': false}, {'key': 'address', 'sortable': false}],
      items: []
    }
  },

  computed: {
    rows() {
      return this.items.length
    }
  },

}
</script>

Upvotes: 0

Views: 715

Answers (1)

blex
blex

Reputation: 25634

If you want to keep the existing filter and add yours, you could create a computed property, for example prefilteredItems and use it in your template:

<template>
  <!-- ... -->
  <b-input v-model="minValue" placeholder="Minimum value..."></b-input>
  <!-- ... -->
  <b-table
    :items="prefilteredItems"
  ></b-table>
</template>

<script>
export default {
  data() {
    return {
      filter: '',
      minValue: 0,
      /* ... */
      items: []
    }
  },
  computed: {
    prefilteredItems() {
      return this.items.filter(({ value }) => value >= this.minValue);
    },
    rows() {
      return this.prefilteredItems.length
    }
  },
}
</script>

Upvotes: 1

Related Questions