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

Trouble with translating code from JavaScript to Python due to hash algorithm discrepancy

Ajax is displaying some unusual behavior

Mastering the ng-submit directive for AngularJS

Developing a custom npm package that integrates both Vue and Vuex for seamless integration in a

Unable to get PrependTo to remove itself when clicked

Display a spinning wheel or progress bar while the website is in the process of loading

Attempting to create an auto-suggestion tool that can process and accept multiple input values, filtering out only those that begin with a designated character

What is the process of integrating BootstrapVue into our Vue.js project?

Tips for simulating focus on a Material-ui TextField with a button press

Firefox triggers drag events while passing over a div scrollbar

Sticky header in React data grid

In jQuery, utilizing dynamic class names with variables

What is the best way to arrange an array or display it accurately?

Issue with loading CSS and JavaScript following a GET request

What could be causing the Metamask account address to return as undefined even after it was stored in the useState() function?

Navigate to the location using AngularJS elements in the JavaScript iframe1

Formik's setField function is not properly updating the value of an array when using Material UI's autocomplete

Is node.js required for utilizing Angularjs?

Encountering issues with Office.context.document.getFileAsync function

Using ajax to submit a request to the controller