[Bug Report] v-datatable checkbox selection is slow when there is large data rendered

[kanteankit]

Versions and Environment

Vuetify: 1.3.15
Vue: 2.5.17
Browsers: Chrome 71.0.3578.98
OS: Linux x86_64

Steps to reproduce

In the given codepen, select a row in the table.
You'll notice a lag in the selection of the checkbox. The number of rows is around 1800. It looks like the lag is due to the ripple on the checkbox,but, I may be wrong here.
My use case required a different background-color for the selected rows. The lag is prominently visible if we use a different background color for the active rows

Expected Behavior

The checkbox should be selected without any lag for large datasets also.

Actual Behavior

Checkbox in data-table gets selected after a certain lag

Reproduction Link

https://codepen.io/anon/pen/oJeBjJ

[KaelWD]

Duplicate of #2574

See #3435, vuejs/vue#6351

[kanteankit]

@KaelWD
On #2574, you mentioned that with 500 rows there is no issue. I updated your codepen with latest Vuetify and renderd 1800 rows. The checkbox gets selected after a lag.
Codepen: https://codepen.io/anon/pen/KbvQKj?editors=1111
Can you please let me know if this is still related to vuejs/vue#6351 or #3435 or is it something that the vuetify team needs to fix.

[KaelWD]

#2574 was complaining about a serious performance problem with 150, I demonstrated a minor problem with 500. This is a problem with vue and complex components, the only way we could fix it is to remove features. I believe they're intending to improve slot handing in vue 3.0 which should mitigate the problem somewhat.

[timothymarois]

Seeing this issue here. Incredibly taxing on the system trying to select all on large data sets. Once selecting all, trying to unselect just one takes a good few minutes. Need a resolution to this.

Removing ripple does not solve the issue as previously stated in #2574

[iurisilvio]

We had this issue with a huge table, with vuetify 1.5 and vuetify 2 (different projects). For a large number of rows it is almost unusable, because it rerender everything for every action on the table. @lrosemberg investigated and found the problem and a solution.

For vuetify 2, your custom slots should be components instead of inline templates.

I changed the vuetify datatable example to validate the issue and the solution.

Original code:

• https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/data-tables/simple/select.vue
• https://vuetifyjs.com/pt-BR/components/data-tables#selectable-rows

Fixed example (check console logs to understand): https://codepen.io/iurisilvio/pen/XWbbKOP

For vuetify 1.5 we have a solution too, but because you don't have the show-select directive, it is tricky to make checkbox work without this behaviour.

[Roman86]

in short: don't call any functions inside of table cell slots - in this case they would be called on each selection change. Instead, put your function calls deeper - inside components, or outside of table (memoizing call results in data object).
Thanks @iurisilvio for the fixed example

[eric-gonzalez-tfs]

We had this issue with a huge table, with vuetify 1.5 and vuetify 2 (different projects). For a large number of rows it is almost unusable, because it rerender everything for every action on the table. @lrosemberg investigated and found the problem and a solution.

For vuetify 2, your custom slots should be components instead of inline templates.

I changed the vuetify datatable example to validate the issue and the solution.

Original code:

• https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/data-tables/simple/select.vue
• https://vuetifyjs.com/pt-BR/components/data-tables#selectable-rows

Fixed example (check console logs to understand): https://codepen.io/iurisilvio/pen/XWbbKOP

For vuetify 1.5 we have a solution too, but because you don't have the show-select directive, it is tricky to make checkbox work without this behaviour.

Thanks for the insight here @iurisilvio.

Was facing the same issue with the v-treeview component that had a large amount of v-checkboxes. Seperating it into it's own component did the trick.