Enhance Your Vue Tables with Unique Custom Filters

Question

Enhance Your Vue Tables with Unique Custom Filters

I'm currently working on implementing https://github.com/matfish2/vue-tables-2 in Vue 2.1.8.

Everything seems to be functioning flawlessly, but I need to incorporate custom filters to format certain fields based on their values.

In my options object, I have the following:

customFilters: [
{
  name:'count',
  callback: function(row, query) {
    console.log('see me?'); // Not triggering this
    return row.count[0] == query;
}
}
]

The documentation suggests using the event bus like so:

Using the event bus:

Event.$emit('vue-tables.filter::count', query);

However, I am unsure where to place this code. I have attempted placing it in various locations, such as within my axios success callback, with no success.

This may seem like a basic issue that I should already know how to resolve, but unfortunately, I am unsure. Any guidance on where to implement the event bus functionality would be greatly appreciated!

javascript vue.js vuejs2 vue-tables-2

Answer 1

Answer №1

The documentation could use some improvement in explaining this concept. It's a bit challenging to grasp the idea.

To make use of the event bus in vue-tables-2, you need to import the named export Event. This will allow you to have access to the table's event bus and emit custom events within your click handler.

In the demo, the named export is available on the global object. In ES6, you can import it as shown in the documentation using

import { ServerTable, ClientTable, Event } from 'vue-tables-2';

Feel free to check out the alphabet filter demo below or on this sandbox.

This demo is similar to the demo fiddle for vue-tables-1 which can be accessed here.

// Vue.use(VueTables)
const ClientTable = VueTables.ClientTable
const Event = VueTables.Event // import eventbus

console.log(VueTables);
Vue.use(ClientTable)

new Vue({
  el: "#people",
  methods: {
    applyFilter(letter) {
      this.selectedLetter = letter;
      Event.$emit('vue-tables.filter::alphabet', letter);
    }
  },
  data() {
    return {
      letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      selectedLetter: '',
      columns: ['id', 'name', 'age'],
      tableData: [{
        id: 1,
        name: "John",
        age: "20"
      }, {
        id: 2,
        name: "Jane",
        age: "24"
      }, {
        id: 3,
        name: "Susan",
        age: "16"
      }, {
        id: 4,
        name: "Chris",
        age: "55"
      }, {
        id: 5,
        name: "Dan",
        age: "40"
      }],
      options: {
        // see the options API
        customFilters: [{
          name: 'alphabet',
          callback: function(row, query) {
            return row.name[0] == query;
          }
        }]
      }
    }
  }
});

