Tabulator 사용기

Tabulator Logo

 

순수 자바스크립트를 이용해서 개발을 해보고 싶단 생각이 들어서,

그리드를 찾아보다가, Tabulator 를 알게되었다.

꽤 괜찮아보여서 이것을 적용해 보기로 하였다.

 

Release Notes | Tabulator

Tabulator - Release Notes

(불러운 이미지가 왜 5.4 지? 링크는 5.5 버전인데..)

 

이것으로 테스트를 해보기로 하였다.
( 처음 시작할 때 5.5 였는데, 정리하고 블로그에 올리지 않고 있는 사이에  5.6 이 release 되었다.

Range 관련 부분이 추가되어서 적용해볼만한것 같다. 향후 추가해봐야겠다. )

Release Notes | Tabulator

Tabulator - Release Notes

(이것도 불러운 이미지가 왜 5.4 지? 링크는 5.6 버전인데..)

 

## 적용해 본 기능

 

1. 디자인 변경 :

    별도의 css 를 추가하여 다음 사이트에 나온 항목에 대해 디자인을 적용하면 내가 원하는 디자인이 가능하다.
     CSS Styling | Tabulator

.tabulator .tabulator-header .tabulator-col {

    background: #428AC9 !important;

}

 

2. 각 항목별 editing type 변경
Editing Data | Tabulator

 

3. Custom Editor 적용
Editing Data | Tabulator
나는 코드/명칭/search icon 으로 구분된 입력 방식으로 하고, 조회시에도 코드/명이 조회되도록 하는 것을 적용했다.
이 경우 custom editor 와 formatter 둘 다 적용을 해둬야 한다.

var searchEditor = function(cell, onRendered, success, cancel, editorParams){ }

var searchFormatter = function(cell, formatterParams, onRendered){ }

new Tabulator(tblId, {

        height:"90%",

        //selectable:true,

        columns:[

           {title:"Col ID", field:"colid", hozAlign:"center", width:160, headerFilter:"input",

              editor:searchEditor, editorParams:{......},

              formatter:searchFormatter, formatterParams:{......},

           },

        ],

 });

 

4. data load
Loading Data | Tabulator
나는 별도로 fetch 처리 후 결과가 ok 인 경우 json 을 table.setData() 하는 방식으로 처리했다.

 

5. event 적용
Editing Data | Tabulator
 

table.on("rowClick", function(e, row){

       });

 

6. 엑셀 다운로드 : 테이블 내용 다운로드
Download Data | Tabulator
table.download(type, "다운로드파일명");

 

7. data excel import
화면 조회 컬럼과 data import 용이 다를 경우 import 용 table 을 따로 만들어서 import 시 화면에 조회되는 tabulator 에 값을 변경하여 addRow 시킨다.

 

8. 행추가, 행삭제
Updating Data | Tabulator
table.addRow, deleteRow

 

9. data format
- date 형 포맷
  inputFormat, outputFormat 을 맞춰주어야 한다.
  formatterParams:{inputFormat:"yyyy-MM-dd HH:mm:ss",outputFormat:"yyyy.MM.dd HH:mm:ss",}
- data 행 Numbering
  column formatter 셋팅 : formatter:"rownum"
- data 행 선택 체크박스
  column formatter 셋팅 : formatter:"rowSelection"

 

10. 컬럼에 filter 적용
columns:[{title:"Col1", field:"col1", headerFilter:"input"}]

 

11. 컬럼에 합계 적용
columns:[{title:"Col1", field:"col1", topCalc:"sum", topCalcParams:{precision:1}}]

 

## 아쉬운 기능

 1. 변경된 data 만 읽어오지 못하는 것 같다.

     내가 못 찾았는지 모르겠지만, 별도로 구현을 해야했다.

2. 보통 행의 No 로 row 를 얻어오고 싶었지만, 그런 기능이 없고,
    행의 row component 라는 방식으로 지정된 row 를 읽어야 해서 불편했다.
    예를 들면 table.getRow(2); 하면 2번째 행이 아니라, 행의 index column 의 값이 2인 행을 return 한다.

3. rowSelection 을 사용하거나, deselectRow / selectRow(row) 를 사용하지 않으면 현재 선택된 행을 가져올 수 없었다.
    마스터 테이블의 행의 다른 부분 클릭하여 상세 테이블에 데이터를 가져온 경우
   마스터 테이블의 어느 행에 포커스가 있었던 것인지 알고 싶었다.

 

모든 것을 사용해보지는 않았지만, 지금까지 해본 것으로 봤을 때, 몇몇 아쉬운 기능이 있었지만, 우회로 사용한다면 가능해서 이 정도면 훌륭한 컴포넌트란 생각이 든다.

 

대량의 데이터도 문제 없는지는 향후 확인해봐야겠다.