Search code examples
vue.jsvuejs2vue-tables-2

vue-tables-2 filtering arguments passed from parent component


Is it possible to use the default filtering on client tables in vue-tables-2 externally?

I have a parent component holding multiple vue tables and want to be able to pass a string from the parent component to all of the child components which each house an instance of a vue-table.


Solution

  • With trying to keep all the logic client-side I think I'm going to create a layer between the raw table data and the vue-table and apply my logic in there as a computed function.

    edit- it worked.

    Here's what I did for the computed part

    computed: {
            searchRows: function () {
                var filteredRows = this.rows;
                var term = this.searchTerm;
                if(this.searchTerm) {
                    filteredRows = [];
                    this.rows.forEach(function(entry) {
                        if(String(entry.id).includes(term) || String(entry.name).includes(term)) {
                            filteredRows.push(entry);
                        }
                    });
                }
                return filteredRows;
            }
        },
    

    I linked the data on the table to the computed call.

    <v-client-table :columns="columns" :data="searchRows" :options="options">
    

    Only downside I can see is that if the table gets large enough it could cause a problem because now I'm storing up to 2 copies of it in memory.