Happy-Coding-Clans / Happy-Coding-Clans/vue-easytable

[Bug Report] Performance issue with fixed columns

Open
#411 0 comments 0 reactions 0 assignees View on GitHub
🚀 performance
Dominant language
JavaScript
Stars
3.8k
Forks
771
PR merge metrics
No merged PRs in 30d

Description

### I am opening an issue for
vue-easytable

### Issue Type
Bug

### Issue Title
Performance issue with fixed columns

### library Version
2.9.0

### Vue Type
2.6.14

### Browser Type
Chrome Version 95.0.4638.54 (Official Build) (x86_64)

### System version
MacOS 11.4

### Reproduction url
https://stackblitz.com/edit/vuejs-starter-q8uzw6?file=table.js

### Step to reproduce
1. Open the example URL
2. Copy the iframe url and open it in a new tab.
3. Open your vue dev tools performance tab.
4. Start recording performance.
5. Click the button "Toggle Normal"
6. Stop recording performance
7. Observe the number of creates/updates/etc for `VeTableBodyTd`
8. Repeat steps 4 through 7.
9. Observe that the number of creates/updates/etc are the same as last time.
10. Start recording performance.
11. Click the button "Toggle Fixed Column".
12. Stop recording performance.
13. Observe the number of creates/updates/etc for `VeTableBodyTd`
14. Repeat steps 10 through 13.
15. Observe the number of updates is significantly higher than the first time (roughly `[num cells] x [num columns]`)

### What is expected?
Toggling `` with `v-if` should behave the same with fixed columns or without fixed colums

### What is actually happening?
Toggling `` with `v-if` when fixed columns are present renders too many times leading to bad performance

### Any additional comments? (optional)
I did not use code sandbox because it was extremely slow to the point of being unusable. stackblitz should suffice. Requiring users to use this form means they can't easily upload images and other features of the github issue creator.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.