ag grid vue button in cell

서론

이번 프로젝트에서 ag grid를 사용하여 여러 기능을 하면서 정리하고자 한다

소스

<ag-grid-vue @cell-clicked="cellClicked">

{ filed: 'click', headerName: '클릭테스트', width: 200,
    cellRenderer: () => {
        return `<button>click test</button>`;
    }
}

cellClicked(params){
	// 클릭한 cell 필드명으로 체크
	if(params.colDef.filed === 'click'){
    	alert('click!!');
    }
}

그리드 옵션 정리
api.sizeColumnsToFit(); // 좌우 스크롤 생기거나 여백이 생기지 않게 width에 맞춰서 컬럼 width가 자동으로 맞춰짐
api.setColumnDefs(dolumdefs) //컬럼 정보를 다시 set한다.(header 정보 변경시)
 
컬럼 정리

{
	field : "test", // 데이터 컬럼 매핑명
    headerName : "테스트", // 헤더명
    cellStyle : {"text-align" : "center"},
    width : 200, // cell 너비
    sortable : true,
    editable : true,
    
}

 

결론

현재 프로젝트하면서 추가하는 기능때마다 추가하도록 하겠다