In my VueJS and Vuetify project, I encountered an issue. I am trying to create a table with expandable rows for displaying orders and their associated products. The table needs to show at least 100 rows of orders on one page. To achieve this, I utilized the <v-data-table> component from Vuetify framework.
The Challenge
Upon completion, I noticed that the expansion of each row was taking too long (which is not acceptable for a fast system). It was also causing significant lag when expanding all visible records, requiring over 20 seconds.
My Attempts
I initially tried using the standard Vuetify <v-data-table> with the show-expand prop and the expanded-item slot - but it was slowest in performance. Then, I attempted to customize it:
<v-data-table>
<template v-slot:item="{item}">
<td @click="item.expanded = !item.expanded">expand / hide</td>
<!--- [my table content here - too long to post it here] -->
<tr v-if="item.expanded">
<td :colspan="headers.length">
<v-data-table>
<!--- [content of the nested table - also too long to post it here] -->
</v-data-table>
</tr>
</template>
</v-data-table>
An interesting observation - v-if performs faster than v-show, which contradicts the common belief that changing from display: none to nothing should be less taxing than adding/removing objects from the DOM.
This method showed some improvement compared to the initial approach, but it was still sluggish. I also tried setting :ripple="false" for every v-btn in my tables, which helped slightly. I conducted tests on Chrome, Firefox, Windows, Linux Fedora, and Android smartphones.
What more can I do to optimize the performance?
Thank you for your help!