Bootstrap-Vue: How to use checkboxes with Table component to filter data?

Question

I am using Bootstrap-Vue's TABLE component to display data. That is working fine.

However, I am unable to figure out how to toggle on/off some data items using a checkbox. For example, if a user checks the box for "open", the table will update and show only the items with a status of "open".

Can someone help me figure this out?

Here's my demo code: link to live sandbox code

<template>
  <div>
    <b-form-group label>
      <b-input-group>
        <b-form-input v-model="filter" placeholder="Type to search for a specific issue"></b-form-input>
        <b-input-group-append>
          <b-button :disabled="!filter" @click="filter = ''">Clear</b-button>
        </b-input-group-append>
      </b-input-group>
    </b-form-group>
    <b-form-group label="View Status:">
      <b-form-checkbox-group
        id="checkbox-group-1"
        v-model="selected"
        :options="options"
        name="flavour-1"
      ></b-form-checkbox-group>
    </b-form-group>
    <b-table :items="posts" :fields="fields" :filter="filter">
      <!-- A custom formatted column -->
      <template slot="name" slot-scope="data">{{ data.value.user }}</template>
    </b-table>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      filter: null,
      selected: ["pending"], // Must be an array reference!
      options: [
        { text: "Open", value: "open" },
        { text: "Assigned", value: "assigned" },
        { text: "Pending", value: "pending" },
        { text: "Closed", value: "closed" }
      ],
      rawPosts: [
        {
          userId: 1,
          status: "open",
          id: 1,
          title:
            "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
          body:
            "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
        },
        {
          userId: 1,
          status: "open",
          id: 2,
          title: "qui est esse",
          body:
            "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
        },
        {
          userId: 1,
          status: "closed",
          id: 3,
          title: "ea molestias quasi exercitationem repellat qui ipsa sit aut",
          body:
            "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
        },
        {
          userId: 1,
          status: "assigned",
          id: 4,
          title: "eum et est occaecati",
          body:
            "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
        },
        {
          userId: 1,
          status: "pending",
          id: 5,
          title: "nesciunt quas odio",
          body:
            "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque"
        }
      ],
      users: [
        {
          uid: 1,
          firstname: "Claiborne",
          lastname: "Heberden",
          email: "[email protected]"
        },
        {
          uid: 2,
          firstname: "Gerick",
          lastname: "Tetla",
          email: "[email protected]"
        },
        {
          uid: 3,
          firstname: "Raymund",
          lastname: "Espy",
          email: "[email protected]"
        },
        {
          uid: 4,
          firstname: "Dilly",
          lastname: "Dimitriev",
          email: "[email protected]"
        },
        {
          uid: 5,
          firstname: "Roby",
          lastname: "Tabner",
          email: "[email protected]"
        }
      ],
      fields: [
        { key: "id" },
        { key: "title" },
        { key: "body" },
        { key: "user", label: "Assigned To" }
      ]
    };
  },
  created() {
    //this.loadPosts();
    //this.loadNames();
  },
  methods: {
    userFrom(id) {
      const user = this.users.find(user => user.uid === id);
      return user ? `${user.lastname}, ${user.firstname}` : "not assigned";
    }
  },
  computed: {
    posts() {
      if (this.rawPosts.length && this.users.length) {
        return this.rawPosts.map(rawPost => ({
          ...rawPost,
          user: this.userFrom(rawPost.userId)
        }));
      } else {
        console.log("some not assigned");
      }
    }
  }
};
</script>

TJ Weems · Accepted Answer · 2019-05-20 23:09:18Z

3

if you want to filter based off status you could just string a filter method on to the end of your computed property posts

some thing like this

posts() {
      if (this.rawPosts.length && this.users.length) {
        return this.rawPosts.map(rawPost => ({
          ...rawPost,
          user: this.userFrom(rawPost.userId)
        })).filter(post => post.status == this.selected);
      } else {
        console.log("some not assigned");
      }
    }

All I did was add this

.filter(post => post.status == this.selected);

Update: or if you want to show for each checked status you can do this

 .filter(post => this.selected.includes(post.status));

edited May 20, 2019 at 23:09

answered May 20, 2019 at 22:08

TJ Weems

1,1143 gold badges22 silver badges40 bronze badges

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

4 Comments

redshift Over a year ago

I tried that and I can only select one item at a time. How can we make it work so if you select more than one checkbox (e.g, "pending" and "open") it will show all of those items in the table?

TJ Weems Over a year ago

@redshift, any luck?

redshift Over a year ago

Yes, it worked great. I chose to go with this approach rather than the other as it made more sense to me, however, I did learn something from Matt. Thanks!

TJ Weems Over a year ago

@redshift, awesome to hear. no problem!

