Bootstrap-vue: How to filter second set of data using built in table filtering component?

Question

I am using VueJS and Bootstrap-vue's table component and its filtering option to filter table data. However, it looks like the Bootstrap/Table filtering component can only be applied to original items array data, and hence "it is not currently possible to filter data based on custom rendering of virtual columns" according to the documentation: https://bootstrap-vue.js.org/docs/components/table#filtering

My situation is that I have an original array of data that only contains ids of users, but I have another data array that contains the ids and actual names of users. thus, in my table, rather than showing user Ids, I want to show the actual names. I created a custom "formatter" callback function (docs) and can show the names in the table, but the filter component won't search through that due to it not being part of the original data array.

Is there another way I can approach this so I can also have the filter search through the "Assigned To" column?

My demo code here Click the "POSTS" link in that editor

<template>
  <div>
    <b-table :items="posts" :fields="fields">
      <!-- A custom formatted column -->
      <template slot="name" slot-scope="data">{{ data.value.userId }}</template>
    </b-table>
  </div>
</template>

<script>
import axios from "axios";
import users from "../assets/users.json";
export default {
  data() {
    return {
      posts: [],
      users: [],
      // key name is the slot name
      fields: [
        { key: "id" },
        { key: "title" },
        { key: "body" },
        { key: "userId", label: "Assigned To", formatter: "assignNames" }
      ]
    };
  },
  created() {
    this.getPosts();
    this.getNames();
  },
  methods: {
    getPosts() {
      axios.get("https://jsonplaceholder.typicode.com/posts").then(resp => {
        this.posts = resp.data;
      });
    },
    getNames() {
      setTimeout(
        () =>
          Promise.resolve(users).then(resp => {
            this.users = resp.data;
          }),
        1234
      );
    },
    assignNames(id) {
      const user = this.users.find(user => user.id === id);
      return user ? `${user.first_name} ${user.last_name}` : "loading...";
    }
  }
};
</script>

Slim Slim · Accepted Answer · 2019-05-19T17:12:46

You need to create an array on top of posts and users. It's allways good to prepare datas as they are needed for display.

Computed properties are good for that.

Also, since users come from sync json you don't need promise or setTimeout.

<script>
    import axios from "axios";
    import users from "../assets/users.json";
    export default {
        data() {
            return {
                rawPosts: [],
                // key name is the slot name
                fields: [
                    { key: "id" },
                    { key: "title" },
                    { key: "body" },
                    { key: "user", label: "Assigned To" }
                ]
            };
        },
        created() {
            this.loadPosts();
        },
        methods: {
            loadPosts() {
                axios.get("https://jsonplaceholder.typicode.com/posts").then(resp => {
                    this.rawPosts = resp.data;
                });
            },
            userFrom(id) {
                const user = users.data.find(user => user.id === id);
                return user && `${user.first_name} ${user.last_name}`;
            }
        },
        computed:{
            posts(){
                if(this.rawPosts.length && users.length){
                    return this.rawPosts.map(rawPost => ({...rawPost, user: this.userFrom(rawPost.userId)}));
                }else{
                    //loading case
                }
            }
        }
    };
</script>

Bootstrap-vue: How to filter second set of data using built in table filtering component?

1 Answers