[Tabulator] 테이블에 열 추가하기

Tabulator는 table을 다루기 쉽게 해주는 아주 강력한 도구이다. 일반적인 웹사이트를 사용한다면 추천하지 않는다. 그러나 B2B를 대상으로 table을 자주 보여주는 경우에는 활용도가 높다. 쉽고 빠르게 사용할 수 있기 때문이다. 오늘은 너무 피곤하기 때문에 일단 작성 자체에 의의를 두고 tabulator를 왜 사용하며 어떤 경우에 활용하는지 자세히 설명해보겠다. 가장 기본이 되는 row, 즉 행을 추가해주는 방법은 아래와 같다.

 

//1//
var table = new Tabulator("#example-table", {
    height:"311px",
    addRowPos:"bottom",
    columns:[
        {title:"Name", field:"name", width:200, editor:"input"},
        {title:"Progress", field:"progress", width:100, hozAlign:"right", sorter:"number", editor:"input"},
        {title:"Gender", field:"gender", editor:"input"},
        {title:"Rating", field:"rating", hozAlign:"center", width:80, editor:"input"},
        {title:"Favourite Color", field:"col", editor:"input"},
        {title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date", editor:"input"},
        {title:"Driver", field:"car", hozAlign:"center", editor:"input"},
    ],
});
//2//
//Add row on "Add Row" button click
document.getElementById("add-row").addEventListener("click", function(){
    table.addRow({});
});

//3//
//Delete row on "Delete Row" button click
document.getElementById("del-row").addEventListener("click", function(){
    table.deleteRow(1);
});
//4//
//Clear table on "Empty the table" button click
document.getElementById("clear").addEventListener("click", function(){
    table.clearData()
});
//5//
//Reset table contents on "Reset the table" button click
document.getElementById("reset").addEventListener("click", function(){
    table.setData(tabledata);
});

1. 가장 먼저 테이블을 셋팅해준다. 

 

2. add row는 테이블의 row만을 추가해준다.

 

3. 첫번째 열을 삭제해준다.

 

4. 테이블을 모두 비운다.

 

5. setData를 통해 테이블 정보를 다시 셋팅해준다.

 

 

여기서 어려울 것은 하나도 없다. 그러나 삭제 메소드에서 버튼 한번에 하나의 열만 삭제하는 것이 가능하다. 해당 열을 선택해서 할 수 있는 것은 없을까? 물론 가능하다. 그것 또한 아주아주 간단하니,, 곧 돌아와서 설명하도록 하겠다!