이번 스터디에서는 SpreadJS에서 제공하는 테이블 시트의 슬라이스 기능을 소개합니다. 

테이블 시트 그룹 요약에 대한 내용은 이전 글을 참고해 주세요!

• 테이블 시트 시작하기 5 - 그룹 요약

그룹의 하위 요약 슬라이스 

테이블 시트의 슬라이스 기능은 그룹 요약된 데이터의 하위 요약을 구현하는 기능입니다.
이 기능은 이전에 소개한 그룹 요약 기능과 마찬가지로 테이블 시트의 groupBy 메소드에 포함되어 있으며 옵션 인수를 다음과 같이 설정합니다.

// groupBy 메소드 사용, 그룹화를 설정합니다.
tableSheet.groupBy([{
    caption: "카테고리",
    field: "categoryName",
    width: 150,
    // 그룹 요약을 설정합니다.
    summaryFields: [{
        caption: "재고 합계",
        formula: "=SUM([unitsOnOrder])",
        width: 150,
        // 하위 요약（슬라이스)을 설정합니다.
        slice: {
            field: "=YEAR([@orderDate])"
        },
    }]
}]);

다음은 위의 코드를 이전 샘플에 구현한 샘플입니다.
그룹 요약의 결과인 '재고 합계' 열 외에도 판매 주문 연도를 기준으로 하는 하위 요약 열(2021 및 2022 열)이 화면에 추가되었습니다.

슬라이스 옵션  

위 샘플에서 groupBy 메소드의 옵션으로 설정한 슬라이스에 대한 옵션입니다.
해당 옵션을 사용하면 슬라이스 기능에 대한 다음과 같은 설정이 가능합니다.

이 중 많은 기능은 하위 요약 열의 스타일을 조정하는 것으로, 이전에 소개한 그룹 열이나 그룹 요약 열의 옵션과 같은 방식으로 설정할 수 있습니다. (caption이나 style 등 그룹열 옵션과 같은 이름인 경우)

하위 요약할 데이터 필드 지정 

또한 주요 설정은 field 선택 사항입니다. 이 옵션은 하위 요약 하려는 데이터 필드 요소를 설정합니다. 이번 샘플에서는 옵션을 다음과 같이 설정해 보겠습니다.

=YEAR([@orderDate])

orderDate는 샘플의 수주일 데이터의 데이터 필드 이름입니다. YEAR 함수로 이 데이터 필드에서 "연도" 데이터를 가져와 field 옵션으로 설정하고 있습니다. 이를 통해 재고 합계에 대한 "연도"마다 하위 요약이 실행됩니다.

지금까지 테이블 시트의 슬라이스에 대해 알아보았습니다.

다음 스터디에서는 테이블 시트 다중 그룹화 기능에 대해 알아보겠습니다.

감사합니다.

지금 바로 SpreadJS를 다운로드하여 직접 테스트해 보세요!

• SpreadJS 공식 홈페이지
• SpreadJS 튜토리얼 및 샘플
• SpreadJS Q&A
• SpreadJS FAQ