Vue Tables 2 Custom filter not working

Question

I am currently working on a table that displays logging data from different applications. The table shows data with no problem, since that seemingly was the easy part to get up.

Now I need a custom filter. This filter needs to highlight rows with the color red, if the value in "LogType" is 1 (i.e Logs which are Exceptions/Errors). However I have not been able to get the custom filter to work, after reading from their documentation. And other posts about custom filters, I could find on Stackoverflow where one seems to have a fix, but its seemingly not worked for me. (e.g Vue Tables 2 - Custom Filters)

As for the documentation about Vue tables 2, it might just be that I don't understand, what they really mean. As in what is needed to make it work. (vue-tables-2 - Custom filters Documentation)

I feel my problem might be, that the filter in the example needs to be activated by pressing a button. Where as mine needs to start as soon as there is data to filter. But I am completely not sure, since I can't get the custom filter to fire the "console.log()" I've placed inside, to see what data it returns.

The following code is my Vue code and options. The "getErrorLogs(false) Method called at the begining calls an AJAX call that returns with the data which is feed to the table, which works as it should.

    getErrorLogs(false)

    const ClientTable = VueTables.ClientTable
    const Event = VueTables.Event 

    Vue.use(ClientTable)

    vue = new Vue({
        el: "#vueErrorLogs",
        methods: {
            applyFilter(number) {
                this.selectedNumber = number;
                Event.$emit('vue-tables.filter::exceptions', number);
            }
        },
        data: {
            numbers: ['0','1'],
            selectedNumber: '',
            columns: ['ActionName', 'Message', 'LogTime', 'ID', 'LogType', 'Area', 'ApplicationUser'],
            data: {
                tableData: getData()
            },
            options: {
                headings: {
                    ActionName: 'Action Name',
                    Message: 'View Record',
                    LogTime: 'Log Time',
                    ID: 'ID',
                    LogType: 'Log Type',
                    Area: 'Code Area',
                    ApplicationUser: 'Application User',
                },
                sortable: ['ActionName', 'Message', 'ID', 'LogTime', 'LogType', 'Area', 'ApplicationUser'],
                filterable: ['ActionName', 'Message', 'ID', 'LogType', 'Area', 'ApplicationUser'], //LogTime is missing since datepicker dosent work
                perPage: 20,
                filterByColumn: true,
                toMomentFormat: true,
                orderBy: {
                    column: 'LogTime',
                    ascending: false
                },
                customFilters: [{
                    name: 'exceptions',
                    callback: function (row, query) {
                        console.log("Row: ", row, " Query: ", query)
                        return row.name[0] == query;
                    }
                }]
            }
        }
    });

    function getData() {
        var data = [{}]
        return data;
    }

This part of my code is the HTML code used for showing the vue table

<div id="vueErrorLogs">
    <v-client-table :columns="columns" :data="data.tableData" :options="options">
        <a slot="uri" slot-scope="props" target="_blank" :href="props.row.uri" class="glyphicon glyphicon-eye-open"></a>
    </v-client-table>
</div>

Update 1: So Far I've been able to rule out that I can't use v-bind:class to set the tags to get the bootstrap classes of "Success, danger or Info" assigned to them as I want.

Update 2: I've found a solution to my problem of adding color to the TR tags with bootstrap classes, it was simply to use the rowClassCallBack option and do your checking inside the function call and then return the wanted string name of the class. such as :

rowClassCallback: function (row) {
                    if (row.LogType == 1)
                        return 'danger'
                    else
                        return 'default'
                },

I still don't know why my Custom Filter dosen't work however

I'm struggling with exactly the same problem. It is not true that the custom filter does not work. In fact, it does, however if you look at the event queue, it looks like that, after the vue-tables.filter::myfilter, two other events are fired: vue-tables.filter::defaultfilter and filter::defaultfilter, emitted by <Root> and <ClientTable> respectively. So I guess that simply our custom filter gets "overridden" by the default one. Any clue? — ibanjo
In your case, moreover, it looks like that the applyFilter method is never called. You should hook to the default filtering event, something like vue-tables.filter::defaultColumnName. You can do so by adding Event.$on('vue-tables.filter::defaultColumnName', (payload) => {vue.applyFilter(payload)}); — ibanjo

Matanya Matanya · Accepted Answer · 2018-01-02T05:24:40

As their name implies custom filters are used to filter down rows, not to change their attributes (i.e in your case adding a tr class to match row data)
As @ibanjo noticed you never emit the event that activates the custom filter, which is why it doesn't work.
As you figured out yourself, the correct option was rowClassCallback

Vue Tables 2 Custom filter not working

1 Answers