Vue-good-table: Searching table clears selected checkboxs on ui

[JevPrentice]

Issue Type (delete the irrelevant ones)

• [x] Bug

Specs

MacBook Pro (Retina, 15-inch, Mid 2015)

What browser?
Chrome - Version 66.0.3359.181 (Official Build) (64-bit)

Expected Behavior

On vue-good-table should the user select a checkbox and then type a search query the ui should still reflect that the original item was selected

Actual Behavior

On vue-good-table should the user select a checkbox and then type a search query the ui no longer reflects which checkboxes were already selected

Steps to Reproduce the Problem

1. Navigate to https://jsfiddle.net/aks9800/keLjcssn/
2. Select John
3. Search for "J" in the search box
4. John no longer displays as selected

jsfiddle

1. Navigate to https://jsfiddle.net/aks9800/keLjcssn/

[xaksis]

@JevPrentice this was done by design after the following discussion:
https://github.com/xaksis/vue-good-table/issues/233

What is your use-case? Since filtering might hide selected rows and in most cases would render select-all to false. What do you think should be the proposed behavior?

[JevPrentice]

Hi @xaksis thanks for the quick response and for the great vue-good-table

What I am trying to accomplish with the checkbox inside the table is to allow the user to select multiple items within the table, that has potentially many records, the vue-good-table with select-options seems the perfect solution here.

I wish to maintain an array of the items the user has selected until they finally press save, and i can use the result.

Using https://jsfiddle.net/aks9800/keLjcssn/ to explain:

When updating my own array using the methods selectAll or toggleSelectRow this is working 100% as expected when the user filters (the filtering has no effect on the array), its just that on the UI the selected items in the table are no longer 'checked' on the ui after a filter is done - even though my array has not been changed.

If i search for "john", and select him, then search susan and select her, then search john again I would like that record to remain checked so that the user can see they are still selected.

Imagining a list of 1000+ records where we cant see them all at once a user may need to search several times

[zacharytyhacz]

@xaksis Any update on this? I'm wanting to make use of this feature where user can search without the already selected data being cleared.

Maybe make a new search option like:

:search-options="{
    enabled: true,

    persistSelected : true, 

    trigger: 'enter',
    skipDiacritics: true,
    searchFn: mySearchFn,
    placeholder: 'Search this table',
    externalQuery: searchQuery
  }">

??

Just a theory. I can take a look at the source and possibly create a pull request if it's not too much of my time.

Let us know if you push a change regarding this issue.

[jtlevy]

@xaksis we are wanting this feature as well.

Do you plan on supporting searching for a row, selecting row, the searching again while preserving the prior row selections?

[focus97]

Figured out a workaround for others struggling on this. Vue Good Table is awesome but we needed to be able to select rows and not have them clear on search. I looked through the VGT source and found that within the search functions the table selections are first reset before search begins. Seems to be done for a reason, but for us, the most common use case is for users to see rows in the table, click to select a row, then search (or paginate) for other rows to select. It's crucial that the selected rows remain selected.

Here's our HTML:

<!-- the same search UI as the vue-good-table -->
<div class="tt-search vgt-global-search vgt-clearfix"><div class="vgt-global-search__input vgt-pull-left"><span class="input__icon"><div class="magnifying-glass"></div></span> <input type="text" v-model="searchTerm" v-on:keyup="searchingTable" placeholder="Filter this table by First name, Last name, or registration date" class="vgt-input vgt-pull-left"></div> <div class="vgt-global-search__actions vgt-pull-right"></div></div>

<!-- vue-good-table component below -->
<vue-good-table
    @on-row-click="rowClicked"
    :columns="columns"
    :rows="patients"
    :row-style-class="rowStyleClassFn"
    :search-options="{
        enabled: true,
        placeholder: 'Filter this table by First name, Last name, or registration date',
        externalQuery: searchTerm
    }
    ">
    <template slot="table-row" slot-scope="props">
        <span v-if="props.column.field == 'fname'" v-bind:id="'user-row-' + props.row.user_id">
            {{props.formattedRow[props.column.field]}}
        </span>
    </template>
</vue-good-table>

Note that we're using a template slot so that we can add a <span> that binds the user_id as an actual id attribute.

And in methods:

rowClicked: function(params){
    if(params.event.target.parentElement.classList.contains('selected')){ // is the row already selected? 
        params.event.target.parentElement.classList.remove('selected'); // remove the selection class 
        var newArray = this.virtualMeetInvitees.filter(function(obj){ 
            return obj.user_id !== params.row.user_id; // and let's filter our this.virtualMeetInvitees list to *not* include the row clicked 
        });
        this.virtualMeetInvitees = newArray; // now assign to instance with the row removed 
    } else {
        this.virtualMeetInvitees.push(params.row); // if not selected, let's add to the row data instance 
        params.event.target.parentElement.classList.add('selected'); // and highlight the row 
    }
},
searchingTable: function(){ // this will fire on each keyup on our external search input, even when the input is cleared. sweet. 
    if(this.virtualMeetInvitees.length){
        this.$nextTick(()=>{
            this.virtualMeetInvitees.forEach((obj)=>{ // loop over each invitee 
                var row = document.getElementById('user-row-' + obj.user_id); // find row that matches our invited invitee 
                if(row){ // simple guard to ensure it's there (it should be but whatever)
                    row.parentElement.parentElement.classList.add('selected');
                }
            });
        });
    }
}

One key to making it work was to remove the checkboxes and just make the whole row clickable. In the rowClicked() method, you can access anything that was fed to that row in the table. In our case we add the row's object to our data instance.

The other key to make it work was to use VGT's external search query. With that, we defined our own search input (but used VGT's HTML + classes so the row would look just like VGT's native search input). On this custom input, the searchingTable() allows us to capture every keyup, including when the search field is cleared.

Hope it helps someone else or at least points you toward a solution.

[jtlevy]

@focus97 outstanding!! Exactly what we needed. Thanks for sharing!

[francescomugnai]

@focus97 Brilliant! Thank you so much, it works like a charm!

[focus97]

@francescomugnai - you bet! Glad it worked for you.

[Herz3h]

Would be nice to have this implemented, I think it's a common use case to search, select, search again