[컴][웹] 큰 데이터를 위한 vuejs table library

 

big data / big size data handling with table / html table / fast / 빅데이터 처리 / 많은 양의 데이터 처리할 때 / reuse / 재사용 / dom / 가상 스크롤러 사용하는

vuejs table library with virtual scroller

기존의 framework 중에 Element - A Desktop UI Toolkit for Web 를 사용해서, table 을 사용했다.

table 을 만드는데는 유용했지만, 각 cell 마다 input 등을 넣고 사용했더니, row 가 10개가 넘어가면 반응이 너무 느렸다. chrome 에서 profiling 을 해보면, component 에 대한 rendering 을 너무 하고 있었다. 즉, 값 하나를 변경할 때마다, table 전체를 다시 그리고 있었다.

virtual scroller

그런 이유로 virtual scroller 가 필요했다. 이 virtual scroller 의 자세한 동작은 아래를 참고하자. 명확치는 않지만 방법은 기본적으로 view 에 해당하는 DOM 을 계속 reuse 하는 것이다.

• GitHub - Akryum/vue-virtual-scroller: ⚡️ Blazing fast scrolling for any amount of data

virtual scroller 를 지원하는 vue table library

• GitHub - Akryum/vue-virtual-scroller: ⚡️ Blazing fast scrolling for any amount of data
  • 예제: https://akryum.github.io/vue-virtual-scroller/#/
  • 기본적으로 table library 는 아니다.
    
• GitHub - tangbc/vue-virtual-scroll-list: ⚡️A vue component support big amount data list with high render performance and efficient.
  • 예제: https://tangbc.github.io/vue-virtual-scroll-list/#/
• vxe-table/README.en.md at master · x-extends/vxe-table · GitHub
  • 예제: https://x-extends.github.io/vxe-table/#/table/scroll/scroll
• https://www.npmjs.com/package/vue-virtual-table
  • 개인적으로 테이블이 필요한데 이 library 가 간단해서 가장 마음에 든다.
  • vue-virtual-table 사용 팁