[Vuejs]-Vuejs2: Vue Tables 2 – Multiple Custom filters

0👍

A potential solution to that is to sort the data before using it in your data-table. Start by creating a computed of your data but with all your potential filters in it and create data variables with “parameters” (sort direction, sort column…)

export default {
    title: "HelloWorld",
    props: {
        msg: String
    },
    data () {
        return {
            yourData: [],
            sortBy: 'name',
            sortDir: 'asc',
            filterSearch: ''
        }
    },
    computed: {
        filteredData () {
            if (filterSearch != '') {
                let _this = this;
                return this.sortedData.filter(item => {
                    return item.name.toLowerCase().includes(_this.filterSearch.toLowerCase());
                })
            } else {
                return this.sortedData;
            }
        },
        sortedData() {
            return this.yourData.sort((a, b) => {
                let modifier = 1;
                if (this.sortBy == "order") {
                    if (this.sortDir === 'asc') {
                        return a[this.sortBy] - b[this.sortBy]
                    } else if (this.sortDir === 'desc') {
                        return b[this.sortBy] - a[this.sortBy]
                    }
                } else {
                    if (this.sortDir === 'desc') modifier = -1;
                    if (a[this.sortBy] < b[this.sortBy]) return -1 * modifier;
                    if (a[this.sortBy] > b[this.sortBy]) return modifier;
                    return 0;
                }
            });
        }
    }
}

With that you just have to replace the props value you use to pass data to your VueTables

Leave a comment