New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table+Pagination + Filter don't work #650

Closed
itielshwartz opened this Issue Jul 5, 2017 · 10 comments

Comments

Projects
None yet
4 participants
@itielshwartz

itielshwartz commented Jul 5, 2017

You can see it on the docs:
https://bootstrap-vue.js.org/docs/components/table/ has a bug with pagination + filter
-> when doing a filter the number of pages doesn't change.
this happens because when using the filter on the table the actual items won't change -> causing a wrong number of pages.

I found the source of it:

                items = items.slice();

                // Apply local filter
                if (filter && !this.providerFiltering) {
                    if (filter instanceof Function) {
                        items = items.filter(filter);
                    } else {
                        let regex;
                        if (filter instanceof RegExp) {
                            regex = filter;
                        } else {
                            regex = new RegExp('.*' + filter + '.*', 'ig');
                        }
                        items = items.filter(item => {
                            const test = regex.test(recToString(item));
                            regex.lastIndex = 0;
                            return test;
                        });
                    }
                }

The table inner filter dosn't effect the real items,
Sadly im still new to Vue (and front end) so not sure how to fix...

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 5, 2017

Since pagination controls are one-way props into <b-table>, unfortunately it can't update the number of pages in the parent component context.

I have been contemplating creating a new event to emit that returns the number of pages and current page number) when filter is applied, and deactivated.

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 5, 2017

We don't alter (mutate) the original items, as that wouldn't be nice to your parent component. So we make a shallow copy of the array and manipulate that.

@itielshwartz

This comment has been minimized.

itielshwartz commented Jul 5, 2017

@tmorehouse can't the table expose the new items? so we can just use it from outside?
just add it as another data field (shallowCopyItems), and make the shallow copy change the data.shallowCopyItems?

Sorry can't help more.

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 6, 2017

Vue 2.x only allows a single two-way prop (the v-model), which is currently bound to the value (the currently displayed items). All other props are one-way (top down). See http://vuejs.org/v2/guide/migration.html#twoWay-Prop-Option-removed

The only other way to communicate upwards is via emitting events.

@mosinve

This comment has been minimized.

Member

mosinve commented Jul 6, 2017

It's strange, as i fixed this long ago...
the reason of bug IMHO, here https://github.com/bootstrap-vue/bootstrap-vue/blob/master/lib/components/table.vue#L381
emitted filtered and paged data instead only filtered.

here 's my commit, which made this work 32cf658

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 6, 2017

@mosinve table value (v-model) is now only the displayed records (after pagination was introduced), as when a row-clicked event occurs it provides the index within the displayed items only. Maybe we could emit another event that provides the filtered list (if filtered is run local in the b-table.) It could be emitted just after filtering happens, or it could wait until the end of the _items computed prop to emit it.

tmorehouse added a commit that referenced this issue Jul 6, 2017

feat(table): Emit event when local filtering changes number of result…
… items - issue #650 (#652)

* feat(table): Emit event filtered when filter applied
Emits only when local filtering results in a change in number of items.  Supplies one arg to the event which is the list of filtered items.

* fix(table): Igmore underscore props in record stringification

* feat(table): documentation update and enhanced live example
@rdgout

This comment has been minimized.

rdgout commented Jul 10, 2017

@tmorehouse
FYI 2 way prop option has been brought back since VueJS 2.3.
See here for more information: .sync modifier

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 10, 2017

Yeah, I noticed that a while ago.

This might be something we consider in a future release, specifically for props that flow only upwards from the component to the parent, as we now have Vue 2.3.3 as a minimum dependency.

@itielshwartz

This comment has been minimized.

itielshwartz commented Jul 16, 2017

Hi @tmorehouse any estimation when 0.19?
Would like to have it before deploying my new site.

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 16, 2017

I am not positive on the release date for 0.19.0. I will check with the @dev team

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment