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

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

[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