Filtering a bootstrap-vue datatable in Vue

Question

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>

Does this answer your question? bootstrap-vue.org/docs/components/table#custom-filter-function — blex
– blex, Commented May 15, 2021 at 22:53
Not really, because in my case i would need to have multiple filters, but i found nothing about that case on the docs — JayK23
– JayK23, Commented May 15, 2021 at 22:54
If you want to keep the existing filter and add yours, you could create a computed property, for example prefilteredItems() { return this.items.filter(({value}) => value > 3); } and use it in your template :items="prefilteredItems" (replacing 3 with the value of a field you might have but which is not in your code snippet) — blex
– blex, Commented May 15, 2021 at 22:57
That would make sense, as long as the original array is not mutated. — JayK23
– JayK23, Commented May 15, 2021 at 23:05
@blex i tried this and it worked. Is there any way you can post this as an aswer so that i can accept it? — JayK23
– JayK23, Commented May 15, 2021 at 23:35

blex · Accepted Answer · 2021-05-15 23:41:25Z

1

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>

answered May 15, 2021 at 23:41

blex

25.7k6 gold badges48 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Filtering a bootstrap-vue datatable in Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related