타블레이터 Tabulator 셀 한개에 div 추가해서 css 적용하기

타블레이터 Tabulator 셀 한개에  div 추가해서 css 적용하기

 

예시 코드 :

const mainGrid = {
    createGrid: function(){
		mainGrid.grid1 = new Tabulator('#testGrid', {

			placeholder:"No Data Set",
			movableRows:true,
			movableRowsConnectedTables:'#testGrid',
		  	movableRowsReceiver: "add",
			columns: [
			  { field: "C_ID",  visible:false, },
			  { field: "C_NM",  title: "", width:120, },
			  { field: "QNTY", title: "량", width:50,},
			  { field: "INCR", title: "증감", width:50,},
			  { field: "L", title: "L", width:70, formatter: this.lStyle, },  
		    ]
		});
    },

    lStyle: function(cell, formatterParams, onRendered){
		const value = cell.getValue();
		const divElement = document.createElement("div");
		const pElement = document.createElement("p");
		divElement.className = "lStyle";
		divElement.appendChild(pElement);
		pElement.textContent = value;

		if (value === null) {
			pElement.className = "losSt_N";
			pElement.textContent = "알수없음";
		}

		return divElement;
	},

}

적용하고자 하는 필드에 formatter를 이용함!! 관련 문서는 아래 링크에!

5.5버전이 최신이지만.. 지금 사용 버전이 5.2라서 아래 문서는 5.2버전

 

https://tabulator.info/docs/5.2/format#format

Tabulator - Interactive JavaScript Tables

데이터에 따라서 아래와 같이 적용도 가능함.

lStyle: function(cell, formatterParams, onRendered){
	const data = cell.getRow().getData(); 
	const los = data.LS; // 원하는 데이터1
	const losStr = data.L_STR; // 원하는 데이터2
	if(lStr == '알수없음') return '<div  class="lStyle" title="-"><p class="ls_N">알수없음</p></div>';
	return `<div class="lStyle" title="${losStr}"><p class="losSt_${losStr}">${los}(${losStr})</p></div>`;
},