ag-grid cellRenderer를 활용한 HTML element(or innerHtml) 반환
데이터 그리드 라이브러리로 'AG Grid'를 사용하는 과정에서 위 이미지와 같이 하나의 row 데이터가 가지고 있는 여러 개의 첨부 파일을 그리드에 같이 보일 수 있도록 처리해 달라는 요청을 받아 'cellRenderer'를 활용해 보게 되었고, 해당 내용을 간단하게 정리하였습니다.
예시를 위해 아래 AG Grid 공식 문서의 'Quick Start -> Example JavaScript Data Grid' 코드를 기반으로 cellRenderer 기능을 추가하였으며, cellRenderer 기능 외 데이터 형식이나 css는 확인할 수 있을 정도로만 간단하게 설정된 점 참고 부탁드립니다.
(https://www.ag-grid.com/javascript-data-grid/getting-started/)
ag-grid cellRenderer
{
field: "fileData",
cellRenderer: function(params) {
// params: 셀 데이터, 컬럼 정보 등 포함
return "<div>커스텀 HTML</div>";
}
}(cellRenderer 기본 형식)
cellRenderer는 AG Grid 내부적으로 제공되는 기능으로, 특정 셀의 내용을 커스터마이징하여 렌더링 할 수 있도록 해주는 콜백 함수입니다.
cellRenderer는 기본적으로 위 코드와 같이 사용되며, 함수로 넘어오는 params.value 또는 params.data를 통해 셀 데이터에 접근하여 내용을 커스터마이징 할 수 있습니다.
코드 값을 문자열로 바꾸는 등('01' -> '진행 중'), 간단한 값 변환 같은 경우 valueFormatter를 사용할 수 있지만, cellRenderer를 사용하게 되면 html 형식의 반환이 가능하기 때문에 '조건부 스타일 적용', '버튼 또는 아이콘 삽입' 등, 원하는 형태로의 그리드 커스텀 활용도가 높아지게 됩니다.
cellRenderer 적용
<body>
<!-- Your Data Grid container -->
<div id="myGrid" style="height: 380px"></div>
<script>
// Row Data Interface
// Grid API: Access to Grid API methods
let gridApi;
// Grid Options: Contains all of the grid configurations
const gridOptions = {
// Data to be displayed
rowData: [
{ make: "Tesla", model: "Model Y", price: 64950, electric: true, imageFiles: [ { fileName: "TeslaImage1.jpg", fileIdx: "1" } ] },
{ make: "Ford", model: "F-Series", price: 33850, electric: false, imageFiles: [ { fileName: "FordImage1.png", fileIdx: "2" }, { fileName: "FordImage2.png", fileIdx: "3" }, { fileName: "FordImage3.png", fileIdx: "4" } ] },
{ make: "Toyota", model: "Corolla", price: 29600, electric: false, imageFiles: [ { fileName: "ToyotaImage1.jpg", fileIdx: "5" } ] },
{ make: "Mercedes", model: "EQA", price: 48890, electric: true },
{ make: "Fiat", model: "500", price: 15774, electric: false, imageFiles: [ { fileName: "FiatImage1.png", fileIdx: "6" } ] },
{ make: "Nissan", model: "Juke", price: 20675, electric: false },
],
// Columns to be displayed (Should match rowData properties)
columnDefs: [
{ field: "make" },
{ field: "model" },
{ field: "price" },
{ field: "electric" },
{ field: "image file",
autoHeight: true,
cellRenderer: function(params){ return params.data["imageFiles"] == undefined ? "" : fileFormatter(params.data["imageFiles"]); }
}
],
defaultColDef: {
flex: 1,
},
};
// Create Grid: Create new grid within the #myGrid div, using the Grid Options object
gridApi = agGrid.createGrid(document.querySelector("#myGrid"), gridOptions);
function fileFormatter(params) {
const files = params; // 파일 배열
var returnValue = "";
for (let i = 0; i < files.length; i++) {
var html = '<div style="padding: 2px;"><p style="padding: 0; margin: 0; color: blue;" onclick="downloadImageFile(' + files[i].fileIdx + ')">' + files[i].fileName + '</p></div>';
if (i != (files.length - 1)) {
html += '<br>';
}
returnValue += html;
}
return returnValue;
}
function downloadImageFile(fileIdx) {
// 이미지 다운로드 로직 생략
}
</script>
</body>
예시 이미지에 사용된 소스코드입니다. 우선 실제로는 api를 통해 그리드를 만들 데이터를 가져오겠지만, 여기서는 임시로 rowData를 사용하였으며, 데이터 형식은 하나의 row 데이터 내부적으로 파일 데이터 리스트를 가지고 있는 형태입니다.
{ field: "image file",
autoHeight: true,
cellRenderer: function(params){ return params.data["imageFiles"] == undefined ? "" : fileFormatter(params.data["imageFiles"]); }
}gridOptions의 columnDefs 하위 'image file' field를 살펴보면 cellRenderer를 통해 파일 데이터가 있는 경우 fileFormatter()라는 커스텀 함수를 반환하도록 구현하였습니다.
function fileFormatter(params) {
const files = params; // 파일 배열
var returnValue = "";
for (let i = 0; i < files.length; i++) {
var html = '<div style="padding: 2px;"><p style="padding: 0; margin: 0; color: blue;" onclick="downloadImageFile(' + files[i].fileIdx + ')">' + files[i].fileName + '</p></div>';
if (i != (files.length - 1)) {
html += '<br>';
}
returnValue += html;
}
return returnValue;
}fileFormatter 함수에서는 넘어온 파일 데이터를 가지고 반복문을 통해 해당 셀에 반환할 html 코드를 생성하게 됩니다.
해당 예시에서는 간단하게 파일 명을 보여주고 클릭 시 파일 다운로드가 동작되는 정도인데, 필요에 따라 함수 내부적으로 조건에 따른 커스텀을 진행하여 사용할 수 있습니다.
'Programming > Javascript' 카테고리의 다른 글
| (javascript) Throttle, Debounce를 통한 따닥 방지 (0) | 2025.03.23 |
|---|---|
| javascript 배열 비교, 차집합 교집합 구하는 방법 (0) | 2024.12.10 |
| javascript 유효성 검사 함수 test(), exec(), match() 비교 정리 (0) | 2024.10.23 |
| (Javascript) a 태그의 download 속성을 통한 파일 다운로드 방법 및 예시 (1) | 2024.07.14 |
| JavaScript 이벤트 전파 개념과 이벤트 전파 막는 방법 (0) | 2024.04.03 |