DevExtreme dxDataGrid에서 셀 병합(Cell Merge) 구현 방법

 

DevExtreme dxDataGrid에서 셀 병합(Cell Merge) 구현 방법

cell merge

 

DevExtreme의 dxDataGrid 컴포넌트는 기본적으로 셀 병합 기능을 제공하지 않지만, 사용자 정의 방식으로 구현이 가능합니다. 아래는 특정 열에서 같은 값이 연속으로 나타날 경우, 셀을 병합하여 표시하는 방법을 설명합니다.

1. 기본 원리

• onCellPrepared 이벤트를 사용하여 셀 렌더링 시점에 조작
• 동일한 값이 연속될 경우 윗 셀에 rowspan을 부여
• 아래쪽 셀은 display: none으로 숨김 처리

2. 구현 예시

$("#gridContainer").dxDataGrid({
    dataSource: yourDataSource,
    columns: [
        { dataField: "category", caption: "Category" },
        { dataField: "product", caption: "Product" },
        { dataField: "amount", caption: "Amount" }
    ],
    onCellPrepared: function(e) {
        if (e.rowType === "data" && e.column.dataField === "category") {
            const rowIndex = e.rowIndex;
            const data = e.component.getDataSource().items();

            if (rowIndex > 0 && data[rowIndex].category === data[rowIndex - 1].category) {
                e.cellElement.css("display", "none");
            } else {
                let rowspan = 1;
                for (let i = rowIndex + 1; i < data.length; i++) {
                    if (data[i].category === data[rowIndex].category) {
                        rowspan++;
                    } else {
                        break;
                    }
                }

                if (rowspan > 1) {
                    e.cellElement.attr("rowspan", rowspan);
                    e.cellElement.css("vertical-align", "middle");
                }
            }
        }
    }
});

3. 주의사항

• colspan (가로 병합)은 지원되지 않음 (세로 병합만 가능)
• Virtual Scrolling 모드에서는 셀 병합이 잘 동작하지 않을 수 있음 → scrolling: { mode: "standard" } 설정 권장
• 정렬, 필터링, 페이징이 적용되면 병합 조건이 깨질 수 있음 → 병합 로직 재적용 필요

4. 팁

병합이 많이 필요한 복잡한 그리드의 경우 다음 컴포넌트를 고려해볼 수 있습니다:

• dxTreeList: 계층 구조 데이터 병합에 적합
• dxPivotGrid: 다차원 데이터 병합에 유리

셀 병합을 적용하려는 컬럼 조건이나 데이터 구조에 따라 병합 방식도 달라질 수 있으니, 상황에 맞게 병합 로직을 커스터마이징하세요.