#people {
  text-align: center;
  width: 95%;
  margin: 0 auto;
}
h2 {
  margin-bottom: 30px;
}
th,
td {
  text-align: left;
}
th:nth-child(n+2),
td:nth-child(n+2) {
  text-align: center;
}
thead tr:nth-child(2) th {
  font-weight: normal;
}
.VueTables__sort-icon {
  margin-left: 10px;
}
.VueTables__dropdown-pagination {
  margin-left: 10px;
}
.VueTables__highlight {
  background: yellow;
  font-weight: normal;
}
.VueTables__sortable {
  cursor: pointer;
}
.VueTables__date-filter {
  border: 1px solid #ccc;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
}
.VueTables__filter-placeholder {
  color: #aaa;
}
.VueTables__list-filter {
  width: 120px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dea8abbbf3aabfbcb2bbadf3ec9eeff0eaf0e9ee">[email protected]</a>/dist/vue-tables-2.min.js"></script>
<div id="people">
  <button @click="applyFilter(letter)" class="btn btn-default" v-for="letter in letters" :class="{active: letter==selectedLetter}">
    {{letter}}
  </button>
  <button  class="btn btn-default" @click="applyFilter('')">
  clear
  </button>
  <v-client-table :data="tableData" :columns="columns" :options="options"></v-client-table>
</div>

Answer 2

The documentation could use some improvement in explaining this concept. It's a bit challenging to grasp the idea.

To make use of the event bus in vue-tables-2, you need to import the named export Event. This will allow you to have access to the table's event bus and emit custom events within your click handler.

In the demo, the named export is available on the global object. In ES6, you can import it as shown in the documentation using

import { ServerTable, ClientTable, Event } from 'vue-tables-2';

Feel free to check out the alphabet filter demo below or on this sandbox.

This demo is similar to the demo fiddle for vue-tables-1 which can be accessed here.

// Vue.use(VueTables)
const ClientTable = VueTables.ClientTable
const Event = VueTables.Event // import eventbus

console.log(VueTables);
Vue.use(ClientTable)

new Vue({
  el: "#people",
  methods: {
    applyFilter(letter) {
      this.selectedLetter = letter;
      Event.$emit('vue-tables.filter::alphabet', letter);
    }
  },
  data() {
    return {
      letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      selectedLetter: '',
      columns: ['id', 'name', 'age'],
      tableData: [{
        id: 1,
        name: "John",
        age: "20"
      }, {
        id: 2,
        name: "Jane",
        age: "24"
      }, {
        id: 3,
        name: "Susan",
        age: "16"
      }, {
        id: 4,
        name: "Chris",
        age: "55"
      }, {
        id: 5,
        name: "Dan",
        age: "40"
      }],
      options: {
        // see the options API
        customFilters: [{
          name: 'alphabet',
          callback: function(row, query) {
            return row.name[0] == query;
          }
        }]
      }
    }
  }
});

#people {
  text-align: center;
  width: 95%;
  margin: 0 auto;
}
h2 {
  margin-bottom: 30px;
}
th,
td {
  text-align: left;
}
th:nth-child(n+2),
td:nth-child(n+2) {
  text-align: center;
}
thead tr:nth-child(2) th {
  font-weight: normal;
}
.VueTables__sort-icon {
  margin-left: 10px;
}
.VueTables__dropdown-pagination {
  margin-left: 10px;
}
.VueTables__highlight {
  background: yellow;
  font-weight: normal;
}
.VueTables__sortable {
  cursor: pointer;
}
.VueTables__date-filter {
  border: 1px solid #ccc;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
}
.VueTables__filter-placeholder {
  color: #aaa;
}
.VueTables__list-filter {
  width: 120px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dea8abbbf3aabfbcb2bbadf3ec9eeff0eaf0e9ee">[email protected]</a>/dist/vue-tables-2.min.js"></script>
<div id="people">
  <button @click="applyFilter(letter)" class="btn btn-default" v-for="letter in letters" :class="{active: letter==selectedLetter}">
    {{letter}}
  </button>
  <button  class="btn btn-default" @click="applyFilter('')">
  clear
  </button>
  <v-client-table :data="tableData" :columns="columns" :options="options"></v-client-table>
</div>

Answer 3

Answer №2

This particular tutorial really resonated with me. Visit the lesson here

In essence: The lesson emphasizes emitting events using the vue-events package or computing properties with Vuex (highly recommended). An important feature to note is the usage of :append-params="moreParams" on vuetable, as it appends additional values to the api-url, distinct from existing pagination parameters. For my setup, I opted for utilizing Vuex and making moreParams a computed property of the vuetable. This computed property leverages this.$store.getters.moreParams, aligning perfectly with my requirement for multiple search fields. It reacts responsively to changes in Vuex commits triggered by input field interactions.

    computed: {
      moreParams() {
        return this.$store.getters.moreParams
      },
    },

An alternative approach involves using $store.stage.property. I implemented a watch on moreParams that automatically refreshes the table upon querying:

    watch: {
      moreParams(newVal, oldVal) {
        this.$nextTick(() => {
          this.$refs.vuetable.refresh()
        })
      },
    },

Answer 4

This particular tutorial really resonated with me. Visit the lesson here

In essence: The lesson emphasizes emitting events using the vue-events package or computing properties with Vuex (highly recommended). An important feature to note is the usage of :append-params="moreParams" on vuetable, as it appends additional values to the api-url, distinct from existing pagination parameters. For my setup, I opted for utilizing Vuex and making moreParams a computed property of the vuetable. This computed property leverages this.$store.getters.moreParams, aligning perfectly with my requirement for multiple search fields. It reacts responsively to changes in Vuex commits triggered by input field interactions.

    computed: {
      moreParams() {
        return this.$store.getters.moreParams
      },
    },

An alternative approach involves using $store.stage.property. I implemented a watch on moreParams that automatically refreshes the table upon querying:

    watch: {
      moreParams(newVal, oldVal) {
        this.$nextTick(() => {
          this.$refs.vuetable.refresh()
        })
      },
    },

Answer 5

Answer №3

Make the default filter and per page selection box disappear, and introduce a new filter called 'manual_agent'.

        optionsTable: {
            customFilters: ['manual_agent'],
            filterable: false,
            perPageValues: []
        },

The reason for hiding them is that there is no 'slot' option available to insert new custom filters between the default ones and the per page select box, and the default ones are not very responsive either. The following example pertains to server table implementation.

Here is the method to globally utilize custom filters:

toggleFilter: function(filterName, $event) {
                this.$refs.serverTableRef.setPage(1);
                setTimeout(function () {
                    let searchItem = '';
                    if (typeof $event === 'string') { searchItem = $event; } else { searchItem = $event.target.value; }
                    let table = this.$refs.serverTableRef;
                    table.customQueries[filterName] = searchItem;
                    table.getData();
                }.bind(this), 1000);
            }

In order for this to function properly, we must have a defined ref name on our v-server table like so:

<v-server-table ref="serverTableRef"

Next, in the template create a new custom select box filter (the v-model refers to a custom variable defined in data)

<select name="typeoftrip" v-model="agentFilter" @change="toggleFilter('manual_agent', agentFilter)">

Then add a custom filter that will replace the lost default filter by disabling it. (it used 'query' name so we use the same one)

<input name="typeoftrip" v-model="mainQuery" v-on:keyup="toggleFilter('query', mainQuery)">

Lastly, include a new custom select for our own per page selection

            <select v-model="limitFilter"  @change="$refs.serverTableRef.setLimit($event.target.value)" >
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
            </select>

Answer 6

Make the default filter and per page selection box disappear, and introduce a new filter called 'manual_agent'.

        optionsTable: {
            customFilters: ['manual_agent'],
            filterable: false,
            perPageValues: []
        },

The reason for hiding them is that there is no 'slot' option available to insert new custom filters between the default ones and the per page select box, and the default ones are not very responsive either. The following example pertains to server table implementation.

Here is the method to globally utilize custom filters:

toggleFilter: function(filterName, $event) {
                this.$refs.serverTableRef.setPage(1);
                setTimeout(function () {
                    let searchItem = '';
                    if (typeof $event === 'string') { searchItem = $event; } else { searchItem = $event.target.value; }
                    let table = this.$refs.serverTableRef;
                    table.customQueries[filterName] = searchItem;
                    table.getData();
                }.bind(this), 1000);
            }

In order for this to function properly, we must have a defined ref name on our v-server table like so:

<v-server-table ref="serverTableRef"

Next, in the template create a new custom select box filter (the v-model refers to a custom variable defined in data)

<select name="typeoftrip" v-model="agentFilter" @change="toggleFilter('manual_agent', agentFilter)">

Then add a custom filter that will replace the lost default filter by disabling it. (it used 'query' name so we use the same one)

<input name="typeoftrip" v-model="mainQuery" v-on:keyup="toggleFilter('query', mainQuery)">

Lastly, include a new custom select for our own per page selection

            <select v-model="limitFilter"  @change="$refs.serverTableRef.setLimit($event.target.value)" >
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
            </select>

Answer 7

Answer №4

Check out the updated fiddle if you're interested in experimenting with it. I'm still figuring out how to get it to work with nested, single page components.

customFilters: [{
  name: 'alphabet',
  callback: function(row, query) {
    return row.name[0] == query;
  }
}]

Answer 8

Check out the updated fiddle if you're interested in experimenting with it. I'm still figuring out how to get it to work with nested, single page components.

customFilters: [{
  name: 'alphabet',
  callback: function(row, query) {
    return row.name[0] == query;
  }
}]

Enhance Your Vue Tables with Unique Custom Filters

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Fetching an image from Firebase Storage for integration into a Vue application

Error in Vue.js 2 Composition API: Trying to access 'length' property of undefined object

What is the reason for Next.js and Gatsby.js necessitating the installation of Node.js, while React.js does not have that requirement?

Clicking on the parent page prevents the hyperlink inside the iframe from working as expected

What could be the reason behind my Vue custom directives not functioning as expected?

The Material UI Rating Component is malfunctioning and showing an incorrect value

Incorporating an HTML element into a Vue template

What is the best way to fetch the id of the option that has been chosen from a bootstrap drop-down menu?

What could be causing my JavaScript/jQuery code to malfunction when dealing with checkboxes?

What is the best way to loop through a list of questions and save the answers in an array of user input?

Modify the scoped variable using Angular's $resource module

View the edited image preview instantly upon selecting the image

Customizing the "Actions" Dropdown in APEX Interactive Grid

Connecting Vue component data to external state sources

What is causing my controller action to create two new records instead of just one?

Invoking a Typescript function from the Highcharts load event

Guide on setting up and customizing run.json within the latest JetBrains Fleet for Next.js

hasOwnProperty function yields no results

A guide to sharing session variables with express views

Converting sections of JSON data into boolean values