예전에 만들었던 10만건 이상 처리 가능한 grid 만들기(초안)을 시작으로 제대로 datatable 또는 data grid 라고 불리우는 component를 만들어보고자 한다.
일단 요구사항을 정리해 봤는데... 너무 많다.
- 10만건 이상 처리 가능해야 하고 sorting, filtering, fixed header, fixed column, column width 설정, paging, column 숨기기 옵션, column size 조정, context menu 등....
차근차근 하나씩 만들어본다...
컬럼옵션을 이런식으로... 넣으면
tableColumns: [ {key: 'idx', sort: true, name: 'No', width: 50}, {key: 'name', name: 'Name', width: 200, sort: true, textwrap: 'ellipsis'}, {key: 'id', width: 100, sort: true, textwrap: 'ellipsis'}, {key: 'email', sort: true}, {key: 'cellphone', width: 150} ]
이렇게 잘 나온다.
초안으로 구성한 datatable 은 아래와 같은 기능을 제공한다.
- 대량 데이터 표현 시 화면에 보이는 데이터 + top/bottom에 약간의 데이터만 표현하고 나머지는 vritual dom을 이용해 필요한 데이터만 dom에 표현하도록 하기
- fixed header 지원
- column width 조정 지원 (전체는 100%이며 px로 각각 column을 지정할 수 있고 지정하지 않은 column은 자동으로 늘어나게 된다.)
- sorting 지원
- ellipsis 로 표현할지 여부 설정 가능...
이제 하나씩 하나씩 기능을 추가하면서 완성도를 높이면서 perfect 한 datatable component 를 만들어 보자.
소스코드는 github에서 확인 가능하다.
https://github.com/kimyounghoi/vuedatatable
