Skip to content
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 filter super slow #4211

Comments

@sprocket99
Copy link

@sprocket99 sprocket99 commented Oct 7, 2019

Describe the bug

Filtering on a b-table with 800 or so rows is super slow, takes many seconds. No custom formatters or anything.

Expected behavior

Should be near instant.

Versions

Libraries:

  • BootstrapVue: 2.0.3

Environment:

  • OS: Windows 10
  • Browser: Chrome

Demo link

superslow

demo:
https://jsfiddle.net/unqh6axf/

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Oct 7, 2019

Duplicate: #4150, #4155

@Hiws
Copy link
Member

@Hiws Hiws commented Oct 7, 2019

Adding a debounce using the filter-debounce prop and adding a per-page of 100~ should greatly improve the user experience

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Oct 7, 2019

Filtering will never be "instant" due to the fact that each record must be serialized into a string (serialize the object values into a searchable string) in order to test each record.

Ways to improve performance:

  • Set a primary-key on the table (set to the name of a field that has a guaranteed unique value per row)
  • Paginate your table, so that you are only displaying max 100 rows (reducing the side of the DOM that Vue has to check for re-patching)

@sprocket99
Copy link
Author

@sprocket99 sprocket99 commented Oct 7, 2019

Its a simple table, 800 rows is nothing, using a manual Array.filter can get it to filter almost instantly. Adding a filter-debounce does improve it, but not enough, when typing it seems like its not responding for a couple of seconds before it decides to display what I typed.

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Oct 7, 2019

B-table itself is not a simple component... there are a lot of things that get processed in order to render a table.

If you don't apply the filter to the table (just have the input bound to a data property, but do not even pass it to your b-table, you will notice the input itself is slow... this is because Vue sees your app data changing and assumes that it needs to do a re-render, which in turn causes any child components to potentially re-render.

@sprocket99
Copy link
Author

@sprocket99 sprocket99 commented Oct 7, 2019

@tmorehouse Thanks. Any suggestions to remove or at least reduce the typing delay?

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Oct 7, 2019

Do not use a v-model on the search input, rather, use the @input event (which emits the input value) to call a debounced handler that updates your criteria.

See second option in this comment: #4150 (comment)

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Oct 7, 2019

Here is an example: https://jsfiddle.net/5crva6zf/

Note the table still takes time to render and time for Vue to patch the DOM (this is because there are so many rows displayed at once)

Something else you can do, is avoid using nested properties in data for values passed as props. When a nested property changes, it also causes a change on the root of the nested object.

If you need to use nested properties, access them via computedProperties (for getters at least)

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Oct 11, 2019

Bootstrap v2.0.4 has been released with has some table performance improvements

@sprocket99
Copy link
Author

@sprocket99 sprocket99 commented Oct 14, 2019

Yes, the performance is much improved. Thank you for following up on this!

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