Matt Oestreich · Accepted Answer · 2019-05-21 00:19:06Z

I have edited that CodeSandbox.. something like this should work:

Edit: cleaned it up so that it is closer to what you originally had (changed the watch to a computed property and renamed variables back to what you had them named)..

Edit2: that is my final product - cleaned it up more, made it shorter and easier to read.

CodeSandbox:

Code Snippet:

new Vue({
  el: "#app",
  data() {
    return {
      filter: null,
      selected: ["open"], // Must be an array reference!
      options: [
        { text: "Open", value: "open" },
        { text: "Assigned", value: "assigned" },
        { text: "Pending", value: "pending" },
        { text: "Closed", value: "closed" }
      ],
      rawPosts: [
        {
          userId: 1,
          status: "open",
          id: 1,
          title:
            "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
          body:
            "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
        },
        {
          userId: 1,
          status: "open",
          id: 2,
          title: "qui est esse",
          body:
            "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
        },
        {
          userId: 2,
          status: "closed",
          id: 3,
          title: "ea molestias quasi exercitationem repellat qui ipsa sit aut",
          body:
            "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
        },
        {
          userId: 2,
          status: "assigned",
          id: 4,
          title: "eum et est occaecati",
          body:
            "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
        },
        {
          userId: 4,
          status: "pending",
          id: 5,
          title: "nesciunt quas odio",
          body:
            "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque"
        }
      ],
      users: [
        {
          uid: 1,
          firstname: "Claiborne",
          lastname: "Heberden",
          email: "[email protected]"
        },
        {
          uid: 2,
          firstname: "Gerick",
          lastname: "Tetla",
          email: "[email protected]"
        },
        {
          uid: 3,
          firstname: "Raymund",
          lastname: "Espy",
          email: "[email protected]"
        },
        {
          uid: 4,
          firstname: "Dilly",
          lastname: "Dimitriev",
          email: "[email protected]"
        },
        {
          uid: 5,
          firstname: "Roby",
          lastname: "Tabner",
          email: "[email protected]"
        }
      ],
      fields: [
        { key: "id" },
        { key: "title" },
        { key: "body" },
        { key: "user", label: "Assigned To" }
      ]
    };
  },
  created() {
    //this.loadPosts();
    //this.loadNames();
  },
  methods: {
    userFrom(id) {
      const user = this.users.find(user => user.uid === id);
      return user ? `${user.lastname}, ${user.firstname}` : "not assigned";
    },
    postsFromStatus() {
      return this.rawPosts.filter(o => this.selected.includes(o.status));
    },
    mapPostsAndUsers(posts) {
      return posts.map(post => ({
        ...post,
        user: this.userFrom(post.userId)
      }));
    }
  },
  computed: {
    posts() {
      return this.rawPosts.length && this.users.length
        ? this.selected.length === 0
          ? this.mapPostsAndUsers(this.rawPosts)
          : this.mapPostsAndUsers(this.postsFromStatus())
        : console.log("some not assigned");
    }
  }
})

#app {
  background-color: #fefefe;
  padding: 1rem 2rem 0 2rem;
  border: none !important;
  margin-bottom: 1rem;
}

/** ADDED FOR BREVITY
 *  REMOVE THIS TO SEE ALL DATA IN A CELL*/
td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/** */

<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<link href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" rel="stylesheet"/>

<div id="app">
  <div class="main">
    <b-container>
      <b-form-group label>
        <b-input-group>
          <b-form-input v-model="filter" placeholder="Type to search for a specific issue"></b-form-input>
          <b-input-group-append>
            <b-button :disabled="!filter" @click="filter = ''">Clear</b-button>
          </b-input-group-append>
        </b-input-group>
      </b-form-group>
      <b-form-group label="View Status:">
        <b-form-checkbox-group id="checkbox-group-1" v-model="selected" :options="options" name="flavour-1"></b-form-checkbox-group>
      </b-form-group>
      <b-table :items="posts" :fields="fields" :filter="filter">
        <!-- A custom formatted column -->
        <template slot="name" slot-scope="data">{{ data.value.user }}</template>
      </b-table>
    </b-container>
  </div>
</div>

CodePen:

Click here for CodePen

@redshift - I cleaned it up a lot, as to match how you originally had it. Using a computed property, as well as renamed props back to what you had them. Does that work for you?
Thanks, Matt. I ended up not going this route but I did learn something from your answer. Thank you very much!
No problem! I would have to agree, @TJWeems answer is pretty awesome! Simplicity is key - I def overthought that one.. Learned something myself, that's the important thing. Cheers!!

Collectives™ on Stack Overflow

Bootstrap-Vue: How to use checkboxes with Table component to filter data?

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related